9월 2일 Velog

류영서·2021년 9월 2일
0

학습한 내용

네이버 모바일 실습

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>

</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;
}

모바일 버전 만들 때 설정

  • head에 meta 태그로 viewport를 꼭꼭 넣어줘야 한다.
    : <meta name="viewport" content="width=device-width, initial-scale=1.0">
    : https://www.w3schools.com/css/css_rwd_viewport.asp

  • height: 100vh;
    : v=viewport, h=height
    : 높이값 = 기기의 높이값의 100% (스크롤 포함)

1. Main Nav

[html]

		<nav id="main_nav">
			<ul>
				<li class="active"><a href="#">홈</a></li>
				<li><a href="#">뉴스</a></li>
				<li><a href="#">스포츠</a></li>
				<li><a href="#">쇼핑</a></li>
				<li><a href="#">경제지표</a></li>
				<li><a href="#">책방</a></li>
				<li><a href="#">리빙</a></li>
				<li><a href="#">뭐하지</a></li>
			</ul>
		</nav>

[css]

#main_nav {
	overflow: hidden;

	background-color: #08be74;
	border-top: solid 1px #2ca87b;
	border-bottom: solid 1px #2ca87b;
}

#main_nav ul {
	overflow-x: auto;
	white-space: nowrap;

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

#main_nav ul {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
#main_nav ul::-webkit-scrollbar {
	display: none;
}

#main_nav ul li {
	height: 54px;
	text-align: center;
}

#main_nav ul li a {
	display: block;
    
    height: 100%;
    border-bottom: solid 5px transparent;

    font-size: 18px;
    font-weight: 600;
    color: #7cddb4;
    
    line-height: 54px;

    margin: 0 10px;
}

#main_nav ul li.active a {
	border-bottom: solid 5px #7cddb4;

	color: #ffffff;
}
  • #main_nav에 `overflow: hidden;
  • #main_nav ul에 overflow-x: auto; white-space: nowrap;

스크롤 기능은 살리면서(mac 유저) 스크롤 보이지 않게 하기

#main_nav ul {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
#main_nav ul::-webkit-scrollbar {
	display: none;
}

2. Header

[html]

		<header id="header">
			<div class="search_wrap">
				<a href="#" class="link_logo"></a>
				<input type="text" placeholder="검색어를 입력해주세요.">
				<a href="#" class="link_voice"></a>
			</div>

			<nav class="header_nav">
				<ul>
					<li>
						<a href="#">
							<i class="icon"></i>
							<span>뉴스판</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon"></i>
							<span>쇼핑판</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon"></i>
							<span>경제지표판</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon"></i>
							<span>스포츠판</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon icon_2"></i>
							<span>메일</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon icon_2"></i>
							<span>카페</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon icon_2"></i>
							<span>블로그</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon"></i>
						</a>
					</li>
				</ul>
			</nav>
		</header>

[css]

#header {
	padding: 120px 0 80px;
	background-color: #f4f6f8;
}

#header .search_wrap {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;

	height: 52px;
	background-color: #ffffff;
	border: solid 2px #7de1ab;
	border-radius: 26px;

	margin: 0 20px;
}

#header .search_wrap .link_logo {
	display: block;

	width: 42px;
	height: 42px;
	background-color: #03c75a;

	margin-left: 20px;
}

#header .search_wrap input {
	width: calc(100% - 134px);
	height: 22px;

	font-size: 16px;
    line-height: 22px;

    margin: 0 10px;
}

#header .search_wrap input::placeholder {
	color: #c9ced1;
}

#header .search_wrap .link_voice {
	display: block;
	width: 36px;
	height: 36px;
	background-color: #03c75a;
}

#header .header_nav {
	width: 310px;	
	margin: 0 auto;

	padding-top: 24px;
}

#header .header_nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;

	width: 100%;
}

#header .header_nav ul li {
	width: 25%;

	padding-top: 12px;
}

#header .header_nav ul li a {
	display: block;
	width: 100%;

	text-align: center;
}

#header .header_nav ul li a .icon {
	display: inline-block;

	width: 44px;
	height: 44px;
	background-color: #ffffff;
	border: solid 1px #f4f6f8;
	border-radius: 8px;
}

#header .header_nav ul li a .icon.icon_2 {
	background-color: #0fdd72;
}

#header .header_nav ul li a span {
	display: block;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	font-size: 11px;
	color: #1e1e23;
}

header nav에 적용한 flex-start 3개의 조합

3. Banner 1

[html]

		<div id="banner_1">
			<div class="banner_wrap">
				<img src="https://via.placeholder.com/750x160">
			</div>			
		</div>

