[수업기록] Web : CSS Box Model, CSS position, CSS Flexbox

240820

https://velog.io/@turtle_hw/CSS-Layout

위 블로그를 재정리하여 다듬은 글입니다!

1. CSS Box Model

1) 개념

- 박스 모델이란? 모든 HTMl 요소를 사각형 박스로 표현하는 개념 

-박스타입 : block box(다음 행으로 넘어감 : 본인의 너비와 상관없이 오른쪽 여백 다 차지), inline box(옆으로 쌓아나감 : 콘텐츠 너비만큼만 차지)

-박스 표시(display) 타입 : outer display type, inner display type

 

2) 4가지 구성요소

-내용(content), 안쪽여백(padding), 테두리(border), 외부 간격(margin)으로 구성되어 요소 크기와 배치를 결정

-content box :  콘텐츠 영역, width, height 속성으로 크기 조정

-padding box : 콘텐츠 주위의 공백

-border box : border 관련 속성으로 크기 조정

-margin box : 다른 요소(외부 박스)와의 여백

 

3) box-sizing

-작업할 때 대체 상자 모델로 변경하는 게 필요하다 (box-sizing 속성)

- 요소의 너비와 높이를 지정할때 이때 요소의 너비와 높이는 콘텐츠(content) 영역을 대상으로 하기에 작업할 때 border를 기준으로 변경하면 훨씬 편하다 

- box-sizing 기본 속성 content box -> border box로 변경!!

 

4) box 타입 

-block 타입 :

- 항상 새로운 행으로 나뉨
- width 와 height 속성을 사용하여 너비와 높이를 지정할 수 있음
- 기본적으로 width 속성을 지정하지 않으면 박스는 inline방향으로 
  사용가능한 공간을 모두 차지함
  (너비를 사용가능한 공간의 100%로 채우는 것)
- 대표적인 bolck타입 태그 : h1~6 / p / div
- margin으로 수평정렬

 

-inline 타입 : 

- 새로운 행으로 나뉘지 않음
- 컨텐츠의 크기에 따라서 높이와 너비가 정해지기 때문에
  width와 height 속성을 사용할 수 없음 ★★
- 수직방향으로 padding, margins, borders가 적용되지만
  다른 요소를 밀어낼 수는 없음
- 수평방향 : padding,  margins, borders가 적용되어
  다른 요소를 밀어낼 수 있음
- 대표적인 inline 타입 태그 : a(링크), img(이미지), span
- align으로 수평정렬

 

 

 

5) 기타 display 속성

(1) inline-block 🧡: inline과 block 요소 사이 중간 지점 제공하는 display 값,

-> 즉 요소가 줄바꿈 되지 않는 것 원하지 않으면서(인라인 속성) 너비와 높이 적용하고 싶을 때(블락 속성)

 

(2) none : 요소를 화면에 표시하거나 공간도 부여되지 않음

- 상호작용하는 자바스크립트에서 사용하기 위함(박스 있다가 없애거나, 없다가 있게 하거나!

-> ex. 화면 다크모드 - 라이트모드 전환)

---

2. CSS Layout

1) 개념 :

-각 요소의 위치와 크기 조정하여 웹 페이지 디자인을 결정하는 것(display, position, flexbox 등)

 

 

2) CSS Position :

(1) normal flow에서 요소를 제거해서 다른 위치로 배치하는 것(다른 요소 위에 올리기, 화면 특정 위치에 고정시키기)

- normal flow : CSS를 적용하지 않았을 경우 웹페이지 요소가 기본적으로 배치되는 방향을 말함

ppt를 생각해보면 요소들 제일 위로 보내기, 아래로 보내기 이런 기능이 있다(z축의 원리)

 

---

 

(2) Position 유형별 특징

position의 역할 :  웹페이지 전체 레이아웃이 아닌 페이지 특정 항목의 위치를 조정하는 것 !! 🧡

 

①  static : 기본값.

- 요소를 Normal Flow에 따라 배치

 

② relative : 본인의 과거 영역을 버리지 않음 (본인의 위치에서 상대적으로 이동)

-요소를 normal flow에 따라 배치

- 자신의 원래 위치(static)을 기준으로 이동 

-다른 요소 레이아웃에 영향을 안줌(요소가 차지하는 공간은 static일 때와 같음)

relative 속성에 top, left값을 100px로 조정(기준이 스테틱이 됨)

 

③ absolute : 집 나간 자식 : 본인의 영역을 버리고 떠남

-normal flow에서 요소 제거 

-가장 가까운  relative 부모 요소를 기준으로 이동함

-문서에서 요소가 차지하는 공간이 없어져서, 다른 요소들이 이동 가능

-집나가는 기준은  static이 아닌 가장 상위의 부모를 찾아서

position : absolute;

④ fixed : 집나간 자식

