2017. 2. 25. 18:56ㆍWork/CSS
웹 페이지 레이아웃
- 본문 구성
#main_section > article.main_article{
margin-bottom: 10px; padding: 20px;
border: 1px solid black;
}
<section id="main_section">
<article class="main_article">
<h1>Main Section</h1>
</article>
</section>
- 사이드 탭바 구성
/* 첫번째 탭*/
input:nth-of-type(1) {display: none;} // input 태그는 보이지 않게 만든다.
input:nth-of-type(1) ~ div:nth-of-type(1){display: none;} // input 태그가 체크되어 있을 경우에는 뒤에 위치하는 div 태그를 보이게 만듭니다.
input:nth-of-type(1):checked ~ div:nth-of-type(1){display: block;} // input 태그가 체크되어 있지 않을 경우에는 뒤에 위치하는 div 태그를 보이지 않게 만듭니다.
/* 두번째 탭*/
input:nth-of-type(2) {display: none;}
input:nth-of-type(2) ~ div:nth-of-type(2){display: none;}
input:nth-of-type(2):checked ~ div:nth-of-type(2){display: block;}
/* 탭 모양 구성*/
section.buttons{ overflow: hidden;}
section.buttons > label {
/* 수평정렬*/
display: block; float: left;
/* 크기 및 글자 위치 지정*/
width: 100px; height: 30px;
line-height: 30px;
text-align: center;
/* 테두리 지정*/
box-sizing: border-box;
border: 1px solid black;
/* 색상 지정*/
background: cyan;
color:#000aff;
}
/* 선택시 색 변경*/
input:nth-of-type(1):checked ~ section.buttons > label:nth-of-type(1){
background: white;
color:black;
}
input:nth-of-type(2):checked ~ section.buttons > label:nth-of-type(2){
background: white;
color:black;
}
<input id="first" type="radio" name="tab" checked="checked"/>
<input id="second" type="radio" name="tab"/>
<section class="buttons">
<label for="first">First</label>
<label for="second">Second</label>
</section>
<div class="tab_item">
<ul>
<li><a href="#">HTML5 Canvas</a></li>
<li><a href="#">HTML5 Audio</a></li>
<li><a href="#">HTML5 Video</a></li>
<li><a href="#">HTML5 Semantic Web</a></li>
</ul>
</div>
<div class="tab_item">
<ul>
<li><a href="#">CSS3 Transition</a></li>
<li><a href="#">CSS3 Animation</a></li>
<li><a href="#">CSS3 Border</a></li>
<li><a href="#">CSS3 Box</a></li>
</ul>
</div>
- 목록 구성
.item{
overflow: hidden;
padding: 10px;
border: 1px solid black;
border-top: none;
}
.thumbnail {
float: left;
}
.description{
float: left;
margin-left: 10px;
}
.description > strong{
display: block;
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="tab_item">
<ul>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45"/>
</div>
<div class="description">
<strong>HTML5 Canvas</strong>
<p>2017-02-25</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45"/>
</div>
<div class="description">
<strong>HTML5 Audio</strong>
<p>2017-02-25</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45"/>
</div>
<div class="description">
<strong>HTML5 Video</strong>
<p>2017-02-25</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45"/>
</div>
<div class="description">
<strong>HTML5 Semantic Over String</strong>
<p>2017-02-25</p>
</div>
</a></li>
</ul>
</div>
- 푸터 구성
#main_footer{
/* 중앙 정렬*/
width: 960px; margin: 0 auto;
margin-bottom: 10px;
/* 테두리*/
box-sizing: border-box;
padding: 10px;
border: 1px solid black;
/* 글자 정렬*/
text-align: center;
}
<footer id="main_footer">
<h3>HTML5 + CSS3 Basic</h3>
<address>Website Layout Basic</address>
</footer>
- 정리
1. 레이아웃을 행 단위로 생각
2. 초기화 코드 작성
3. width 속성과 margin 속성을 사용한 중앙 정렬
4. overflow 속성과 float 속성을 사용해서 레이아웃 나누는 방법