Display, Visibility, Opacity 프로퍼티

sssuin·2021년 6월 19일

block display inline opacity visibility

CSS

목록 보기

4/9

1.Display

: layout 정의에 자주 사용되는 프로퍼티

block: block 특성을 가지는 요소(block 레벨 요소)로 지정
inline: inline 특성을 가지는 요소(inline 레벨 요소)로 지정
inline block: inline-block 특성을 가지는 요소(inlnie-bolck요소)로 지정
none: 해당 요소를 화면에 표시하지 않는다(공간조차 사라짐)
-> 모든 html요소는 아무런 css를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가짐(block 또는 inline 특성)
->display 프로퍼티는 상속되지 않음

(1)block 레벨 요소

1)항상 새로운 라인에서 시작
2)화면 크기 전체의 가로폭 차지(width:100%)
3)width, height, margin, padding 프로퍼티 지정이 가능
4)block 레벨 요소 내엘 inline 레벨 요소 포함 가능
5)block 레벨 요소 예: div, h1~h6, p, ol, ul, li, hr, tabel, form

(2)Inline 레벨 요소

1)줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치(문장 중간에도 들어갈 수 있다)
2)content의 너비=가로폭
3)width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상하 여백은 inline-height로 지정 가능
4)iline레벨 요소 뒤에 공백이 있는 경우, 정의하지 않은 space(4px)이 자동 지정
5)inline 레벨 요소 내에 block 레벨 요소 포함 불가능, inline 레벨 요소는 일반적으로 block레벨 요소에 포함되어 사용
6)inline레벨 요소 예: span, a, stron, img, br, input, select, textarea, button

(3)Inline-block 레벨 요소

: block과 ilnie 레벨 요소 특징을 모두 가지며 inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

1)iline레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치 가능
2)block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있고, 상하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어 가능
3)contet의 너비=가로폭
4)inline-block 레벨 요소 뒤에 공백이 있는 경우 정의하지 않은 space(4px)가 자동 지정 -> 자동 지정을 없애는 방법도 있음
Fithing the space between inline block elements

2.Visibility 프로퍼티

: 요소를 보이게 할 것인지 보이지 않게 할 것인지 정의(요소의 렌더링 여부)

visible: 해당 요소를 보이게 함(기본값)
hidden : 해당 요소를 보이지 않게 함.display: none; 은 해당 요소의 공간까지 사라지게 하지만, visibility: hidden; 은 해당 요소의 공간은 사라지지 않고 남아있음
collapse :table 요소에 사용하여 행이나 열을 보이지 않게 함
none: table 요소의 row나 column을 보이지 않게 함(IE, 파이어폭스에서만 동작, 크롬에서는 hidden이랑 동일하게 동작)

(1)Dispaly와 Visibility의 차이
display는 어떻게 보이게 할것인지, visibility는 보이게 할것인지 또는 안보이게 할것인지를 정하는것

(2)visibility: hidden;
: 해당 공간 남아있음