2. CSS Layout

+ 이전 시간 내용 추가

 

맨 위에서 width/height을 통해 맨 가운데 부분, 즉 text 입력 시 글씨가 시작되는 부분의 범위를 정해준다.

background는 border까지 색이 입혀지게 된다.

output에 녹색으로 표시되는 부분이 현재 Layout에 해당하는 범위이다.(개발자도구에서 해당 Layout에 마우스를 올려 볼 수 있다.)

 

 

 

그 다음은 padding이다. contents를 둘러싸는 부분으로, 4개 입력하면 위에서부터 시계방향으로 Padding을 설정할 수 있다.

 

 

다음은 border이다. padding을 둘러싸고 있으며, 선 굵기, 스타일 및 색을 선택할 수 있다.

border-width, border-style, border-color 등으로 하나 하나 지정도 가능하다.

border-style이 정해지지 않으면 적용되지 않는다. 틀이 없으니 당연하다.

 

 

마지막 margin이다. 상 하 좌 우 margin을 나타내며, 아무것도 쓰지 않으면 border 끝까지의 사이즈가 적용된다.

 

 

---

Position & Display 

 

div는 기본 block이나, inline-block으로 변경하면 오른쪽으로 쭉 정렬되는 블록이 된다.

span은 기본 Inline인데, 주어지는 value가 없으면 아무것도 나타나지 않게 된다.

div를 inline으로 변경하면, value 없는 상태에서 마찬가지로 아무것도 나타나지 않는다.

inline block은 정해진 width, height, margin을 가지고 상자화가 된다.

block은 한 줄에 하나!

 

 

inline은 안의 내용에 따라서 크기가 정해진다.

 

정리하면, 

block : 한 줄에 하나가 배치되는 형태. width / height / margin 등을 지정하지 않으면 컨텐츠 사이즈와 동일해진다.

 

inline : 컨텐트에만 영향을 받는 형태. w / h에는 영향 안받으며, margin에만 영향을 받는다. margin도 높이는 컨텐츠와 동일하며, 좌우 마진만 반영이 된다.

강조되어 있는 부분을 보면 알 수 있듯이, 좌 우 margin에만 영향을 준다. width / height는 의미 없다.

 

inline-block : 한 줄에 inline으로 배치되는 블록의 형태. width / height / margin의 영향을 받는다.

 

 

기본 position은 static -> relative로 변경하면, left / right 가 적용되어 움직이게 된다.

 

 

 

.box 안에서 relative로 할 경우, container에서 옮겨진 20 / 20 에서 추가로 20 / 20 만큼 움직인다.

 

absolute로 할 경우, 현재 컨테이너인 article(container)의 원점을 기준으로 옮겨지는 것을 확인할 수 있다.

-> 가장 근접한 (static이 아닌) 부모 박스 포지션으로 옮겨진다.

 

 

fixed일 경우, Container를 무시하고 원래 페이지 상에서 옮겨가는 것을 말한다.

 

 

sticky는 스크롤이 내려가도, 계속 그 위치에 고정되어 있다. 

 

 

+ class 내에서 position 안쓰면 아무리 container에서 relative로 지정했다 해도 지지고 볶아도 그대로의 위치에 있다.

 

 

명시를 해 줘야 left / top에 맞게 움직일 수 있다.

 

---

FlexBox - css의 꽃

 

FlexBox를 통해 웹 사이트 레이아웃을 자유롭게 할 수 있다.

유연해서 FlexBox라고 부른다.

 

Position + float + Table => 좀 귀찮고 어렵다. 박스를 실질적으로 가운데로 배치하는게 조금 까다롭고 한계가 있다.

=> FlexBox로 해결!

 

 

float은 원래 이미지와 텍스트 사이의 정렬 관계를 위한 기능이였다.

float을 이용해서 box를 배치하는 방식으로 사용을 했었다. float의 순수 목적에는 어긋나는 hack이지만, 이렇게 썼었음.

 

 

FlexBox => 우선 2가지만 이해하자.

 

1. Container - Box 에 적용하는 속성 및 Item에 적용할 수 있는 속성이 있다.

 

 

Container(Box)에 지정하는 속성 :

 

 

item에 지정하는 속성 : 

 

 

 

2. FlexBox에는 중심 축, 반대 축이 있다.

 

item들이 수평(Main) 축으로 정렬되어 있으므로, 가로가 main axis = 중심 축 / 세로는 cross axis = 반대축이 된다.

 

 

item이 수직으로 정렬되어 있으므로, 세로가 main axis / 가로가 cross axis가 된다.

 

 

+ 실습해보기

 

div.container>div.item.item${$}*10을 통해 아래의 div 태그 여러 개를 생성할 수 있다.

