[코알누]Chapter 5 - html을 좀 더 쉽게 움직이는 방법

Position

 

1. static : 기본 속성값, top right bottom left 등 위치 속성은 무시됨

 

2. relative : HTML 태그가 있는 위치에서 top right bottom left 값을 통해 움직임 (지금 있는 위치에서 움직임)

 

3. absloute : 부모영역에서 top right bottom left을 이용해 주어진 위치로 움직임

 

* 단! 여기서 부모란?

   부모 태그가 relative, absolute, fixed 속성 중 하나여야 한다. 만약 부모태그가 해당 속성을 가지고 있지 않다면 body 태그 기준으로 움직인다. 왜냐? body 태그는 relative를 기본 속성으로 가지고 있기 때문.

 

4. fixed : 스크롤을 내려도 그 위치에 고정! (무조건 브라우저 창 기준)      ex)인터넷 광고창

 

5. sticky : 스크롤 내리면 fixed처럼 그 위치에 고정

 

 

 

 

---

 

 

 

Flexbox

 

1. display:flex는 모든 요소를 가로로 둠 (가로 정렬)

                           부모한테 적용을 하고 자손을 컨트롤 

 

2. justify-content : 가로로 요소들을 움직임 (flex-start, flex-end, center, space-between, space-around 등)  

                                      margin으로 밀고 계산할 필요가 없다!

 

 

 

 

 

 

justify-content: flex-start

 

 

 

 

 

 

 

 

 

justify-content: flex-end

 

 

 

 

 

 

 

 

 

justify-content: center

 

 

 

 

 

 

 

 

 

 

justify-content: space-between

 

 

 

 

 

 

 

 

 

justify-content: space-around

 

 

 

 

 

 

 

 

 

부모 태그에 height:100vh; 적용한 후, align-items: flex-end;

 

 

 

 

 

vh (view height) : 내 화면사이즈에 100%를 쓴다는 뜻

 

 

 

 

3. align-items : 세로로 요소들을 움직임 / space 시리즈 없다

 

 

 

4. flex-direction:column 가로로 정렬된 요소를 세로로 바꾸고 justify-content는 세로로 align-items는 가로방향으로 바꾼다

 

 

 

 

 

flex-direction: column;

 

 

 

 

 

 

 

 

flex-direction: column;     justify-content: flex-end;

 

 

 

 

 

 

 

 

 

flex-direction: column;     justify-content: space-between;

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

display flex가 있어야 요소들을 유연하게 위치시킬 수 있다

flex는 부모만 가지고 있을 수 있으며, 자식들에게 적용이 된다

flex는 기본적으로 자식들을 가로로 정렬 시킨다

justify-content 는 가로로 요소들을 입맛대로 정렬 시킨다

align-items는 세로로 요소들을 입맛대로 적용 시킨다

그런데, 내가 세로 정렬을 바꾸고 싶으면

flex-direction: column을 쓰면 된다

 

단!   column 을 쓰고 나면, justify-content 가 가로에서 세로로

                                          align-items 가세로에서 가로 정렬로 바뀐다!

 

 

 

 

 

 

---

 

 

 

 

 

 

 

flexbox연습하는 웹사이트🐸: https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

(정답 : flexbox froggy 24 level answer 검색)