(display)
이 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나고,
해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.
display 속성의 기본값은 Block요소와 Inline요소 중 하나다.
블록(block)
display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.
<div>
,<h1>
,<p>
,<ul>
,<ol>
,<form>
인라인(inline)
display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지한다.
<span>
,<a>
,<img>
(inline-block)
display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인 요소처럼 동작하는데, 해당 요소 내부에서는 블록 요소처럼 동작한다.
이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있다.
또, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 된다.
HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정한다.
따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 당연히 존재한다.
visibility 속성에 사용할 수 있는 속성값은
visible : 해당 HTML 요소를 웹 페이지에 나타냄.
hidden : HTML 요소를 웹 페이지에 나타내지 않음. 하지만 여전히 웹 페이지의 레이아웃에는 존재.
HTML 요소를 숨길수 있는 다른 방법은 display 속성값을 none으로 설정하면 된다.
눈에 보이지만 않게 하는 hidden속성과는 달리 이렇게 하면 해당 요소는 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않는다.
collapse : 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줌.
해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다.
자주 사용하는 float 속성값
- none : 기본적으로 요소를 띄우지 않음
- left : 왼쪽에 띄움
- right : 오른쪽에 띄움
- inhert : 부모 요소로 부터 상속함
- initial : 기본값으로 설정함
float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 준다.
컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다.
따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해야 한다.
clear: none;
: 기본값clear: left;
: 왼쪽을 취소clear: right;
: 오른쪽을 취소clear: both;
: 왼쪽 오른쪽 둘다 취소
float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다.
이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다.