해석하면 div class를 container로 지정하고, 그 안에 div class를 item, item$로 지정하며 {$}안에 내용을 10번 반복해서 채운다!

 

 

* 100% vs 100vh

100% : container가 들어있는 부모 높이의 100퍼센트 -> 즉 body높이 만큼 채운다는 의미이다.

100vh : 부모에 상관 없이 보이는 창의 100퍼센트를 쓰겠다. vertical height의 의미이다.

 

 

1) BOX에 대한 명령어

direction을 row-reverse로 설정했다.

FlexBox를 위해 -> display: flex

flex-direction: row / row-reverse / column / column-reverse

 

 

flex-wrap : 기본은 no-wrap, 창의 크기를 변경해도 item들이 한 열에 빽빽하게 있다.

wrap으로 바꾸면 다음 칸으로 넘어가게 된다.

 

flex-direction + flex-wrap을 flex-flow로 한꺼번에 지정 가능하다.

 

 

flex-direction & justify-content를 통해 item의 순서와 붙는 위치를 결정할 수 있다.

flex-end를 사용하면 순서는 유지하되 container가 오른쪽 또는 아래로 붙게 된다.

center는 중간으로 간다.

 

space-around를 통해 item들을 조금 떨어뜨릴 수 있다.

맨 왼쪽 1은 자신의 테두리만큼 띄어져 있고, 2는 1의 오른쪽+2의 왼쪽 만큼 더 떨어져 있음을 확인할 수 있다.

 

 

space-evenly는 아예 왼쪽 오른쪽 똑같은 간격을 넣어 준다.

 

space-between은 맨 왼 / 오른쪽은 붙여버리고 사이 간격만 동일하게 한다.

 

justify-content가 중심 축 기준이였다면, align-items는 반대 축 기준으로의 align이다.

 

 

만약 item1에 padding을 줘서 숫자들간 align이 안맞을 경우, align-items: baseline을 통해 1과 같은 가로 축에 모든 숫자가 정렬되도록 할 수 있다.

 

 

align-content를 통해 이번엔 세로 방향에서의 배치를 건들 수 있다.

justify-content에서 사용했던 속성들을 사용 가능하다. 

flex-wrap을 nowrap -> wrap으로 해놔야 item들이 세로 방향으로 내려오게 되는 점에 유의하자.

 

 

 

2) ITEM 명령어

 

 

order를 통해 맨 앞에 오는 우선순위를 줄 수 있다. 기본은 0이며 숫자가 작아질 수록 앞에 오는 우선순위를 부여한다.

잘 안쓰인다고 하니 알아두기만 하자.

 

 

flex-grow를 통해 고정되었던 item 사이즈가 변경된다. 값을 주어 커지는 비율을 설정할 수 있다.

 

 

flex-shrink를 통해 줄어들었을 때 작아지는 비율을 설정할 수 있다.

 

 

flex-basis를 통해 item 간 늘어날 때, 줄어들 때 차지 비율을 쉽게 지정할 수 있다.

 

 

다 묶어서 flex:로 grow, shrink, basis를 작성할 수 있다.

 

 

align-self를 통해 컨테이너에서 벗어나서, 개별 item 마다의 위치를 지정할 수 있다!

 

 

---

https://flexboxfroggy.com/#ko

 

 

1. 처음

 

2. flex-direction: column-reverse;

column으로 바뀌고, 그 순서도 역전되었다.

 

 

3. flex-wrap: wrap-reverse;

 

기본 wrap으로 할 경우, 노란 색이 튀어나와 다음 줄로(세로 기준으로 바뀜) 가야한다.

 

 

wrap-reverse로 할 경우, wrap 상태에서 대칭이 한번 더 일어난다.

 

 

4. justify-content: center;

현재 기준, direction이 column이므로 justify(중심 축)은 세로 방향이 된다. 따라서 세로 방향의 value를 가운데로 정렬시킬 수 있다.

 

 

 

5. align-content: space-between;

세로 방향이 기준이므로, space-between을 통해 양 끝으로 밀어낼 수 있다.

 

 

+ align-content vs align-items 차이

둘 다 반대 축 기준 정렬인 공통점이 있다. 차이는 다음과 같다.

 

- align-items : flex line 기준으로 아이템을 정렬한다.

- align-content: flex line을 정렬한다. ->nowrap일 경우 의미가 없다. flexline이 하나밖에 없기 때문이다.

반대로 align-items는 line이 한 줄이라도, 그 라인 안에서 정렬 가능하기 때문에 작동한다.

위의 예시에서 align-content / align-items는 동일한 기능을 한다.

flex-wrap: nowrap일 경우, align-content는 동작 안한다.

 

-> 우선 wrap이면 align-content 사용하고, nowrap이면 align-items 사용하면 될 듯하다.