CSS display 인라인과 블럭 | overflow 요소 초과 내용

CSS display

display는 화면에 어떻게 보일지를 결정하는 요소이다.

 

기본값: inline

 

문법

display: none | inline | block | inline-block

none: 박스 생성 X

inline: 요소를 inline 요소처럼 표시

block: 요소를 block 요소처럼 표시

inline-block: inline 요소처럼 표시하지만 내부는 block의 형태

  -> box형태가 inline처럼 나타남

 

 

 

CSS overflow

overflow는 내용이 요소를 초과했을 때 어떻게 처리할지를 설정하는 요소이다.

 

기본값: visible

 

문법

overflow: visible | hidden | scroll | auto | initial | inherit

visible : 박스를 벗어나도 내용 표시
hidden : 박스 벗어나는 내용 잘라버림
scroll : 스크롤바 생성 (내용의 크기가 상관없음)
auto : 스크롤바 생성 (내용이 박스를 벗어나는 경우에만)