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