2017. 2. 27. 17:46ㆍWork/CSS
모바일 웹 페이지
- wrap 태그
<div id="wrap"></div>
-> body 태그에 스타일을 적용하는 것이 위험할 지도 모른다는 개발자 혹은, 서버와 관련된 내용 중 레이아웃 페이지 또는 마스터 페이지를 사용할 때 코드 정리하고자 사용, 스마트폰 웹 브라우저는 ~ 선택자를 사용할 수 없기 때문에 #wrap 태그 만들고 선택자 사용
- 스프라이트 이미지
http://csssprites.com/ CSS의 Sprites 제작 사이트
#main_header > a.left{
background: url('sprites.png');
background-position: 0px 0px;
text-indent: -99999px;
width: 62px;
left: 5px; top: 7px;
}
-> 이미지를 1개의 파일에 뭉쳐놓으면서 웹 페이지 요청 시간을 줄이고 쉽게 관리할 수 있습니다.
- 토글 목록 구성
#toggle_gnb > ul {overflow: hidden;}
#toggle_gnb > ul > li {
width: 60px; float: left;
}
<div id="toggle_gnb_wrap">
<div id="toggle_gnb">
<ul>
<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>
<li><a href="#">버튼</a></li>
</ul>
</div>
</div>
- 네비게이션(1)
1. overflow 속성과 float 속성 사용
#top_gnb{
overflow: hidden;
border-bottom: 1px solid black;
background: #B42111;
}
#top_gnb > div > a{
/* 수평 정렬*/
float: left;
width: 25%;
/* 크기 및 색상, 정렬*/
height: 35px;
line-height: 35px;
text-align: center;
color: white;
}
2. display 속성에 table 키워드 적용
#bottom_gnb{
/* table 태그와 같은 레이아웃을 갖습니다.*/
display: table;
width: 100%;
border-bottom: 1px solid black;
}
#bottom_gnb > div{
/* td 태그와 같은 레이아웃을 갖습니다.*/
display: table-cell;
position: relative;
}
#bottom_gnb > div > a{
display: block;
height: 35px;
line-height: 35px;
text-align: center;
}
#bottom_gnb > div > a::before{
display: block;
position: absolute;
top: 9px; left: -1px;
width: 1px; height: 15px;
border-left: 1px solid black;
content: '';
}
-- ::before 선택자를 사용한 수직선 생성
3. table 태그 사용
/* table 태그와 같은 레이아웃을 갖습니다.*/
display: table;
/* td 태그와 같은 레이아웃을 갖습니다.*/
display: table-cell;
- 목록 개수와 너비 비율의 관계
-- 2개 : 50%
-- 3개 : 33.33%
-- 4개 : 25%;
-- 5개 : 20%
-- 6개 : 16.66%
-> 100 / 계수 = %
- 본문 구성
#section_header {padding: 20px;}
#section_article{padding: 10px;}
- 푸터 구성
#main_footer{
padding: 10px;
border-top: 3px solid black;
text-align: center;
}