CSS - 정렬

CSS - 정렬

 

#1 기본 배경

 

block 요소 - 가로로 끊임없이 이어지는 하나의 블록이다.

inline요소 - 자신의 영역만 차지하고 뚝뚝 끊어진다. 그리고 오른쪽으로 끊임없이 가다가 벽을 만나면 아래로 떨어져서 왼쪽부터 오른쪽으로 다시 진행된다.

---

#2 내가 원하는 위치에 무언가를 옮기려면?

 

1)

flex의 기본원리는 컴퓨터 자체는 “대각선 이동”이 없다.

따라서 내가 왼쪽 최 상단에서 중앙으로 어떤 요소를 이동시키길 원한다면

가로로 한번 보내고, 그 다음에 정 중앙에서 아래로 내려 보내야한다.

 

혹은 아래로 내려보내고 오른쪽으로 중앙을 향해서 보내는 방법도 사용이 가능하다

 

일례로 왼쪽 상단에 있는 박스를 정 중앙으로 보내는 것은 이렇게 할 수 있다.

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

 

2)

기본적으로 박스를

수직으로 나열을 원한다면 - flex-direction: column;

수평으로 나열하기를 원한다면 - flex-direction: row; 혹은 display: flex;

 

먼저 움직이고자 하는 “부모”태그 부터 건드려 주는 것이 맞다.

 

3)

이건 이해가 잘 안가지만

가로방향으로 움직여주는 것은

flex-direction, justify-content 이고

align-items는 세로방향으로 움직여준다는 점이다.

---

#3 정렬 속성

 

1)아이템 사이의 균일한 간격으로 정렬

space-between

 

2)아이템 둘레에 균일한 간격으로 정렬

space-around

 

3)아이템 사이와 양 끝을 균일한 간격으로 정렬

space-evenly

 

최종적으로 봤을때 말이 비슷해 보일 수 있겠지만

space-between은 “아이템 사이”를 균일한 간격으로 분할하는 것이다.

즉, 아이템이 2개 이상일때에 양 끝에 닿는다.

 

하지만 space-evenly는 아이템 뿐 아니라 양 끝간을 균일하게 쓰기 때문에

아이템이 2개 이상일지라도 양 끝에 결코 닿지 않는다.

---

#4 position

 

1)박스의 절대적 위치

position: absolute;

 

2)부모 박스를 기준으로 상대적 위치

position: relative;

 

3)화면 기준으로 절대 위치

position: fixed;

보통 이거는 화면에서 위치가 변하면 안되는 경우에 쓰인다 (nav, footer등)

---

#5 결론

 

이해가 특히 #2, #3에 관해서는 어렴풋이 된다.

따라서 이런건 좀 더 사용하면서 익혀봐야할 것같다.