HTML

---

header
nav
aside	main
footer

-> 각각 section tag가 있다.

• main은

1. BOX 와 ITEM

• 크게 박스와 아이템으로 태그를 나눠볼 수 있다.
• BOX는 대표적으로 header, nav, 등등이 있고, ITEM은 대표적으로 a, button, img, input 등이 있다.

2. Block 과 Inline

• 블럭은 말하자면 하나의 요소로 한 줄을 모두 차지해 버리는 녀석이고, inline은 자기 몸집 만큼만 차지하는 녀석이다.
• 블럭은 대표적으로 div가 있고, inline은 대표적으로 span이 있다.

CSS

---

: Casading style sheet

1. Cascading?

Author > User > Browser

• 위 sheet 순서대로 html을 웹 브라우저가 꾸며준다는 의미이다.

2. Position

position	특성
static	기본 position
relative	원래 item이 있어야 할 자리에서 상대적으로 옮겨간다.
absolute	가장 가까운 상위 박스에서 옮겨간다.
fixed	다 필요없고, 맨왼쪽 위 기준
stiky	브라우저를 움직여도 그 위치에 붙어있게 할 수 있다.

3. FLEX BOX

1 flex box의 구성

1. container(속성) : display, flex-direction 등등...
2. item 
** 주의할 점은 이 속성은 직계(direct) 자손에게만 적용된다는 것이다. 출처: https://thrillfighter.tistory.com/489 [C언어 예술가]**

2 flex-box의 axis

• 두가지로 나뉜다
  1. main axis
  2. cross axis
• 두가지 axis를 따라서 정렬을 해줄 수 있다. (뒤에서 부가 설명)

4. flex-box Container 알아보기

1. diplay

일단, 담고자 하는 container에 flex-box를 설정해준다.

.container {
	display : flex;
}

2. flex-direction

main axis와 cross axis를 정해주는 방법을 알아보자

• row : → 오른쪽으로 쌓인다. m:→ c:↓
• column : ↓ 아래 방향으로 쌓인다. m: ↓, c:→
• row-reverse : ← 왼쪽으로 쌓인다. m: ←, c:↓
• column-reverse : ↑ 위로 쌓인다. m: ↑, c:→

.container {
	display : flex;
    flex-direction : row;
}

3. flex-wrap

화면에 박스가 꽉차면 다음줄로 내용을 넘어가게 해주고 싶다면?

.container {
	display : flex;
	flex-wrap: wrap;
}

flex wrp과 direction을 합치면 flex-flow

.container {
	flex-flow: column wrap;

4. justify-content

• mian-axis에 대한 정렬을 의미한다
• center: 가운데 정렬, space-even: 박스 사이의 간격이 같게 정렬

.container {
	display : flex;
    justify-content : center;
}

5. align-items

• cross - axis를 중심으로 정렬
• center, space even

.container {
	align-items : center;
}

5. flex-box Item 알아보기

• flex 속성에 사용할 수 있는 속성은 grow, shrink
• 각각 아이템에 설정해줘야 함

1. order

• 순서를 정해 줄 수 있다.

2. flex-grow

• 브러우저 따라 늘어나는 설정(비율 따라서)

#item1 {
	flex-grow: 1; 
    }
#item2 {
	flex-grow: 1;
    }

3. flex-shrink

• 얼만큼 줄어들지 설정.

#item1 {
	flex-shrink: 1; 
    }
    
# item2 {
	flex-shrink:1;
    }

4. flex-basis

• 항목의 크기 (기본 flex의 크기) 가 기본 값.
• 비율을 지정해 줄 수도 있다.

5. align-self

• 얘만 따로 위치 시키고 싶을 때 사용한다.

#item {
	align-self:center; 
    }