- 속성 - display
display 속성 : 요소의 렌더링 박스 유형을 결정하는 속성입니다.
| display | width | height | margin | padding | border |
|---|---|---|---|---|---|
| block | ㅇ | ㅇ | ㅇ | ㅇ | ㅇ |
| inline | X | X | 좌/우 | ㅇ(설명) | ㅇ(설명) |
| inline-block | ㅇ | ㅇ | ㅇ | ㅇ | ㅇ |
/* display */
div {
display:block;
display:inline;
display:inline-block;
}- 속성 - visibility
CSS에서 요소를 숨기는 방법에는 몇 가지가 있습니다.
요소를 숨긴다는 의미로만 해석하면 가장 명시적인 방법은 visibility 속성을 이용하는 것입니다.
/* visibility */
div {
visibility: visible; /* 보임 기본값 */
visibility: hidden; /* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */
visibility: collapse; /* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지정은 hidden과 같음) */
}- 속성 - float
모든 요소는 기본적으로 보통의 흐름에 따라 위에서 아래로, 그리고 좌측에서 우측으로 배치됩니다.
요소 박스의 경계대로 차례대로 배치되며 float 속성은 요소를 보통의 흐름에서 벗어나 독자적인 공간 위에 배치되게 됩니다.
/* float */
div {
float:left;
float:right;
}- 속성 - clear
floating 요소는 주변 요소들의 배치에도 영향을 줍니다.
그러므로 가끔 주변 요소들이 의도하지 않은 대로 나타날 수 있는데, clear 속성을 사용하여 이 문제를 해결할 수 있습니다.
/* clear */
div {
clear:left; /* 왼쪽으로 floation 요소를 허용하지 않음 */
clear:right; /* 오른쪽으로 floation 요소를 허용하지 않음 */
clear:both; /* 양쪽으로 floation 요소를 허용하지 않음 */
}- 속성 - position
요소의 레이아웃을 설정하는 대표적인 속성은 position 속성입니다.
position은 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다.
/* position */
div {
position:absolute; /* 부모 요소의 위치를 기준으로 offset 에 따라 배치 */
position:fixed; /* 뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치 */
position:relative; /* 자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치 */
}- 속성 - z-index
요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다.
/* z-index */
div {
z-index:1; /* 큰 값이 가장 위쪽(음수 사용 가능) */
}- 속성 - HTML/CSS 유효성 검사
HTML/CSS 코드를 작성하고 나면 항상 유효성 테스트를 실시해야 합니다.
유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고, 사용성과 접근성, SEO 최적화 개선에도 도움이 됩니다.
