1. 블록 요소와 인라인 요소
display 속성은 요소가 어떻게 표시되는지 여부를 결정한다.
HTML의 대부분의 요소는 display 속성 값이 블록(block) 요소이거나 인라인(inline)요소라는 값 중 하나이다.
이들 요소의 각각의 특징은 다음과 같다.
1) 블록 요소
- 요소가 항상 새 줄에서 시작된다.
- 화면에서 사용할 수 있는 전체 너비를 사용한다.
- <div>, <h1>~<h6>, <p>, <form>, <table>, <ul>, <li>, <header>, <footer>, <nav>, <section> 요소 등이 여기에 속한다.
2) 인라인 요소
- 요소가 새 줄에서 시작하지 않고 한 줄에 차례로 배치된다.
- 화면에서 필요한 만큼만 공간을 차지한다.
- <span>, <a>, <img> 요소 등이 여기에 속한다.
2. 기본 display값 변경하기
모든 요소에는 기본적으로 설정된 display 값이 있다.
하지만 필요에 따라서는 CSS를 이용하여 block 값으로 지정된 요소를 inline 값으로 바꾸거나 그 반대로 할 수도 있다.
1) 리스트를 수평 메뉴로 사용하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Display</title> <style> li { display: inline; } </style> </head> <body> <ul> <li><a href="#">1번</a></li> <li><a href="#">2번</a></li> <li><a href="#">3번</a></li> <li><a href="#">4번</a></li> <li><a href="#">5번</a></li> </ul> </body> </html> | cs |
2) <span>요소와 <a>요소를 블록 요소로 사용하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Display</title> <style> span, a { display: block; } </style> </head> <body> <span style="background-color:red;">span 구역입니다.</span> <a href="#">a 구역입니다.</a> </body> </html> | cs |
3. 요소 숨기기 (display:none / visibility: hidden)
요소를 숨길 때는 display: none 속성과 visibility: hidden 속성 모두 요소를 숨길 수 있지만 둘 사이엔 약간의 차이점이 존재한다.
display:none은 요소가 숨겨지고 요소가 없는 것처럼 화면에서 공간을 차지하지도 않게 된다.
visibility:hidden은 요소가 숨겨지지만 여전히 이전과 동일하게 자리를 차지하고 있어 레이아웃에 영향을 준다.
'프로그래밍 > 웹표준' 카테고리의 다른 글
| [CSS] 8. 테이블 스타일 (0) | 2017.12.22 |
|---|---|
| [CSS] 7. 박스 모델(Box Model) (0) | 2017.12.22 |
| [CSS] 6. 링크에 스타일 적용 (0) | 2017.09.22 |
| [CSS] 5. 폰트 설정하기 (0) | 2017.09.18 |
| [CSS] 4. 텍스트 서식 지정 (1) | 2017.06.30 |
댓글,
