Web, Django, DB

CSS Layout

Disciple428 2024. 3. 7. 20:30
  • CSS Box Model

→ CSS는 모든 HTML 요소를 사각형 박스로 표현한다.

→ 내용, 안쪽 여백, 테두리, 외부 간격으로 구성된다.

 

  • width & height 속성

요소의 너비와 높이를 지정

이때 지정되는 요소의 너비와 높이는 콘텐츠를 대상으로 한다.

 

  • box-sizing 속성

content box가 아니라 border box를 기준으로 할 수도 있다.

 

  • 박스 타입

block / inline

h1 등이 대표적인 block box 인데 공백이 우측 끝까지 있어서 한 줄을 그냥 다 차지하고 막고 있다!

 

  • Normal flow

CSS를 적용하지 않을 때 웹페이지 요소가 기본적으로 배치되는 방향

 

  • block 타입 특징

항상 새로운 행으로 나뉨. 한 행을 싹 다~ 쓰기 때문!

너비와 높이 지정 가능

너비 지정 안하면 inline 끝까지 너비 100% 를 차지한다.

h1~6, p, div 등이 있다.

 

  • inline 타입 특징

새로운 행으로 나뉘지 않음

너비와 높이를 지정할 수 없다. 본인이 가진 content 만큼만 너비와 높이를 가지기 때문! (이미지는 예외!)

수직 방향으로 안쪽 여백, 바깥 여백 등을 지정할 수 있으나 다른 요소를 밀어낼 수는 없다.

수평 방향으로는 안쪽 여백, 바깥 여백 등을 지정하고 다른 요소를 밀어낼 수 있다. 원래 인라인 방향이 수평 방향이기 때문!

 

  • 속성에 따른 수평 정렬

block → content 자체보다 margin 을 만져서 정렬을 한다.

inline → text-align 을 사용하여 정렬한다.

 

  • inline-block

기본적으로는 인라인이지만, 여백 지정으로 다른 요소를 밀어내는 block 특성을 가진다!

 

  • none

요소를 화면에 표시하지 않고 공간도 부여하지 않는다.

 

  • shorthand 속성 - border

 

  • shorthand 속성 - margin & padding

값이 4개일 때 -> 상 우 하 좌

값이 3개일 때 -> 상 좌우 하

값이 2개일 때 -> 상하 좌우

값이 1개일 때 -> 공통

 

  • Margin collapsing (마진 상쇄)

두 블록 타입 요소의 마진 탑과 바텀이 만나서 더 큰 마진으로 결합되는 현상

웹 개발자가 레이아웃을 더욱 쉽게 관리할 수 있도록 함

각 요소에 대한 상하 마진을 각각 설정하지 않고 한 요소에 대해서만 설정하기 위함

단, 상하에서만 상쇄가 되고 좌우 여백은 상쇄되지 않는다!!!

 

  • CSS Layout

각 요소의 위치와 크기를 조정하여 웹 페이지의 디자인을 결정하는 것

display, position, flexbox 등을 사용

 

  • CSS Position

요소를 normal flow 에서 제거하여 다른 위치로 배치하는 것

 

  • position 유형별 특징

static : 기본값

relative : 요소를 normal flow에서 제거하지 않는다. 본래 자신의 위치를 기준으로 이동한다.

absolute : 요소를 normal flow에서 제거함. 가장 가까운 relative 부모 요소를 기준으로 이동한다.

fixed : 요소를 normal flow에서 제거함. 현재 화면영역(viewpoint)을 기준으로 이동

sticky : 요소를 normal flow에 배치하지만 스크롤이 특정 임계점에 도달하면 그 위치에 고정된다. 만약 다음 sticky 요소가 나오면 다음 요소가 이전 sticky를 대체한다.

 

  • z-index

요소가 겹쳤을 때 어떤 요소 순으로 위에 나타낼 지 결정

정수 값이 클수록 위에 배치된다.

 

  • position의 역할

전체 페이지에 대한 레이아웃을 구성하는 것이 아니라 페이지의 특정 항목의 위치를 조정한다.

 

  • CSS Flexbox

요소를 행과 열 형태로 배치하는 1차원 레이아웃 방식

여러 요소들을 배치하는 방식, 정렬

 

  • main axis (주 축)

기본값으로는 main start 에서 main end 방향으로 배치

 

  • cross axis (교차 축)

main axis에 수직인 축

좌상단이 기본 시작점이라서 위에서 아래 방향이다.

 

  • Flex Container

 

  • justify-content

주 축을 따라 flex item과 주위에 공간을 분배

 

  • allign content

 

  • 목적에 따른 속성 분류

배치 → flex-direction, flex-wrap

공간 분배 → justify-content, align-content

정렬 → align-items, align-self

 

  • 각 용어들의 의미

justify → 주 축 정렬

align → 교차 축 정렬

 

content → 여러 줄

items → 한 줄

self → 요소 하나