[Css] 보기 속성 - display, visibility, opacity

display 속성

• display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.
• HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있는데, block, inline, inline-block, none값이 있다.
• none 값이면 공간조차 사라지며 해당 요소를 화면에 표시하지 않는다.

/* display 속성의 기본 설정값의 변경 */
li { display: inline; }

블록(block)

• display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 넓이를 차지하고, 블록 요소 내에 인라인 요소를 포함할 수 있다.
• width, height, margin, padding 속성 지정이 가능하다.
• <div>, <h1>, <p>, <ul>, <ol>, <form>요소는 대표적인 블록 요소다.

div:nth-of-type(1) {
    background-color: #FFA07A;
    padding: 20px;
}

인라인(inline)

• display 속성값이 인라인인 요소는 새로운 라인에서 시작하지 않고 문장 중간에 들어갈 수 있으나 인라인 요소 안에는 블록 요소를 포함할 수 없다.
• 요소의 너비도 해당 라인 전체가 아닌 해당 요소의 내용 만큼만 차지하고, 인라인 요소 뒤에 공백이 있는 경우에는 정의하지 않은 띄어쓰기(4px)가 자동 지정된다.
• width, height, margin-top, margin-bottom 속성을 지정할 수 없고, 상하 여백은 line-height 속성으로 지정한다.
• <span>, <a>, <img>요소는 대표적인 인라인 요소다.

span {
    background-color: red;
    color: white;
    padding: 10px;
}

인라인-블록(inline-block)

• display 속성값이 인라인-블록인 요소는 해당 요소 자체는 인라인 요소처럼 동작하지만 해당 요소 내부에서는 블록 요소처럼 동작한다.
• 인라인 요소처럼 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있으며, 해당 요소의 내용 만큼만 너비를 차지하고, 인라인 요소 뒤에 공백이 있는 경우에는 정의하지 않은 띄어쓰기(4px)가 자동 지정된다.
• 블록 요소처럼 width, height, margin, padding 속성을 모두 정의할 수 있으며, 상하 여백을 margin과 line-height 두 가지 속성으로 제어할 수 있다.

.inline-block {
    display: inline-block;
    vertical-align: middle;           /* inline-block 요소 수직 정렬 */
    border: 3px solid #73AD21;
    font-size: 16px;
}

 

visibility 속성

• visibility 속성은 HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정하는데, 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하며 코드 내에도 당연히 존재한다.
• display가 none일 때는 해당 요소는 웹 페이지에 더 이상 나타나지 않으며 웹 페이지의 레이아웃에도 영향을 미치지 않지만, visibility가 hidden일 때는 눈에 보이지만 않을 뿐 여전히 웹 페이지의 레이아웃에는 존재한다.

p.hidden { visibility: visible; }   /* 보여줌 (기본값) */
p.hidden { visibility: hidden; }    /* 공간은 있지만 숨김 */
p.none { display: none; }           /* 공간도 없음 */

table.hidden { visibility: collapse; }  /* 테이블에서만 한 줄로 */
table.hidden { visibility: none; }      /* 테이블에서만 행이나 열 숨김 */

 

opacity 속성

• opacity 속성은 투명도를 말하며, opacity 속성값은 0.0부터 1.0까지 설정할 수 있는데 0에 가까울수록 투명한 상태가 된다.

img {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

• opacity 속성과 RGBA나 HSLA의 알파 채널 모두 투명도를 조절하지만, opacity는 모든 자식 요소까지 전부 같은 투명도로 설정하고 알파 채널은 투명도를 설정한 요소에만 투명도를 설정한다.

#para_06 {
    background-color: rgb(255,0,0);
    opacity:1;
}

#para_07 {
    background-color: rgba(255,0,0,0);
}

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/