[CSS] display - block-level, inline, none, hidden

display

: 요소가 화면에 보여지는 방식을 지정

 

 

html 태그

• <div>

: 컨테이너. 칸 전체

<div>
  코드
</div>

 

 

 

• <span>

: 텍스트 일부분. 특정 단어나 특정 부분

<span>
  코드
</span>

 

 

 

css 속성

• block-level element

: 항상 새로운 line에서 시작

: 요소들이 각각 라인을 차지(자동 줄바꿈)

span {
  display: block;
}

 

• inline element

: 필요한 만큼만 공간 차지(줄바꿈 직접 해야 함)

span {
  display: inline;
}

 

• display : none

: 화면에 보여지지 않음. 공간 차지 X

span {
  display: none;
}

 

• visibility : hidden

: 화면에 보여지지 않음. 공간 차지 O

span {
  visibility: hidden;
}