학습목표 학습목차 박스 모델에 대한 개념을 이해할 수 있습니다. Padding, Margin, Border Property의 개념과 사용법을 이해할 수 있습니다. Shorthand Property의 유용성을 이해할 수 있습니다. 여러 예제를 통해 박스의 개념을 학습합니다. 학습목차 박스의 규격 Padding Property, Margin Property Border Property Border-color, Border-Style, Border-size Shorthand Property Box 예제
박스 모델(Box Model) 박스의 규격 내용 영역(content, 예: 텍스트, 이미지, 등), 패딩(padding), 보더(border),여백(margin) HTML 요소 : p, table, ol, ul, img, input, textarea, select와 object 등
박스 모델(Box Model) 박스의 규격 내용 영역(Content Area) : 실제 표현될 내용(글자, 이미지)이 위치하는 영역. 패딩 영역(Padding Area) : 내용 영역을 감싸고 있는 영역이. 0이면, 내용 영역과 동일 보더 영역(Border Area) : 패딩 영역을 감싸고 있는 영역. 0이면, 패딩 영역과 동일 여백 영역(Margin Area) : 박스의 여백을 결정하는 영역. 0이면 보더와 동일 내용 경계(Content Edge) : 해당 요소 내용 주위 패딩 경계(Padding Edge) : 패딩 주위. 0이면 내용 경계와 동일 보더 경계(Border Edge) : 보더 주위. 0이면 패딩 경계 박스에서 각 영역의 배경 스타일 - 내용 영역: 요소의 background 프로퍼티 - 패딩 영역: 요소의 background 프로퍼티 - 보더 영역: 요소의 border 프로퍼티 - 여백 영역: 여백들은 항상 투명 값의 표기순서 위 → 오른쪽 → 아래 → 왼쪽 (시계방향)
Padding, Border, Margin <HEAD> <STYLE type="text/css"> UL { background: YELLOW; /* UL의 배경색을 노란색으로 지정 */ margin: 12px 12px 12px 12px; /* 여백 영역 지정 */ padding: 3x 3px 3px 3px; /* 패딩 영역 지정 */ /* 보더들이 설정되지 않음 */ } LI { color: black; /* 텍스트 색상은 검정 */ background: gray; /* 내용, 패딩(padding)은 회색 */ margin: 12px 12px 12px 12px; /* 마진 영역을 지정 */ padding: 12px 0px 12px 12px; /* 패딩 영역(오른쪽 패딩은 0)을 지정 */ list-style: none /* 목록 항목 앞에 글머리 기호들이 없음*/ LI.withborder {border-style: dashed; /* 보더 경계를 점선으로 지정 */ border-width: medium; /* 보더의 두께를 지정 */ border-color: red; /* 보더 색상을 검정으로 지정 */ </STYLE> </HEAD> <BODY> <UL> <LI>보더가 없는 요소 <LI class="withborder">보더가 있는 요소 </UL> 10_1.html
Margin Property 여백 영역의 크기를 지정 margin-top, margin-right, margin-bottom, margin-left, margin 값 지정 방법 - 고정된 값 할당(예 : 12px) - 백분율 값 할당. 이 값은 포함 블록을 참조 - auto로 할당 포함 블록 : 부모 요소에 의해 만들어진 박스 H1 { margin-top: 2em } /* 위 부분의 여백을 2em으로 지정
Margin Property 속기 프로퍼티(Shorthand Property)와 값의 개수 및 나열 값이 한 개 : 위, 오른쪽, 아래, 왼쪽에 모두 지정 값이 두 개 : 위와 아래 여백은 첫번째 값, 오른쪽과 왼쪽 여백은 두 번째 값으로 지정 값이 세 개 : 위는 첫번째 값, 왼쪽과 오른쪽은 두 번째 값, 아래는 세 번째 값으로 지정 값이 네 개 : 위, 오른쪽, 아래, 왼쪽의 순서로 지정 BODY {margin: 2em} /* 모든 여백들을 2em으로 설정 */ BODY {margin: 1em 2em} /* 위와 아래는 1em, 오른쪽과 왼쪽은 2em */ BODY {margin: 1em 2em 3em} BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; }
Padding Property padding-top, padding-right, padding-bottom, padding-left, padding BLOCKQUOTE { padding-top: 0.3em } H1 { background: white; padding: 1em 2em; }
Border Property 보더의 두께를 지정하는 프로퍼티 border-top-width, border-right-width, border-bottom-width, border-left-width, border-width 사용되는 값 Thin, Medium, Thick, 길이
Border Property 보더의 두께를 지정하는 프로퍼티 <STYLE type=“text/css”> h1 { border-style:solid; border-top-width: thin; border-right-width: medium; border-bottom-width: thick; border-left-width: 2mm} </STYLE> - - - <h1>보더의 다양한 크기</p> 10_2.html
Border Property 보더의 두께를 지정하는 프로퍼티 <HEAD> <STYLE type="text/css"> h1 {border-style:solid; border-width:thin thick medium} </STYLE> </HEAD> <BODY> <h1>보더의 다양한 크기</h1> </BODY> 10_3.html
Border Property 보더의 색상을 지정하는 프로퍼티 border-top-color, border-right-color, border-bottom-color, border-left-color 사용되는 값 색상단어 : red, green, blue, white, black 등 RGB 값 : 16진수 값(#ff0000)이나 10진수 값(rgb(255,0,0))
Border Property 보더의 색상을 지정하는 프로퍼티 <HEAD> <STYLE type="text/css"> h1 { border-style:solid; border-top-color: yellow; border-right-color: gray; border-bottom-color: green; border-left-color: red; } </STYLE> ----- <h1>보더의 다양한 색상</h1> 10_4.html
Border Property 보더의 색상을 지정하는 프로퍼티 border-color 속기 프로퍼티 10_5.html <HEAD> <STYLE type="text/css"> H1 { border-style:solid; border-color : black } /* black black black black */ H1 { border-style:solid; border-color : black yellow } /* black yellow black yellow */ H1 { border-style:solid; border-color : black yellow pink } /* black yellow pink yellow */ </STYLE> </HEAD> ------------- <h1>보더의 다양한 색상</h1> 10_5.html
Border Property 보더의 스타일(선 종류)을 지정하는 프로퍼티 border-top-style, border-right-style, border-bottom-style, border-left-style, border-style 선 종류 none : 보더가 없음. border-width 프로퍼티의 값이 0으로 지정됨 hidden : none과 같으나, table 요소에서 나타남. dotted : 점선으로 지정 dashed : 짧은 선 연속으로 지정한다. solid : 실선으로 지정한다. double : 이중실선으로 지정 groove : 패인 것처럼 지정 ridge : grove의 반대. 튀어나온 것처럼 지정 inset : 패인 것처럼 지정 outset : inset의 반대. 튀어나온 것처럼 지정
Border Property 보더의 스타일(선 종류)을 지정하는 프로퍼티 <HEAD> <STYLE type="text/css"> h1 { border-top-style: dotted; border-right-style:solid; border-bottom-style:dashed; border-left-style:double; } </STYLE> </HEAD> --------------- <h1>보더의 다양한 스타일</h1> 10_6.html
Border Property 보더의 스타일(선 종류)을 지정하는 프로퍼티 border-style : 보더의 스타일을 지정하는 속기 프로퍼티 <HEAD> <STYLE type="text/css"> .border1 {border-style:groove;} .border2 {border-style:ridge;} .border3 {border-style:inset;} .border4 {border-style:outset;} </STYLE> -------------------------------- <h1 class=border1>보더의 스타일 1</h1> <h1 class=border2>보더의 스타일 2</h1> <h1 class=border3>보더의 스타일 3</h1> <h1 class=border4>보더의 스타일 4</h1> 10_7.html
Border Property 보더 각 변의 속기 프로퍼티 각 방향에 대한 속기 프로퍼티 각 방향의 보더에 대한 너비, 스타일, 색상을 한번에 지정 border-top, border-right, border-bottom, border-left H1 { border-bottom: thick solid red }
Border Property 보더 각 변의 속기 프로퍼티 <HEAD> <STYLE type="text/css"> h2 {border-top:thick dashed gray; border-right:3mm double red; border-bottom : 2mm dotted black; border-left: medium solid blue;} </STYLE> </HEAD> <BODY> <h2>보더의 속기 프로퍼티</h2> 10_8.html
Border Property 보더 전체의 속기 프로퍼티 네 방향에 동일한 속성을 지정하는 속기 프로퍼티 <HEAD> <STYLE type="text/css"> .border1 {border: thick groove gray;} .border2 {border: medium ridge gray;} .border3 {border: thick inset gray;} .border4 {border: 2mm outset gray;} </STYLE> ------------------ <h2 class=border1>border 프로퍼티 1</h2> <h2 class=border2>border 프로퍼티 2</h2> <h2 class=border3>border 프로퍼티 3</h2> <h2 class=border4>border 프로퍼티 4</h2> 10_9.html
Border Property 6. 모서리가 둥근 박스 <!DOCTYPE html> <html> 6. 모서리가 둥근 박스 <!DOCTYPE html> <html> <head> <style> .rad-box-1{ border:thick solid gray; border-radius:10px; } .rad-box-2{ border:thick solid gray; border-radius:20px 20px 0 0; </style> </head> <body> <div class="rad-box-1"> <h3>둥근모서리 박스1</h3> </div><br> <div class="rad-box-2"> <h3>둥근모서리 박스2</h3> </div> 10_9_1.html
박스 종합예제 10_10.html <BODY> <p style="border: 5pt solid black; text-align:center;"> 예제 1 -- 두께 <p style="border: solid red; border-width:2pt; text-align:right"> 예제 2 -- 내용 정렬 <p style="border: 2pt solid blue; padding:5pt"> 예제 3 -- padding 공간 <p style="border: 2pt solid #aabbcc; margin:20pt"> 예제 4 -- magin 공간 <p style="border: 2pt solid rgb(100,100,100); text-indent:10%"> 예제 5 -- 내용 들여쓰기</BODY>
박스 종합예제 10_11.html <BODY> <p style="border: 2pt solid black; width:200pt"> 예제 6 -- 박스 크기 <p style="border: 5pt solid black; background-color:#ffff00"> 예제 7 -- 배경색 <p style="border: 5pt solid yellow; background-color:black; color:white"> 예제 8 -- 글자색 <p style="border: 5pt solid red; font-size:50; color:green"> 예제 8 -- 글자크기 </BODY>
박스 종합예제 10_12.html <HEAD> <STYLE type="text/css"> .brd { border: solid thin blue; background-color:rgb(249,199,57)} .pad { border: solid 5pt green; color:blue; padding:5pt; text-align:center; width:300; background-color:#aabbcc;} </style> </HEAD> <BODY> <div class=brd>박스 A <p class=pad>박스 B</p> </div> <div class=brd>박스 C <p class=pad>박스 D</p> </BODY>