9月3日Verlog

58403 ワード
大邱AI学校 テキストリンク
学習の内容

Naver Mobile実習#2


https://m.naver.com/

0. Default


[html]
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" type="text/css" href="css/style.css">

	<title>NAVER</title>
</head>
<body>

	<div class="wrapper">
		
		<nav id="main_nav"></nav>
		<header id="header"></header>
		<div id="banner_1"></div>
		<div id="weather"></div>
		<div id="now"></div>
		<div id="banner_2"></div>
		<div id="banner_3"></div>
		<div id="banner_4"></div>
		<div id="corona"></div>
		<div id="ai"></div>
        	<div id="talk"></div>
                <div id="today"></div>
                <div id="footer"></div>
	</div>

</body>
</html>
[css]
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

ol, ul {
	list-style: none;
}

img {
	vertical-align: middle;
}

a {
	text-decoration: none;
	color: #000000;
}

input, button {
	border: none;
	background: transparent;
}

input:focus {
	outline: none;
}


.wrapper {
	width: 375px;
	height: 100vh;
	background-color: #eaeef3;	

	margin: 0 auto;

	overflow-x: hidden;
	overflow-y: auto;
}

.banner_wrap {
	width: 375px;
	margin: 0 auto;
}

.container {
	padding: 0 20px;
	background-color: #ffffff;

	margin: 5px 0;
}

6. Banner 2/3/4


[html]
		<div id="banner_2">
			<div class="banner_wrap">
				<img src="https://via.placeholder.com/320x53">
			</div>			
		</div>


		<div id="banner_3">
			<div class="banner_wrap">
				<img src="https://via.placeholder.com/320x75">
			</div>			
		</div>


		<div id="banner_4">
			<div class="banner_wrap">
				<img src="https://via.placeholder.com/1250x370">
			</div>			
		</div>
[css]
#banner_2, #banner_3 {
	background-color: #ffffff;
	margin-top: 10px;
}

#banner_2 .banner_wrap,
#banner_3 .banner_wrap {
	width: 320px;
	margin: 0 auto;
}

#banner_2 .banner_wrap img,
#banner_3 .banner_wrap img {
	width: 100%;
}

#banner_4 {
	background-color: #ffffff;

	margin-top: 10px;
}

#banner_4 .banner_wrap {
	width: 100%;
	height: 155px;
}

#banner_4 .banner_wrap img {
	height: 100%;

	position: relative;
	left: 50%;
	transform: translateX(-50%);
	/*이미지 중앙 정렬*/
}

7. Corona


[html]
		<div id="corona">
			<div class="container">				
				<a href="#" class="corona_left">
					<img src="https://via.placeholder.com/35">
					<div class="txt_wrap">
						<h3>코로나19</h3>
						<p>국내외 확진 현황</p>
					</div>
				</a>

				<a href="#" class="corona_right">
					<img src="https://via.placeholder.com/35">
					<div class="txt_wrap">
						<h3>예방접종센터</h3>
						<p>내 주변 센터 찾기</p>
					</div>
				</a>
			</div>
		</div>
[css]
#corona {
	overflow: hidden;
}

#corona .container {
	margin-top: 10px;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#corona .container a {
	position: relative;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;

	padding: 20px 0;
}

#corona .container a img {
	width: 35px;
	border-radius: 50%;
}

#corona .container a .txt_wrap {
	margin-left: 8px;
}

#corona .container a .txt_wrap h3 {
	font-size: 16px;
	font-weight: 700;
}

#corona .container a .txt_wrap p {
	font-size: 14px;
	font-weight: 400;

	margin-top: 4px;
}

#corona .container a.corona_right:before {
	content: "";
	display: inline-block;

	position: absolute;
	/*a태그에 relative 설정*/
	width: 1px;
	height: 42px;
	background-color: #efeff0;

	top: 20px;
	left: -5px;
}

8. Ai


[html]
		<div id="ai">
			<div class="container">
				<div class="ai_wrap">
					<div class="ai_left">
						<img src="https://via.placeholder.com/40">						
						<p>더 편리해진 AI 검색 기능<br>
							<strong>네이버앱</strong>에서 만나보세요</p>					
					</div>

					<div class="ai_right">
						<span>앱 사용하기 ></span>
					</div>
				</div>
			</div>
		</div>
[css]
#ai {
	overflow: hidden;
}

#ai .ai_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 20px 0;
}

#ai .ai_wrap .ai_left {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

#ai .ai_left img {
	width: 40px;
	height: 40px;
	border-radius: 8px;

	margin-right: 10px;
}

#ai .ai_left p {
	font-size: 15px;
	color: #424242;
	font-weight: 400;
}

#ai .ai_left p strong {
	color: #000000;
}

#ai .ai_right span {
	font-size: 14px;
	font-weight: 400;
	color: #03c95b;;
}

9. Talk