[css]

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

#banner_1 .banner_wrap img {
	width: 100%;
}

4. Weather

[html]

		<div id="weather">
			<div class="container">
				
				<div class="weather_top">
					<div class="weather_left">
						<img src="https://via.placeholder.com/30">
						<div class="txt_wrap">
							<h3>24º 대구</h3>
							<p>미세 <span>좋음</span> · 초미세 <span>좋음</span></p>
						</div>
					</div>
					<div class="weather_right">
						<span>내 위치찾기</span>
						<i class="icon"></i>
					</div>
				</div>
				<div class="weather_bottom">
					<p>위치 찾기를 눌러 현 위치의 시간대별·주간날씨와 미세먼지 예보를 여기에서 바로 보세요</p>
				</div>

			</div>
		</div>

[css]

#weather {
	overflow: hidden;
}

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

	margin: 5px 0;
}

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

	padding: 22px 0 16px;
}

#weather .weather_top .weather_left {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

#weather .weather_top .weather_left img {
	width: 30px;
	height: 30px;
	border-radius: 50%;

	margin-right: 15px;
}

#weather .weather_top .weather_left .txt_wrap {

}

#weather .weather_top .weather_left .txt_wrap h3 {
	font-size: 16px;
}

#weather .weather_top .weather_left .txt_wrap p {
	font-size: 14px;
}

#weather .weather_top .weather_left .txt_wrap p span {
	color: #00d01d;
	font-weight: 600;
}

#weather .weather_top .weather_right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;

}

#weather .weather_top .weather_right span {
	font-size: 14px;
	color: grey;

	margin-right: 8px;
}

#weather .weather_top .weather_right .icon {
	display: inline-block;

	width: 20px;
	height: 20px;
	background-color: #60b4f7;
	border-radius: 50%;
}

#weather .weather_bottom {
	padding: 6px 0 30px;
}

#weather .weather_bottom p {
	font-size: 15px;
	font-weight: 400;
	color: #767678;

	line-height: 20px;
	text-align: center;
	letter-spacing: -0.5px;
}

weather의 container에 적용된 margin 병합 현상 방지

  • 부모 영역에 : overflow: hidden;

5. Now

[html]

		<div id="now">				
			<h2>NOW.</h2>

			<ul>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/100x138">
							<p>MBC 극한데뷔 야생돌</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/100x138">
							<p>MBC 극한데뷔 야생돌</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/100x138">
							<p>MBC 극한데뷔 야생돌</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/100x138">
							<p>MBC 극한데뷔 야생돌</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/100x138">
							<p>MBC 극한데뷔 야생돌</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/100x138">
							<p>MBC 극한데뷔 야생돌</p>
						</a>
					</li>
			</ul>

			<div class="btn_wrap">
					<a href="#" class="now">나우 편성표</a>
					<a href="#">쇼핑 편성표</a>
			</div>
		</div>

[css]

#now {
	background-color: #ffffff;

	margin: 5px 0;
	padding-bottom: 16px;
}

#now h2 {
	padding: 20px 0 14px 20px;

	font-size: 18px;
	font-weight: 700;
	color: #ff3308;
}

#now ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;

	padding-left: 20px;

	overflow-x: auto;
}

#now ul li {
	margin-right: 10px;
}

#now ul li:last-child {
	margin-right: 0;
}

#now ul li a {
	display: block;
	width: 100px;
}

#now ul li a img {
	width: 100px;
	height: 138px;
	border-radius: 6px;
}

#now ul li a p {
	padding-top: 10px;
	width: 100px;

	font-size: 14px;
	color: #60b4f7;
}

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

	width: 335px;
	height: 44px;
	background-color: #f5f8fb;
	border-radius: 22px;

	margin: 20px auto 0;
}

#now .btn_wrap a {
	display: block;

	width: 50%;

	font-weight: 400;
    font-size: 14px;
    color: #767678;

    text-align: center;
    line-height: 44px;
}

#now .btn_wrap a.now:after {
	content: "";
	display: block;
	width: 1px;
	height: 14px;
	background-color: #767678;

	margin-top: 15px;
	vertical-align: top;

	float: right;
	/*a 영역의 오른쪽 끝으로 배치*/
}

가로 스크롤 발생시킬 때 좌측의 공백도 같이 스크롤에 포함하고 싶다면 margin보단 padding으로 공백을 생성한다.

profile
류영서
이전 포스트

9월 1일 Velog

다음 포스트

9월 3일 Velog

0개의 댓글

관련 채용 정보