Display 속성

display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티이다. 모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있다. 대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline이다. 블록 엘리먼트는 블록 레벨 엘리먼트라고 부를 때도 있다.

1. inline

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다. <span>, <a>, <img>요소는 대표적인 인라인(inline) 요소이다.

2. inline-block

display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작한다. 하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작한다. 이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있다. 또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있다.

3. block

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. <div>, <h1>, <p>, <ul>, <ol>, <form> 요소는 대표적인 블록(block) 요소이다.

📌 visibility 속성

visibility 속성은 HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정한다. 따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 당연히 존재하게 된다. visibility 속성을 자바스크립트와 함께 사용하면 매우 복잡한 메뉴나 레이아웃을 손쉽게 만들 수 있다.

1. visible : 해당 HTML 요소를 웹 페이지에 나타낸다.
2. hidden : HTML 요소를 웹 페이지에 나타내지 않는다. 하지만 여전히 웹 페이지의 레이아웃에는 존재한다.
3. collapse : 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여준다.

📌 opacity 속성

opacity 속성을 이용하면 HTML 요소의 투명도를 간단히 조절할 수 있다. opacity 속성값은 0.0부터 1.0까지 설정할 수 있으며, 속성값이 0에 가까울수록 투명한 상태가 된다.