[html]
		<div id="talk">
			<ul>
				<li class="left_list">
					<a href="#">
						<i class="icon_arrow left"></i>
						<div class="txt_wrap">
							<h4>패션뷰티판</h4>
							<p>케라스타즈 썸머두피케어<br>프리오더 역대급 혜택</p>
						</div>
						<img src="https://via.placeholder.com/52">
					</a>
				</li>
				<li class="left_list">
					<a href="#">
						<i class="icon_arrow left"></i>
						<div class="txt_wrap">
							<h4>패션뷰티판</h4>
							<p>케라스타즈 썸머두피케어<br>프리오더 역대급 혜택</p>
						</div>
						<img src="https://via.placeholder.com/52">
					</a>
				</li>
				<li class="right_list">
					<a href="#">
						<img src="https://via.placeholder.com/52">						
						<div class="txt_wrap">
							<h4>패션뷰티판</h4>
							<p>케라스타즈 썸머두피케어<br>프리오더 역대급 혜택</p>
						</div>
						<i class="icon_arrow right"></i>
					</a>
				</li>
				<li class="right_list">
					<a href="#">
						<img src="https://via.placeholder.com/52">						
						<div class="txt_wrap">
							<h4>패션뷰티판</h4>
							<p>케라스타즈 썸머두피케어<br>프리오더 역대급 혜택</p>
						</div>
						<i class="icon_arrow right"></i>
					</a>
				</li>
			</ul>
		</div>
[css]
#talk {
	padding: 20px 0;
}

#talk ul {
	overflow: hidden;
}

#talk ul li {
	position: relative;

	width: 277px;
	padding: 15px 0 15px;
	background-color: #ffffff;
	box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);

	margin-bottom: 12px;
}

#talk ul li:last-child {
	margin-bottom: 0;
}

#talk ul li.left_list {
	float: left;

	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
}

#talk ul li.right_list {
	float: right;

	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
}

#talk ul li.left_list a {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

#talk ul li.right_list a {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

#talk ul li a .icon_arrow {
	display: inline-block;
	width: 20px;
	height: 16px;	
}

#talk ul li.left_list a .icon_arrow {
	background-color: #9761ed;

	margin-right: 16px;
	margin-left: 10px;	
}

#talk ul li.right_list a .icon_arrow {
	background-color: #0ac666;
	
	margin-left: 16px;
	margin-right: 10px;
}

#talk ul li a .txt_wrap {
	width: 157px;
}

#talk ul li a .txt_wrap h4 {
	font-size: 14px;
    font-weight: 600;   

    line-height: 17px;
}

#talk ul li.left_list a .txt_wrap h4 {
	 color: #9761ed;
}

#talk ul li.right_list a .txt_wrap h4 {
	color: #0ac666;
}

#talk ul li a .txt_wrap p {
    font-size: 13px;

    line-height: 16px;

    margin-top: 3px;
}

#talk ul li a img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
}

#talk ul li.left_list a img {
	margin-left: 8px;
}

#talk ul li.right_list a img {
	margin-right: 8px;
}

10. Today


[html]
		<div id="today">
			<div class="container">
				
				<div class="content_header">
					<h3>오늘의 네이버</h3>
					<a href="#">더보기 ></a>
				</div>

				<div class="content_body">
					<img class="banner" src="https://via.placeholder.com/345x140">
					<div class="bottom_wrap">
						<i class="icon"></i>
						<div class="txt_wrap">
							<h4>네이버 플레이스</h4>
							<p>내 근처, 국민지원금 사용처는 어디?<br>
							터치 한번으로 확인하세요!</p>
						</div>
					</div>
				</div>

			</div>
		</div>
[css]
#today {
	padding: 50px 0;
}

#today .container {
	padding: 0 20px;
	background-color: transparent;
}

#today .content_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	border-top: solid 1px #e0e4ea;

	padding-top: 24px;
	margin-bottom: 10px;
}

#today .content_header h3 {
	font-size: 18px;
	font-weight: bold;
}

#today .content_header a {
	font-size: 14px;
	font-weight: 400;
	color: #767678;
}

#today .content_body {
	overflow: hidden;

	width: 100%;
	border-radius: 8px;
	box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);	
}

#today .content_body .banner {
	width: 100%;
}

#today .content_body .bottom_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;

	padding: 14px 13px 12px 15px;
	background-color: #ffffff;
}

#today .content_body .bottom_wrap .icon {
	display: block;
	width: 52px;
	height: 52px;
	background-color: darkblue;
	border-radius: 50%;

	margin-right: 8px;
}

#today .content_body .bottom_wrap .txt_wrap h4 {
	font-size: 15px;
	font-weight: 600;
}

#today .content_body .bottom_wrap .txt_wrap p {
	font-size: 13px;
	font-weight: 400;
	color: #929294;

	line-height: 16px;
}

11. Footer


[html]
		<div id="footer">
			<div class="txt_wrap">
				<div class="link">
					<a href="#">로그인</a>
					<a href="#">전체서비스</a>
					<a href="#">PC버전</a>
				</div>
				<div class="link">
					<a href="#">이용약관</a>
					<a href="#">개인정보처리방침</a>
					<a href="#">고객센터</a>
				</div>
			</div>

			<h1>
				<a href="#">
					<img src="https://via.placeholder.com/74x14">
				</a>
			</h1>
		</div>
[css]
#footer {
	padding: 35px 0 80px;
	text-align: center;
}	

#footer .txt_wrap .link a {
	position: relative;
	/*before에 position: absolute;*/
	display: inline-block;

	padding: 3px 9px;

	font-size: 13px;
	font-weight: 400;
	color: #929294;

	letter-spacing: -0.5px;
}

#footer .txt_wrap .link a:before {
	content: "";
	display: inline-block;
	position: absolute;

	width: 1px;
	height: 10px;
	background-color: #d7dfe7;

	top: 7px;
	left: 0;
}

#footer .txt_wrap .link a:first-child:before {
	content: none;
}
/*나열된 태그의 연속성이 깨질 땐 nth-child 사용할 수 없다.*/
 
#footer h1 {
	text-align: center;
}

#footer h1 a img {
	width: 74px;
}
Web_React #15
四.GCDスレッド通信と共通関数