- 요소를 normal flow에서 제거

-현재 화면영역(viewport) 기준으로 이동

-스크롤을 해도 그 위치에 고정, ex. 웹툰 내 다음화 보기 버튼, 챗봇 상담하기 버튼 등 

 

⑤ sticky : 감싸가면서 대체

- relative랑 fixed 특성 결합한 속성

-스크롤 위치가 임계점에 도달하기 전에는 relative처럼 동작, 특정 임계점에 도달하면 fixed처럼 동작하여 화면에 고정

-만약 다음 sticky 요소가 나오면 다음 sticky요소가 이전 sticky 요소의 자리를 대체(위치가 같음)

 

⑥ z-index : 요소가 겹쳤을 때 요소의 쌓임 순서를 정의하는 속성

-정수 값을 활용해 z축 순서 결정

-더 큰 값을 가진 요소가 작은 값을 덮음

 -static이 아닌 요소에만 적용됨

-같은 부모 내에서만 z-index값을 비교

-z-index값이 같으면 순서를 따짐

 

---

🧡3. CSS Flexbox 🧡

Flexbox의 역할 : 웹 페이지의 전체 그림을 그리고자 함 !!

 

1) 개념 :

요소를 행과 열 형태로 배치하는 1차원 레이아웃 방식(공간배열, 정렬)

 

2) flexbox 구성 요소

- flex container 라고 하는 부모가 자식 요소들인 flex item 을 1차원으로 배열, 정렬함

- 수평축이 main이 되기에 늘 수평축부터 찾기(그럼  늘 교차축을 찾을 수 있음)

-시작점은 (메인) 축기준으로 생각해야한다(main start, cross start 기본값)

-축의 시작점, 교차점은 바뀔 수 있음

 

 

(1) main axis :

-flex item들이 배치되는 기본 축

 

(2) cross axis : 

-main axis에 수직인 축(교차축)

 

(3) flex container:

-배치된 자식들을 감싸는 부모

display : flex; 혹은 display: inlin-flex; 가 설정된 부모 요소를 말함

 

- 한단계 아래 요소들에 대해서만 역할을 함

-flexbox속성 값들을 사용하면 자동으로 flex item에 반영

 

(4) flex item:

- 기본적으로 행으로 나열

- 교차축의 크기를 채우기 위해 늘어남

- 주축의 시작 선에서 시작함

---

3) flexbox(레이아웃) 구성

(1) flex  container 지정

- 기본적 행 나열

 

(2) flex-direction 지정

- flex item 나열되는 방향 지정

-column으로 지정시, 주축 변경

-reverse 지정시 시작점과 끝점이 바뀜

(3) flex-wrap :

- felx item 목록이 flex container 하나의 행에 다 들어가지 않을 때 다른행에 배치할지의 여부 설정

 

 

(4) justify-content :  주축을 따라 flex item과 주위에 공간을 분배

justify-items 및 justify-self 속성이 없는 이유는?
-> 필요없기 때문! margin auto를 통해 정렬 및 배치가 가능하다

<-> align과 대비

 

(5) align-content :  교차축을 따라  flex item과 주위에 공간을 분배

-felx-wrap이 wrap 또는 wrap-reverse로 설정된 여러 행에만 적용

(6) align-items: 교차축을 따라 flex-item 행을 정렬

 

(7) align-self : 교차축을 따라 '개별' flex- item 행을 정렬

 

 

 

(8)   🧡 felx-grow : 🧡 배치를 할 때 여백을 지우고 싶을 때 활용함

- 남은 여백들을 정하고 싶은 비율로 몇등분할 것이냐

- 남은 행 여백을 비율에 따라 각 felx item에 분배

200px 은 100px의 2배라고 말하는 것이 아님

 

(9) flex-basis

- flex item 초기 크기 값을 지정

-width값과 동시에 적용 경우 felx-basis가 우선

---

참고

1. 반응형 레이아웃

- 반응형 레이아웃에 flex-grow, flex-basis 많이 활용함

- 반응형 레이아웃 : 다양한 디바이스와 화면 크기에 자동으로 적응하여 콘텐츠를 최적으로 표시하는 웹 레이아웃 방식(모바일 버전-웹 버전)

 

 

2. 목적에 따른 속성 분류  

 

 

3. shorthand 속성

-ex. margin & padding 4방향의 속성을 각각 지정x 한번에 지정하는 속성

 

 

4. 마진 상쇄(margin collapsing)

-두 block 타입 요소의 margin top 과 bottom이 만나 더 큰 margin으로 결합되는 현상

-웹 개발자가 레이아웃을 관리하는 데 훨씬 편해짐

-> 각 요소에 대한 상, 하 margin 각각 설정안하고, 한 요소에 대해서만 설정 

30px가 더 큰 마진이라 이겨버림