9月2日Verlog

58967 ワード

学習の内容

Naver Mobile実習


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

    navのulタグテキストは改行を無効にしました

  • main nav上`overflow: hidden;
  • #main navuleoverflow-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;
    }

    ヘッダー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コンテナにマージしない

  • 親領域: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を使用して空白を生成します。