display 속성 (block, inline, visibility, display, opacity )

block	블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. <div>, <h1>, <p>, <ul>, <ol>, <form>요소는 대표적인 블록(block) 요소입니다.
inline	인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다. <span>, <a>, <img>요소는 대표적인 인라인(inline) 요소입니다.
display	display 속성의기본 설정값의 변경 display 속성값을 변경해도, 실제로 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 아닙니다. 즉, display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 포함할 수 없습니다. 왜냐하면, 처음부터 display 속성값이 블록인 요소만이 내부에 다른 요소를 포함할 수 있기 때문입니다. ex) li { display: inline; } 인라인-블록(inline-block) display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작합니다. 하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작합니다. 이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있습니다. 또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 됩니다.
visibility	visibility 속성은 HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정합니다. 따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 당연히 존재하게 됩니다. visibility 속성을 자바스크립트와 함께 사용하면 매우 복잡한 메뉴나 레이아웃을 손쉽게 만들 수 있습니다.   visibility 속성에 사용할 수 있는 속성값은 다음과 같습니다.   1. visible : 해당 HTML 요소를 웹 페이지에 나타냅니다. 2. hidden : HTML 요소를 웹 페이지에 나타내지 않습니다. 하지만 여전히 웹 페이지의 레이아웃에는 존재합니다. 3. collapse : 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줍니다.
display:none	해당 요소는 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않습니다. 또한, visibility 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있습니다.  하지만 display 속성값을 none으로 설정한 것과는 달리, 눈에 보이지만 않을 뿐 여전히 웹 페이지의 레이아웃에는 존재하게 됩니다. ex) html <div> <p>내용1</p> <p class="none"> 내용2 </p> </div> <div> <p>내용1</p> <p class="hidden"> 내용2</p> </div> css    p.none { display: none; }  / 내용2가 나타나지 않고 공간차지도 안함, 내용1 담은 p 태그만 있는 것처럼 보임    p.hidden { visibility: hidden; } / 내용2가 나타나지 않지만 내용2 만큼의 공간을 차지함
opacity	opacity 속성을 이용하면 HTML 요소의 투명도를 간단히 조절할 수 있습니다. opacity 속성값은 0.0부터 1.0까지 설정할 수 있으며, 속성값이 0에 가까울수록 투명한 상태가 됩니다. ex)     img { opacity: 0.4; filter: alpha(opacity=40); }     img:hover { opacity: 1.0; filter: alpha(opacity=100); } /투명한 이미지가 hover시 선명해짐

출처: tcpschool.com/css/css_position_display