(6) 박스모델 정리
1) width
- 입력한 크기만큼만 적용됨
- 부모요소의 width값을 그대로 사용
2) 배경색 : 콘텐츠 영역(width, height) + padding + 테두리
※ margin, padding, border를 각 크기를 주지 않을 경우에는 배경색을 주었을 때, 모두를 포함해서 배경색으로 나타납니다.
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>박스모델 정리</title> <style type="text/css"> *{margin:0; padding:0;} .test1{background-color:#f00;} .test2{background-color:#0f0; width:300px;} </style> </head> <body> <h2>width</h2> <p class="test1">콘텐츠</p> <p class="test2">width값 입력한 경우</p> </body> </html> |
■ 실행결과1
3) 자식요소는 부모요소의 width값을 사용함. 상속받음.
4) 자식의 넓이가 부모의 넓이보다 클 수 없음.
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>박스모델 정리</title> <style type="text/css"> *{margin:0; padding:0;} .parent{width:300px; height:200px; background-color:#0f0;} .parent .child{height:100px; background-color:#00f;} .parent1{width:300px; height:200px; background-color:#0f0;} .parent1 .child1{width:400px; height:100px; background-color:#00f;} /*이 작성은 틀림, 자식은 부모의 넓이값보다 크게 선언할 수 없음*/ .parent2{width:300px; height:200px; background-color:#0f0;} .parent2 .child2{width:100%; height:100px; background-color:#00f; padding:0 25px;} /*상대크기 적용 */ </style> </head> <body> <h2>부모와 자식구조</h2> <div class="parent"> <div class="child"></div> </div> <br /> <div class="parent1"> <div class="child1"></div> </div> <br /> <div class="parent2"> <div class="child2"></div> </div> </body> </html> |
■ 실행결과2
※ 초록색 부모 상자 안에 파란색 자식 상자가 포함되어 있는 모습입니다.
자식은 부모의 넓이 값보다 크게 선언하면 안되고,
큰 경우에는 두번째 그림처럼 뛰쳐 나가게 되죠^^;;
파란색 자식 상자에 padding을 준 경우에도 마찬가지로 뛰쳐 나가는 모습이네요.
값을 바꿔가면서 테스트 해보세요.
5) 값에 상대수치(%)를 사용
■ 예시3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>박스모델</title> <style type="text/css"> *{margin:0; padding:0;} .test1{border:10px solid #000; width:50%;} .test2{border:10px solid #000; padding:5%; margin:10%;} /*감싸는 상자의 width값을 계산해서*/ </style> </head> <body> <h2>값에 상대수치(%)를 사용하는 경우</h2> <p class="test1">width에 %</p> <p class="test2">margin, padding에 %</p> </body> </html> |
■ 실행결과3
※ 실행결과에서 브라우저 크기를 바꾸면서 확인해 보세요! 브라우저 크기에 맞춰 박스크기가 변한답니다.
6) 부모 자식구조에서의 박스 계산(width)
- width 값을 감싸는 상자에 적용해야 함.
■ 예시4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>박스모델</title> <style type="text/css"> *{margin:0; padding:0;} .box1{ border:10px solid #000; width:300px; height:150px;}/*w320px h170px*/ .box11{ border:10px solid #0f0;}/*w280+b20*/ .box111{ border:5px solid #f00; padding:0 15px;} /*w290+b10 width가 적혀있지 않은 상태로 padding의 선언은 width에 영향을 주지 않음*/ .box1111{ width:300px; border:10px solid #00f; padding:10px;}/*w300+b20+p20=340px, 320px*/ </style> </head> <body> <h2>부모 자식구조에서의 박스 계산(width)</h2> <div class="box1"><!-- 감싸는 상자에 width 값 적용 --> <p class="box11">자식요소1</p> <p class="box111">자식요소2</p> <p class="box1111">자식요소3</p> </div> </body> </html> |
■ 실행결과4
7) 최소, 최대 고정크기
- 콘텐츠 크기를 표현하는 경우 1)고정크기, 2)최소크기(min), 3)최대크기(max) 세가지 형태로 입력가능
1) width, height(고정)
2) min-width, min-height
3) max-width, max-height
■ 예시5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>박스모델</title> <style type="text/css"> *{margin:0; padding:0;} .test3{border:10px solid #000; min-width:500px; min-height:100px;} </style> </head> <body> <h2>최소, 최대 고정크기</h2> <div class="test3">최소크기</div> <!-- 브라우저를 리사이즈하면 가로크기는 500px이 최소값이므로 더이상 작아지지 않음--> </body> </html> |
■ 실행결과5
※ 실행결과 브라우저 크기를 바꾸면서 확인해 보세요.
300px이상일 경우에는 검정색 테두리가 올바르게 표시가 되고,
브라우저 width값이 300px보다 작아지게 되면, 박스가 잘리게 된답니다.
(min-width 크기를 크게 해서 테스트 하면 쉽게 확인하실 수 있을꺼에요^^)