9月2日Verlog
58967 ワード
学習の内容
https://m.naver.com/
[html]
必ずheadでmetaラベルを使用してviewportを追加します.
:
:高さ=アプライアンスの高さの100%(スクロールを含む)
[html]main nav上` #main navule
[html]
[html]
[html]親領域:
[html]
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タグテキストは改行を無効にしました
overflow: hidden;
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;
}
ヘッダー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を使用して空白を生成します。
Reference
この問題について(9月2日Verlog), 我々は、より多くの情報をここで見つけました https://velog.io/@ryuyoungseo8232/92Velogテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol