8월 20일 Velog
학습한 내용
Twitch 실습 #2
1. Top nav
[css]
#top_nav {
position: fixed;
width: 100%;
height: 50px;
background-color: #ffffff;
border-bottom: solid 2px #DDDDDE;
box-sizing: initial;
z-index: 99999;
min-width: 1340px;
}min-width: 1340px;: main_container와 동일한 크기의 min-width를 지정하여 브라우저 폭을 줄였을 때 레이어가 틀어지는 것을 방지한다.
2. Main Container
[html]
<div class="main_container">
<div id="left_area"></div>
<div id="content"></div>
</div>[css]
.main_container {
width: 100%;
min-width: 1340px;
/*padding-top: 50px;*/
}-
min-width: 1340px;: 브라우저 폭을 줄였을 때 레이어가 틀어지는 것을 방지한다. -
padding-top: 50px;: 상단 nav 크기만큼의 padding을 주고 배치 작업을 한 후 left area에 top 값을 주면서 주석처리 한다.
3. Left Area
구조
[html]
<div id="left_area">
<div class="channel_wrap"></div>
<div class="join_wrap"></div>
<div class="info_wrap"></div>
</div>[css]
#left_area {
position: fixed;
width: 240px;
background-color: #EFEFF1;
top: 50px;
bottom: 0;
left: 0;
overflow-y: auto;-
position: fixed;: 레이어를 항상 같은 자리에 고정시킨다. -
top: 50px;: 상단 nav의 높이값만큼 위에서부터 띄워서 위치한다. -
bottom: 0;: 브라우저의 높이에 상관없이 영역을 브라우저 끝까지 풀사이즈로 만들기 위한 css, 브라우저 크기에 따라 위치는 변화하지 않고 가변적으로 height 생성한다. -
위의 세 코드는 순수 3차원에서 사용할 수 있다. (fixed, absolute)
-
overflow-y: auto;: 해당 영역에 필요할 시에 세로 방향으로 스크롤을 자동 생성한다. 위치를 차지하기 때문에 레이어가 틀어질 수 있다. -
overflow-y: overlay;:overflow-y: auto;와 역할은 같다. 위치를 차지하지 않고 하위 영역에 덮어씌운다.
(1) channel wrap
[html]
<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="channel_info">
<h4>침착맨 (zilioner)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">1.1만</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="channel_info">
<h4>파카9999 (paka9999)</h4>
<span class="source">League of Legend</span>
</div>
<span class="count">8,180</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="channel_info">
<h4>쫀득이_(pjs9073)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">4,850</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="channel_info">
<h4>다주 (dda_ju)</h4>
<span class="source">LOST ARK</span>
</div>
<span class="count">5,433</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="channel_info">
<h4>녹두로 (nokduro)</h4>
<span class="source">Super Mario Maker 2</span>
</div>
<span class="count">6,643</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="channel_info">
<h4>강소연 (rkdthdus930)</h4>
<span class="source">LOST ARK</span>
</div>
<span class="count">2,385</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="channel_info">
<h4>소풍왔니 (yumyumyu77)</h4>
<span class="source">LOST ARK</span>
</div>
<span class="count">2,473</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="channel_info">
<h4>플러리 (flurry1989)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">957</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="channel_info">
<h4>꽃핀 (cherrypach)</h4>
<span class="source">Art</span>
</div>
<span class="count">5,616</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="channel_info">
<h4>철면수심 (109ace)</h4>
<span class="source">Just Chatting</span>
</div>
<span class="count">1,486</span>
</a>
</li>
</ul>
</div>
</div>[css]
#left_area .channel_wrap .channel_header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
padding-top: 5px;
margin: 10px;
}
.channel_wrap .channel_header h3 {
font-size: 12px;
}
.channel_wrap .channel_header .icon_arrow {
display: inline-block;
width: 20px;
height: 20px;
background-color: #000000;
}
.channel_wrap .channel_body ul li {
height: 42px;
}
.channel_wrap .channel_body ul li a {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
padding: 5px 10px;
}
.channel_wrap .channel_body ul li a:hover {
background-color: #E6E6EA;
}
.channel_wrap .channel_body ul li a img {
width: 30px;
height: 30px;
border-radius: 50%;
}
.channel_wrap .channel_body ul li a .channel_info {
width: 118px;
margin-left: 10px;
}
.channel_wrap .channel_body .channel_info h4 {
font-size: 14px;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.channel_wrap .channel_body .channel_info .source {
display: block;
font-size: 13px;
color: #53535f;
margin-top: -4px;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.channel_wrap .channel_body ul li a .count {
font-size: 13px;
color: #1f1f23;
}
.channel_wrap .channel_body ul li a .count:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #e91916;
margin-right: 5px;
vertical-align: 0.5px;
}
(2) join wrap
[html]
<div class="join_wrap">
<h2><span>Twitch</span> 커뮤니티와 함께하세요!</h2>
<p>어디서나 최고의 생방송을 즐겨보세요.</p>
<button type="button" class="btn_purple">회원가입</button>
</div>[css]
#left_area .join_wrap {
padding: 20px;
background-color: #ffffff;
border-radius: 6px;
border: solid 2px #e6e6e6;
margin: 10px;
}
#left_area .join_wrap h2 {
font-size: 21px;
margin: 10px 0 5px;
}
#left_area .join_wrap h2 span {
color: #772ce8;
}
#left_area .join_wrap p {
font-size: 14px;
margin-bottom: 10px;
}
#left_area .join_wrap .btn_purple {
display: inline-block;
width: 72px;
height: 30px;
border-radius: 4px;
border: none;
font-size: 13px;
font-weight: 600;
text-align: center;
line-height: 30px;
}
(3) info wrap
[html]
<div class="info_wrap">
<p>상호명: Twitch Interactive, Inc.</p>
<p>대표자: Emmett Shear, CEO</p>
<p>주소: 350 Bush Street, 2nd Floor, San Francisco, California 94104, USA</p>
<p>070-8984-5697</p>
<p>호스팅 서비스 제공자: Amazon Web Services, Inc.</p>
<ul>
<li><a href="#">지원팀에 문의</a></li>
<li><a href="#">판매약관</a></li>
<li><a href="#">사업자 정보</a></li>
</ul>
</div>[css]
#left_area .info_wrap {
padding: 10px;
padding-top: 0;
}
.info_wrap p {
font-size: 13px;
color: #53535f;
line-height: 1.5;
margin: 1px 0;
}
.info_wrap ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin-top: 10px;
}
.info_wrap ul li a {
font-size: 13px;
color: #53535f;
}
.info_wrap ul li a:after {
content: "";
display: inline-block;
width: 1px;
height: 15px;
background-color: #53535f;
margin: 0 5px;
vertical-align: -3px;
}
.info_wrap ul li:last-child a:after {
content: none;
}
추가로 학습한 내용
- span 영역의 상단 공백 제거
-> 기본 레이아웃
-> 트위치 사이트의 레이아웃
channel wrap 부분을 디자인할 때 h4와 span 태그 사이의 공백이 자동으로 생성되는 것이 불편했다. 분명 css 상으로 공백이 생성된 것은 아니여서 공백을 제거하는 방법을 찾지 못했다. 실제 트위치 사이트에선 딱 붙어있었기 때문에 해결 방법을 찾아 나선 결과
.channel_wrap .channel_body .channel_info .source {
display: block;
margin-top: -4px;
}우선 block 요소로 바꿔주면 기본 공백보다는 공백이 줄어드나 확실히 딱 붙어 있지는 않았다.
공백 자체를 제거하는 방법은 없는 것 같았고 대신 margin-top을 음수로 주면 위치가 이동되면서 h4 태그와 딱 붙게 만들 수 있었다!
Author And Source
이 문제에 관하여(8월 20일 Velog), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ryuyoungseo8232/820Velog저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
