728x90
6. 디스플레이
- 브라우저가 요소를 화면에 나타내는 방법을 제어하는 속성으로 block, inline, inline-block 등이 있다.
(1) Block 요소
- 블록요소는 줄바꿈이 되어 표현됨
- 블록요소의 가로크기는 부모요소만큼 적용
- 블록요소의 높이는 콘텐츠 크기만큼 적용
- 블록요소에 width값을 적용하여 부모요소의 가로 크기보다 작더라도 가로전체는 해당요소의 영역으로 유지
- 블록요소는 마진과 패딩을 적용할 수 있고 다른 블록요소에 영향을 줌
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>디스플레이 속성</title> <style type="text/css"> .box{border: 10px solid #000;} .box p{border: 3px solid #f00;} .box .b1{width: 500px;} .box .b2{padding:50px; margin:50px;} </style> </head> <body> <h2>Block</h2> <div class="box"> <p class="b1">블록요소</p> <p class="b2">블록요소</p> <p class="b3">블록요소</p> </div> </body> </html> |
■ 실행결과1
(2) Inline 요소
- 줄바꿈을 하지 않음
- width는 콘텐츠 크기만 적용
- height는 콘텐츠 크기만 적용
- 인라인 요소는 width, height 적용불가
- 인라인 요소의 패딩과 마진 적용시 상하 값은 블록요소에 영향을 주지 않음(좌우만 적용됨)
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>디스플레이 속성</title> <style type="text/css"> .box2{border: 10px solid #000;} .box2 span{width: 100px; height:100px; border:5px solid #f00;} /* 인라인 요소는 width, height 적용되지 않음 */ .box2 a{padding: 30px; margin:30px; border:5px solid #00f;} /* 인라인 요소의 padding, margin은 좌우만 적용된다 */ .box2 em{border: 5px solid #0f0;} </style> </head> <body> <h2>Inline 요소</h2> <div class="box2"> <span>인라인</span> <a href="#">인라인</a> <em>인라인</em> </div> </body> </html> |
■ 실행결과2
(3) Inline-block 속성
- 화면 표시는 줄바꿈을 하지 않음(인라인)
- width, height, padding, margin은 블록요소처럼 됨
■ 예시3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>디스플레이 속성</title> <style type="text/css"> .img1{width: 150px; height: 150px; padding: 25px; margin: 25px; border: 5px solid #f00;} .input1{width: 250px; height: 30px; padding: 20px; margin: 20px; border: 5px solid #f00;} </style> </head> <body> <h2>Inline-block</h2> <img src="img1.png" alt="이미지" class="img1" /> <input type="text" value="input" class="input1" /> </body> </html> |
■ 실행결과3
(4) 디스플레이 변환
- 디스플레이 속성을 이용하여 요소의 화면표시방법을 바꿀 수 있음
■ 예시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"> .box{border:10px solid #000;} .box p{border: 5px solid #f00; width: 400px; height: 400px; display: inline;} .box span{border: 3px solid #0f0; display: block; padding: 20px; margin: 20px;} .aa{border: 5px solid #000; } .aa li{border: 3px solid #0f0; width:200px; height:50px; display: inline-block;} </style> </head> <body> <h2>block을 inline으로 표현</h2> <div class="box"> <p>블록</p> <p>블록</p> <p>블록</p> </div> <h2>inline을 block으로 표현</h2> <div class="box"> <span>인라인</span> <span>인라인</span> <span>인라인</span> </div> <h2>block을 inline-block으로 표현</h2> <ul class="aa"> <li>블록</li> <li>블록</li> <li>블록</li> </ul> </body> </html> |
■ 실행결과4
※ display: inline-block;을 적용했을 때, 브라우저 크기가 작아 너비가 충분하지 않을 경우에 아래로 떨어지는 것을 볼 수 있습니다.
※ 브라우저 크기를 바꾸면서 테스트해보세요.
너비가 충분해지면, 인라인 요소처럼 한줄로 붙게 됩니다.
반응형