학습내용
- 트위치
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>트위치</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav id="top-nav">
<div class="nav-wrap">
<div class="nav-left">
<h1 class="logo">
<a href="#">
<img src="https://via.placeholder.com/24x28">
</a>
</h1>
<ul>
<li><a href="#">탐색</a></li>
<li><a href="#">e스포츠</a></li>
<li><a href="#">음악</a></li>
</ul>
<div class="more">
<a href="#">더보기</a>
</div>
</div>
<div class="nav-center">
<div class="search-wrap">
<input type="text" placeholder="검색">
<button class="btn-search"></button>
</div>
</div>
<div class="nav-right">
<div class="mark-wrap">
<i class="icon-mark"></i>
<span class="alarm">44</span>
</div>
<a href="#" class="btn-login">로그인</a>
<a href="#" class="btn-purple">회원가입</a>
<button class="btn-profile"></button>
</div>
</div>
</nav>
<div class="main-container">
<div class="left-area">
</div>
<div class="content">
</div>
</div>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #0e0e10;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
.clearfix {
clear: both;
}
button {
border: none;
outline: none;
background-color: transparent;
cursor: pointer;
}
input, textarea {
outline: none;
border: none;
}
h1, h2, h3, h4, h5, h6, p, span, input, button, a {
color: #ffffff;
}
.btn-purple {
background-color: #9147ff;
color: #ffffff;
}
.font-purple {
color: #9147ff;
}
.flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.flex-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
/* 상단 네비 영역 */
#top-nav {
position: fixed;
width: 100%;
min-width: 1340px;
height: 50px;
background-color: #0e0e10;
padding: 0 15px;
z-index: 999;
}
#top-nav .nav-wrap .nav-left .logo a img {
width: 24px;
height: 28px;
}
#top-nav .nav-wrap .nav-left ul li {
height: 50px;
padding: 0 20px;
font-size: 20px;
}
#top-nav .nav-wrap .nav-left ul li:first-child {
padding-right: 0;
}
#top-nav .nav-wrap .nav-left ul li:first-child a::after {
display: inline-block;
position: relative;
content: "";
width: 1px;
height: 30px;
background-color: gray;
margin-left: 20px;
top: 8px;
}
#top-nav .nav-wrap .nav-left ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 50px;
}
#top-nav .nav-wrap .nav-left .more a {
display: block;
height: 50px;
padding-left: 20px;
line-height: 50px;
font-size: 20px;
}
#top-nav .nav-wrap .nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#top-nav .nav-wrap .nav-center .search-wrap {
overflow: hidden;
width: 380px;
height: 36px;
border-radius: 5px;
background-color: gray;
}
#top-nav .nav-wrap .nav-center .search-wrap input {
width: calc(100% - 34px);
height: 100%;
background-color: darkgrey;
padding: 5px 10px;
}
#top-nav .nav-wrap .nav-center .search-wrap .btn-search {
width: 34px;
height: 100%;
background: url(../../naver-ex/img/search-white.png) no-repeat;
background-size: 24px;
background-position: 5px;
}
#top-nav .nav-wrap .nav-right .mark-wrap {
position: relative;
}
#top-nav .nav-wrap .nav-right .mark-wrap .icon-mark {
display: block;
width: 20px;
height: 20px;
background-color: greenyellow;
}
#top-nav .nav-wrap .nav-right .mark-wrap .alarm {
position: absolute;
border-radius: 15px;
background-color: red;
padding: 2px 5px;
color: #ffffff;
font-size: 14px;
top: -12px;
right: -12px;
}
#top-nav .nav-wrap .nav-right .btn {
width: 60px;
height: 30px;
border-radius: 5px;
text-align: center;
line-height: 30px;
font-size: 12px;
}
#top-nav .nav-wrap .nav-right .btn-login {
margin-left: 20px;
background-color: gray;
color: #ffffff;
}
#top-nav .nav-wrap .nav-right .btn-purple {
margin-left: 10px;
}
#top-nav .nav-wrap .nav-right .btn-profile {
width: 20px;
height: 20px;
background-color: #fff;
margin-left: 10px;
}어려운점
- 반응형이 어렵다고 함. 그리고 최신기술이 적용된 홈페이지라 네이버 보다 더 어렵다고 말한 것대로 실제로 적용을 하는데 어렵게 느껴짐.
해결방법
- 복습과 트위치 홈페이지를 뜯어봄.
학습소감
- 개인적으로 길이만 긴 네이버 페이지보다 훨씬 흥미롭게 뜯어보았음. 여전히 혼자서 짜보라고 하면 버겁지만 그래도 이전보다 익숙해짐.
Please be wonderful but don't be so serious, enjoy this journey with the good people!