작정하고 Django (12) - CSS 핵심 -display속성 및 size 단위 px,em,rem,% : Django로 Pinterest 따라하기

DISPLAY 속성

• Block
• Inline
• Inline-block
• None

Display : block

• 한 블럭의 모든 너비를 다 가져감.
• children이 여러개면 아래로 쌓임
  

Display: inline

• 글씨의 높이만큼만 한 줄내에 구축.
• children이 가능한 한 오른쪽으로 쌓임.

Display: inline-block

• block인데도 불구하고 inline처럼 오른쪽으로 children이 쌓이는 형태

Display : None

• 말 그대로 없는 것. html 태그 상에서 있긴 있지만 시각화 되는 과정에서는 아무것도 없음.

Visibility (시각화)

Visibility : Hidden

• 보이지만 않을 뿐 존재하는 것.
• Display : None 과는 다름.

SIZE

• px
• em
• rem (거의 모든 단위로 사용)
• %

Size - Responsive

• 반응형 , 우리는 모바일이나 데스크탑에서 등등 다양한 사이즈를 활용함. 그에 따른 통제력을 가져야함.

Size : px

• 픽셀값
• 부모가 커지든 작아지든 픽셀값을 설정하면 그 픽셀값을 가진다.

Size : em

• 부모의 font 사이즈를 따라감.
• 부모의 font 사이즈가 커지면 따라서 커지고 , 작아지면 따라서 작아진다.

(부모가 1.5배 커짐으로써 자식도 1.5배로 같이 커짐)

--> 여기서 문제 : 부모가 여러개 일때 문제 발생.

두 부모의 사이즈가 2배씩 커진다면 이것은 총 4배가 커지는 문제가 발생.

Size : rem

• root HTML 파일의 기본 값을 따라감.
• root HTML 파일의 font-size 가 커지면 그 값을 따라서 같이 커짐.

Size : %

• 바로 그 위 부모의 값을 받음.

정리

우리는 보통 rem과 가끔 %를 사용하게 될 예정이다.