[dg_ai_school] 웹프로그래밍 39
학습내용
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">43</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 class="channel-wrap">
<div class="channel-header">
<h3>추천 채널</h3>
<i class="icon-arrow"></i>
</div>
<div class="channel-body">
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>풍월량(hanryang1125)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">6.7K</span>
</a>
</li>
</ul>
</div>
</div>
<div class="join-wrap">
<div class="txt-wrap">
<h2><span class="font-purple">Twitch</span> 커뮤니티와 함께하세요!</h2>
<p>어디서나 최고의 생방송을 즐겨보세요.</p>
<button type="button" class="btn-purple">회원가입</button>
</div>
</div>
<div class="info-wrap">
<p>상표명: Sed porttitor lectus nibh. </p>
<p>대표자: Abcde Fghij, KLMN</p>
<p>주소: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</p>
<p>123-4567-890</p>
<p>호스팅 제공업체: Quisque velit nisi</p>
<ul>
<li><a href="#">지원팀에 문의</a></li>
<li><a href="#">판매 약관</a></li>
<li><a href="#">사업자 정보</a></li>
</ul>
</div>
</div>
<div class="content">
<div id="content-banner">
<div class="layer">
<div class="txt-wrap">
<h2>Hello</h2>
<p>Nice to meet you</p>
</div>
</div>
</div>
<div class="content-container">
<div class="video-section">
<div class="title-wrap">
<h2>취향 저격 생방송 채널</h2>
</div>
<div class="video-wrap">
<ul>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">3.6M 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
<p class="source">LPL</p>
<p class="game">League of Legends</p>
<div class="tag-wrap">
<span class="tag">e-sports</span>
<span class="tag">english</span>
<span class="tag">MOBA</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">3.6M 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
<p class="source">LPL</p>
<p class="game">League of Legends</p>
<div class="tag-wrap">
<span class="tag">e-sports</span>
<span class="tag">english</span>
<span class="tag">MOBA</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub"><img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">3.6M 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>WE VS. RA - Playoffs Match 6 Round 3 | LPL Summer Split(2021)(LPL)</h3>
<p class="source">LPL</p>
<p class="game">League of Legends</p>
<div class="tag-wrap">
<span class="tag">e-sports</span>
<span class="tag">english</span>
<span class="tag">MOBA</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
</div>
</a>
</li>
</ul>
</div>
<button type="button" class="btn-more">더보기</button>
</div>
<div class="category-section">
<div class="title-wrap">
<h2>취향 저격 <span class="font-purple">카테고리</span></h2>
</div>
<div class="category-wrap">
<ul>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/146x195">
</div>
<div class="txt-wrap">
<h3>Just Chatting</h3>
<p class="count">311k 시청자</p>
<div class="tag-wrap">
<span class="tag">IRL</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/146x195">
</div>
<div class="txt-wrap">
<h3>Just Chatting</h3>
<p class="count">311k 시청자</p>
<div class="tag-wrap">
<span class="tag">IRL</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/146x195">
</div>
<div class="txt-wrap">
<h3>Just Chatting</h3>
<p class="count">311k 시청자</p>
<div class="tag-wrap">
<span class="tag">IRL</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/146x195">
</div>
<div class="txt-wrap">
<h3>Just Chatting</h3>
<p class="count">311k 시청자</p>
<div class="tag-wrap">
<span class="tag">IRL</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/146x195">
</div>
<div class="txt-wrap">
<h3>Just Chatting</h3>
<p class="count">311k 시청자</p>
<div class="tag-wrap">
<span class="tag">IRL</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/146x195">
</div>
<div class="txt-wrap">
<h3>Just Chatting</h3>
<p class="count">311k 시청자</p>
<div class="tag-wrap">
<span class="tag">IRL</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="video-section">
<div class="title-wrap">
<h2>추천 <span class="font-purple">Just Chatting</span> 채널</h2>
</div>
<div class="video-wrap">
<ul>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">1.1K 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>⚡복닝와이드⚡</h3>
<p class="source">개복어</p>
<div class="tag-wrap">
<span class="tag">한국어</span>
<span class="tag">첫 번째 플레이 스루</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">1.1K 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>⚡복닝와이드⚡</h3>
<p class="source">개복어</p>
<div class="tag-wrap">
<span class="tag">한국어</span>
<span class="tag">첫 번째 플레이 스루</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">1.1K 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>⚡복닝와이드⚡</h3>
<p class="source">개복어</p>
<div class="tag-wrap">
<span class="tag">한국어</span>
<span class="tag">첫 번째 플레이 스루</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<button type="button" class="btn-more">더보기</button>
</div>
<div class="video-section">
<div class="title-wrap">
<h2>모두의 후원 열차에 탑승해 주세요!</h2>
</div>
<div class="video-wrap">
<ul>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">19.9K 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>
LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
</h3>
<p class="source">xQcOW</p>
<p class="game">Hivemind Gameshow</p>
<div class="tag-wrap">
<span class="tag">영어</span>
<span class="tag">일본 만화 영화</span>
<span class="tag">후원 열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">19.9K 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>
LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
</h3>
<p class="source">xQcOW</p>
<p class="game">Hivemind Gameshow</p>
<div class="tag-wrap">
<span class="tag">영어</span>
<span class="tag">일본 만화 영화</span>
<span class="tag">후원 열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">19.9K 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>
LAST RANK IN EVERY GAME GAMING NEWB TRIES TO GET BETTER...I GUESS. JEBAITED, RANK1 WARLORD CLAIMS ALL PRIZES AND AWARDS IN ALL GAMES (REAL)
</h3>
<p class="source">xQcOW</p>
<p class="game">Hivemind Gameshow</p>
<div class="tag-wrap">
<span class="tag">영어</span>
<span class="tag">일본 만화 영화</span>
<span class="tag">후원 열차</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<button type="button" class="btn-more">더보기</button>
</div>
<div class="video-section">
<div class="title-wrap">
<h2>추천 <span class="font-purple">League of Legends</span> 채널</h2>
</div>
<div class="video-wrap">
<ul>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">911명의 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>챌린저달리기 40일의 용사</h3>
<p class="source">울부짖는마오카이1 (wahahaha830)</p>
<div class="tag-wrap">
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">911명의 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>챌린저달리기 40일의 용사</h3>
<p class="source">울부짖는마오카이1 (wahahaha830)</p>
<div class="tag-wrap">
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">911명의 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>챌린저달리기 40일의 용사</h3>
<p class="source">울부짖는마오카이1 (wahahaha830)</p>
<div class="tag-wrap">
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<button type="button" class="btn-more">더보기</button>
</div>
<div class="video-section">
<div class="title-wrap">
<h2>추천 <span class="font-purple">LOST ARK</span> 채널</h2>
</div>
<div class="video-wrap">
<ul>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">1.2K 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>넹북이 악세 맞춰주기</h3>
<p class="source">성대 (dakchyo)</p>
<div class="tag-wrap">
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">1.2K 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>넹북이 악세 맞춰주기</h3>
<p class="source">성대 (dakchyo)</p>
<div class="tag-wrap">
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<div class="image-wrap-sub">
<img src="https://via.placeholder.com/326x183">
<span class="mark">생방송</span>
<span class="count">1.2K 시청자</span>
</div>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>넹북이 악세 맞춰주기</h3>
<p class="source">성대 (dakchyo)</p>
<div class="tag-wrap">
<span class="tag">한국어</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<button type="button" class="btn-more">더보기</button>
</div>
<footer>
<div class="txt-wrap">
<p>상표명 : Sed porttitor lectus nibh.</p>
<p>대표자: Abcde Fghij, KLMN</p>
<p>주소: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
<p>123-4567-890</p>
<p>호스팅 제공업체: Quisque velit nisi</p>
</div>
<div class="footer-bottom">
<ul>
<li><a href="#">지원팀에 문의</a></li>
<li><a href="#">판매 약관</a></li>
<li><a href="#">사업자 정보</a></li>
</ul>
</div>
</footer>
</div>
</div>
</div>
</body>
</html>CSS
/* Default */
* {
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: top;
}
input {
outline: none;
border: none;
}
button {
outline: none;
border: none;
background-color: transparent;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
input,
button,
a {
color: #fff;
}
.btn-purple {
background-color: #9147ff;
color: #fff;
}
.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;
justify-content: flex-start;
align-items: center;
}
.flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.main-container {
width: 100%;
min-width: 1340px; /* 특정 지점에서 더이상 줄어들지 않게 하기 위함 */
/* padding-top: 50px; */
}
/* Top Nav */
#top-nav {
/* fixed를 적용하면 크기가 제대로 잡히지 않기 때문에 width 값이 필요하다. */
position: fixed;
width: 100%;
height: 50%;
background-color: #0e0e10;
padding: 0 15px;
min-width: 1340px;
}
/* Nav Left */
#top-nav .nav-wrap .nav-left .log a img {
width: 24px;
height: 28px;
}
#top-nav .nav-wrap .nav-left ul li {
height: 50px;
font-size: 20px;
padding: 0 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 {
position: relative;
top: 8px;
content: '';
display: inline-block;
width: 1px;
height: 30px;
background-color: gray;
margin-left: 20px;
}
#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 span {
display: block;
height: 50px;
font-size: 20px;
line-height: 50px;
padding-left: 20px;
}
/* Nav Center */
#top-nav .nav-center {
/* 중앙에 위치하려면 flex의 영향을 받지 않게 해야 한다. */
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#top-nav .nav-center .search-wrap {
width: 380px;
height: 36px;
background-color: yellow;
overflow: hidden;
border-radius: 5px;
}
#top-nav .nav-center .search-wrap input {
width: calc(100% - 34px);
height: 100%;
background-color: gray;
}
#top-nav .nav-center .search-wrap .btn-search {
width: 34px;
height: 100%;
background-color: darkgray;
}
/* Nav Right */
#top-nav .nav-right .mark-wrap {
position: relative;
}
#top-nav .nav-right .mark-wrap .icon-mark {
display: block;
width: 20px;
height: 20px;
background-color: yellow;
cursor: pointer;
}
#top-nav .nav-right .mark-wrap .alarm {
position: absolute;
border-radius: 15px;
background-color: red;
color: #fff;
font-size: 14px;
padding: 4px 8px 4px;
top: -12px;
right: -20px;
}
#top-nav .nav-right .btn-login {
width: 53px;
height: 30px;
background-color: gray;
border-radius: 5px;
text-align: center;
line-height: 30px;
margin-left: 20px;
font-size: 12px;
}
#top-nav .nav-right .btn-purple {
width: 53px;
height: 30px;
border-radius: 5px;
margin-left: 10px;
line-height: 30px;
text-align: center;
font-size: 12px;
}
#top-nav .nav-right .btn-profile {
cursor: pointer;
width: 20px;
height: 20px;
background-color: #fff;
margin-left: 10px;
}
/* Left Area */
.left-area {
position: fixed;
width: 240px;
background-color: #202024;
top: 50px; /* top nav 높이만큼 내림 */
bottom: 0; /* height 100% */
left: 0;
overflow-y: auto; /* 스크롤 */
}
.left-area .channel-wrap .channel-header {
padding: 10px;
}
.left-area .channel-wrap .channel-header h3 {
font-size: 15px;
}
.left-area .channel-wrap .channel-header .icon-arrow {
display: inline-block;
width: 30px;
height: 30px;
background-color: #fff;
}
.left-area .channel-wrap .channel-body {
}
.left-area .channel-wrap .channel-body ul {
}
.left-area .channel-wrap .channel-body li {
}
.left-area .channel-wrap .channel-body a {
display: flex;
flex-wrap: wrap;
padding: 5px 10px;
align-items: flex-start;
}
.left-area .channel-wrap .channel-body img {
width: 30px;
height: 30px;
border-radius: 50%;
}
.left-area .channel-wrap .channel-body .txt-wrap {
width: 110px;
margin-left: 10px;
}
.left-area .channel-wrap .channel-body .txt-wrap h4 {
font-size: 13px;
}
.left-area .channel-wrap .channel-body .txt-wrap .source {
font-size: 12px;
color: gray;
}
.left-area .channel-wrap .channel-body .count {
display: block;
width: 50px;
font-size: 12px;
}
.left-area .channel-wrap .channel-body .count::before {
position: relative;
content: '';
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
margin-right: 5px;
top: 1px;
}
/* Join Wrap */
.left-area .join-wrap {
margin: 10px;
}
.left-area .join-wrap .txt-wrap {
padding: 20px;
background-color: #18181a;
}
.left-area .join-wrap .txt-wrap .h2 {
font-size: 24px;
}
.left-area .join-wrap .txt-wrap h2 span {
}
.left-area .join-wrap .txt-wrap p {
margin-top: 10px;
font-size: 13px;
}
.left-area .join-wrap .txt-wrap .btn-purple {
margin-top: 10px;
width: 53px;
height: 30px;
border-radius: 5px;
line-height: 30px;
text-align: center;
font-size: 12px;
}
.left-area .info-wrap {
font-size: 12px;
margin: 0 10px 10px 10px;
}
.left-area .info-wrap p {
color: gray;
}
.left-area .info-wrap ul {
margin-top: 10px;
}
.left-area .info-wrap li {
}
.left-area .info-wrap li a {
color: gray;
}
.left-area .info-wrap li a::after {
content: '';
display: inline-block;
width: 2px;
height: 10px;
background-color: gray;
margin: 0 5px;
}
.left-area .info-wrap li:last-child a::after {
content: none;
}어려운점
- 신기술이 적용되었다는 점에서 어떻게 적용시키는지 몰라서 아쉬움
해결방법
- 홀로 몇 가지를 찾아봄(자세히 알 수는 없는 것 같음)
학습소감
- 트위치 홈페이지가 네이버 페이지보다 더 흥미로운 것 같음.
Author And Source
이 문제에 관하여([dg_ai_school] 웹프로그래밍 39), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@chaehwan_lee/dgaischool-web-39
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- 홀로 몇 가지를 찾아봄(자세히 알 수는 없는 것 같음)
학습소감
- 트위치 홈페이지가 네이버 페이지보다 더 흥미로운 것 같음.
Author And Source
이 문제에 관하여([dg_ai_school] 웹프로그래밍 39), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@chaehwan_lee/dgaischool-web-39
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여([dg_ai_school] 웹프로그래밍 39), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chaehwan_lee/dgaischool-web-39저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
