CHAPTER 5. CSS 박스모델과응용
박스모델 HTML 요소들을박스 ( 사각형 ) 형태로그리는것 박스는배치, 색상, 경계등의속성을가진다.
박스모델의속성
배경색과배경이미지 HTML 요소에배경색과배경이미지가설정되어있는경우에, 패딩은투명하므로배경이미지와배경색이보이게된다 ( 그림출처 : Jon Hicks)
경계선스타일 <!DOCTYPE html> <p style="border-style: none">none.</p> <p style="border-style: dotted">dotted</p> <p style="border-style: dashed">dashed</p> <p style="border-style: solid">solid</p> <p style="border-style: double">double</p> <p style="border-style: groove">groove</p> <p style="border-style: ridge">ridge</p> <p style="border-style: inset">inset</p> <p style="border-style: outset">outset</p>
경계선의폭... p.thick { border-style: solid; border-width: thick; p.medium { border-style: solid; border-width: medium; p.thin { border-style: solid; border-width: 1px; <p class="thick"> 경계선이 thick으로설정되었음 </p> <p class="medium"> 경계선이 medium으로설정되었음 </p> <p class="thin"> 경계선이 1px으로설정되었음 </p>
경계선의색상 <!DOCTYPE html> p.green { border-style: solid; border-color: green; <p class="green"> 경계선의색상 : green</p>
동근경계선 <!DOCTYPE html> div { border: 2px solid red; border-radius: 25px; <div>border-radius 속성을사용하면둥근경계선을만들수있습니다. </div>
경계선그림자 <!DOCTYPE html> div { width: 300px; height: 50px; background-color: green; box-shadow: 20px 10px 5px #666666; <div></div>
경계선이미지 border-image 속성을사용하면이미지로경계선을만들수있다. 경계선을만드는이미지는 9 구역으로나누어있다.
경계선이미지 <!DOCTYPE html> div { border: 30px solid transparent; width: 300px; height: 50px; -webkit-border-image: url(border.png) 30 30 round; /* Safari 5+ */ -o-border-image: url(border.png) 30 30 round; /* Opera */ border-image: url(border.png) 30 30 round; /* Chrome */ <div> 경계이미지가반복되면서그려진다. </div>
요소크기설정 <!DOCTYPE html> #target1 { width: 100px; height: 50px; background-color: yellow; #target2 { width: 100px; height: 50px; background-color: lightgreen; <p id="target1"> 이것은 p 요소입니다. </p> <div id="target2"> 이것은 div 요소입니다.</div>
마진과패딩설정하기 값 설명 auto 브라우저가마진을계산한다. length 마진을 px, pt, cm 단위로지정할수있다. 디폴트는 0px이다. % 마진을요소폭의퍼센트로지정한다. inherit 마진이부모요소로부터상속된다.
마진과패딩예제... body { margin: 0px; padding: 0px; p { margin: 0px; padding: 0px; background-color: yellow; border: 1px solid red; #target { margin: 10px; padding: 20px; background-color: lightgreen; border: 1px solid red; <p>margin: 0px, padding: 0px 인단락입니다.</p> <p id="target">margin: 10px, padding: 20px 인단락입니다.</p>
박스의크기계산
예제 <!DOCTYPE html> div.test { background-color: yellow; width: 200px; padding: 10px; border: 5px solid red; margin: 20px; <div class="test"> 이것은 div 요소로서전체폭은 270 픽셀이다.</div>
<!DOCTYPE html> p, em, strong, div { border: dotted 3px red; <p style="text-align: center"> <em>my Text </em> </p> 수평정렬 ( 인라인요소 )
수평정렬 ( 블록요소 ) <!DOCTYPE html> p, h1 { border: dotted 3px red; <p style="margin-left: auto; margin-right: auto; width: 50%"> My Text </p>
배경설정하기 속성 설명 background 한줄에서모든배경속성을정의한다. background-attachment 배경이미지가고정되어있는지스크롤되는지를지정한다. background-color 배경색을정의한다. background-image 배경이미지를정의한다. background-position 배경이미지의시작위치를지정한다. background-repeat 배경이미지의반복여부를지정한다. body { background-color: red; /* 배경을빨간색으로설정한다 */ body { background-color: rgb(255,0,0); /* 배경을빨간색으로설정한다 */ body { background-color: #ff0000; /* 배경을빨간색으로설정한다 */
배경이미지설정 <!DOCTYPE html> body { background-image: url('back1.jpg') <h1> 삶이그대를속일지라도 </h1> <p> 삶이그대를속일지라도슬퍼하거나노하지말아라.... 지나가버린것그리움이되리니. </p>
고정된배경이미지 <!DOCTYPE html> body { background-image: url('back1.jpg'); background-repeat: no-repeat; background-attachment: fixed; <p> 이미지는한번만표시되고위치가고정되어있다.</p>
<!DOCTYPE html> div { width: 500px; height: 100px; background: url(back.jpg); background-repeat: no-repeat; background-size: 100px 100px; <div> 지금그사람의이름은잊었지만그의눈동자입술은내가슴에있네... 내가슴에있네 </div> 배경이미지크기
링크스타일 a:link - 방문되지않은링크의스타일 a:visited - 방문된링크의스타일 a:hover - 마우스가위에있을때의스타일 a:active - 마우스로클릭되는때의스타일
링크예제 <!DOCTYPE html> a:link { color: red; a:visited { color:green; a:hover { color:blue; a:active { color:yellow; <p><a href="" target="_blank"> 여기가링크입니다.</a> </p>
링크예제 <!DOCTYPE html> a.style1:link { color: #ff0000; a.style1:visited { color: #0000ff; a.style1:hover { font-size: 150%; a.style2:link { color: #ff0000; a.style2:visited { color: #0000ff; a.style2:hover { background: #66ff66; <p> 마우스를올려놓으면스타일이변경됩니다.</p> <p><a class="style1" href="index.html" target="_blank"> 폰트크기를변경하는링크 </a></p> <p><a class="style2" href="index.html" target="_blank"> 배경색을변경하는링크 </a></p>
리스트스타일 속성 설명 list-style 리스트에대한속성을한줄로설정한다. list-style-image 리스트항목마커를이미지로지정한다. list-style-position 리스트마커의위치를안쪽인지바깥쪽인지를지정한다. list-style-type 리스트마커의타입을지정한다.
링크예제 <!DOCTYPE html> ul.a { list-style-type: circle; ul.b { list-style-type: disc; ul.c { list-style-type: square; <ul class="a"> <li>html5</li> <li>css3</li> <li>javascript</li> </ul> <ul class="b"> <li>html5</li> <li>css3</li> <li>javascript</li> </ul> <ul class="c"> <li>html5</li> <li>css3</li> <li>javascript</li> </ul>
수평리스트예제 <!DOCTYPE html> ul { list-style:none; text-align:center; border-top:1px solid red; border-bottom:1px solid red; padding:10px 0; ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; ul li a { text-decoration:none; color:black; ul li a:hover { text-decoration:underline;
<ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> 수평리스트예제
테이블스타일 속성 border border-collapse wdith height border-spacing empty-cells table-align 설명테이블의경계선이웃한셀의경계선을합칠것인지여부테이블의가로길이테이블의세로길이테이블셀사이의거리공백셀을그릴것인지여부테이블셀의정렬설정
<!DOCTYPE html> table, td, th { border: 1px solid blue; <table> <tr> <th> 이름 </th> <th> 이메일 </th> </tr> <tr> <td> 김철수 </td> <td>chul@google.com</td> </tr> <tr> <td> 김영희 </td> <td>young@google.com</td> </tr> </table> 테이블의경계
경계통합 collapse : 이웃하는셀의경계선을합쳐서단일선으로표시한다. separate : 이웃하는셀의경계선을합치지않고분리하여표시한다. <!DOCTYPE html> table { border-collapse: collapse; table, th, td { border: 1px solid blue;...
<!DOCTYPE html> td, th { color: white; background-color: green; <table> <tr> <th> 이름 </th> <th> 이메일 </th> </tr> <tr> <td> 김철수 </td> <td>chul@google.com</td> </tr> <tr> <td> 김영희 </td> <td>young@google.com</td> </tr> </table> 테이블배경색
<!DOCTYPE html> table, td, th { border: 1px solid green; th { background-color: green; color: white;... 헤더와데이터의분리
테이블텍스트정렬 <!DOCTYPE html> table, td, th { border: 1px solid blue; table { width: 100%; td { text-align: center; <table> <tr> <th> 이름 </th> <th> 이메일 </th> </tr> <tr> <td> 김철수 </td> <td>chul@google.com</td> </tr> <tr> <td> 김영희 </td> <td>young@google.com</td> </tr> </table>
<!DOCTYPE html> caption { caption-side:bottom; <table border="1"> <caption>vip 고객리스트 </caption> <tr> <th> 이름 </th> <th> 이메일 </th> </tr> <tr> <td> 김철수 </td> <td>chul@google.com</td> </tr> <tr> <td> 김영희 </td> <td>young@google.com</td> </tr> </table> 테이블캡션
짝수행과홀수행다르게하기 <!DOCTYPE html> #list { font-family: "Trebuchet MS",sans-serif; width: 100%; #list td, #list th { border: 1px dotted gray; text-align: center; #list th { color: white; background-color: blue; #list tr.alt td { background-color: yellow;
짝수행과홀수행다르게하기 <table id="list"> <tr> <th> 이름 </th> <th> 이메일 </th> </tr> <tr> <td> 김철수 </td> <td>chul@google.com</td> </tr> <tr class="alt"> <td> 김영희 </td> <td>young@google.com</td> </tr> <tr> <td> 홍길동 </td> <td>hong@google.com</td> </tr> <tr class="alt"> <td> 김수진 </td> <td>sujin@google.com</td> </tr> </table>