23.03.09 / overflow, opacity, display

[ overflow ]

- 요소의 크기 이상으로 콘텐츠의 내용이 넘쳤을 경우, 어떻게 화면에 보이게 만들 것 인지 제어한다.

<값>

• visible : 넘친 내용을 그대로 보여준다.
• hidden : 넘친 내용을 잘라낸다.
• scroll : 넘친 내용을 자르고, 스크롤 바를 생성한다. - 내용이 넘치지 않아도 스크롤 바를 생성한다.
• auto : 넘친 내용이 있는 경우에'만' 잘라내고 스크롤바를 생성한다. - 내용이 넘지지 않으면 스크롤 바 생성 x
• overflow-x / y : x축 또는 y축으로 스크롤 바 생성

[ opacity ]

- 요소의 투명도 지정

<값>

• 1 : 불투명 / 0~1 까지의 소수점 숫자로 작성 가능하다.

[ display ]

• 요소의 배치 방법을 결정
• 화면에 보여질 요소의 특성을 지정한다.
• display 속성 사용 시, 블록 요소와 인라인 요소의 특징을 바꿔서 사용 가능하다.

<값>

• block : 인라인 -> 블록
• inline : 블록 -> 인라인
• inline-block
• flex
• grid

[ float ]

• 왼쪽, 오른쪽으로 배치하는 float 속성
• 문단의 왼쪽이나 오른쪽에 이미지를 배치하고 싶을 때.
• p 태그는 블록요소이기 때문에 이미지와 함께 배치할 수 없다.