CSS display와 레이아웃 기본에 대해 공부한 것을 기록합니다. 이 글은 mdn과 css-tricks을 토대로 작성되었습니다.
블록과 인라인
block
block은 기본적으로 부모의 가로축을 모두 차지한다. 같은 부모 옆에 다른 어떤 요소도 허용하지 않는다. (따로 위치를 옮기지 않는 한)
레고 블럭과 같은 개념이다. 위로는 쌓을 수 있지만, 옆에서는 요소가 붙어있을 수 없다.
대표적으로 div가 block요소다.
inline
인라인 요소는 기본적으로 네모 상자처럼 딱딱 떨어지는 요소가 아니다. 물 흘러가듯이 공간이 남게 되면 그 자리에 끼려고 하는 요소.
inline은 height와 width를 가질 수 없다. 또한 margin을 위아래로 가질 수 없다.
따라서 인라인이 텍스트에 가깝다고 생각하면 이해가 쉬워진다.
대표적으로 span이 inline요소이다.
inline-block
블록 요소로써의 장점은 모두 가져가면서, 블록 특유의 '옆에 요소를 허용하지 않는 특징'은 없앤다. 그럼으로써 한 라인에 여러 블록이 있을 수 있게 된다.
그러나 여전히 문제가 있다.
- 사소하지만, 디폴트로 서로 margin을 갖고 있다.
- 반응형 디자인이 힘들다.
float 레이아웃
float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티입니다. 하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 도구가 됩니다. 시작에 앞서float을 학습하기 좋은 자료 url을 드립니다. 우선은 가볍게float이 어떠한 속성인지 파악해보시기 바랍니다.
float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다.
간단하다. 요소를 왼쪽에 띄우고 싶다면 left를, 오른쪽에 띄우고 싶다면 right를 주면 된다.
flex 레이아웃
flex의 핵심은 레이아웃을 더 효과적으로 짤 수 있게 해주면서, 자식 요소들의 사이즈에 상관없이 자식 요소들의 공간 배치를 결정할 수 있다는 것에 있다.
flexbox는 flex-direction과 justify-content와 align-items로 모든 공간 분배가 결정된다고 볼 수 있다.
flex-direction
main axis(주축)과 cross axis(교차축) 개념을 알아야 한다.
flexbox의 방향은 디폴트로 가로축, 즉 row이다. 그러나 flex-direction을 통해서 flexbox의 방향을 바꿔줄 수 있다.
row
flexbox의 방향은 디폴트로 가로축, 즉 row이다.
column
세로축이다.
column-reverse & row-reverse
본질적으로 columne-reverse는 column direction을, row-reverse는 row direction을 만들지만 item들의 순서를 반대로 만든다. html element들에 접근하기 어려운 경우에 사용한다.
justify-content
justify-content: center; / Pack items around the center /
justify-content: start; / Pack items from the start /
justify-content: end; / Pack items from the end /
justify-content: flex-start; / Pack flex items from the start /
justify-content: flex-end; / Pack flex items from the end /
justify-content: left; / Pack items from the left /
justify-content: right; / Pack items from the right /
justify-content: space-between; / Distribute items evenly
The first item is flush with the start,
the last is flush with the end /
justify-content: space-around; / Distribute items evenly
Items have a half-size space
on either end /
justify-content: space-evenly; / Distribute items evenly
Items have equal space around them /
justify-content: stretch; / Distribute items evenly
Stretch 'auto'-sized items to fit
the container /
align-items
align-items: center; / Pack items around the center /
align-items: start; / Pack items from the start /
align-items: end; / Pack items from the end /
align-items: flex-start; / Pack flex items from the start /
align-items: flex-end; / Pack flex items from the end /
align-content
flex-wrap 속성을 통해 items가 여러 줄 이상이고 여백이 있을 경우만 사용 가능하다. justify-content의 교차축 버전이라고 생각한다.
flex-wrap
flex는 디폴트로 요소들의 높이나 너비를 상관하지 않는다. 한 줄
flex doesn't care height or width of elements. it's the main characteristic(flexible) of flexbox. but you can use flex-wrap to make children as inline-block!
order
Flex Item의 순서를 설정.
Item의 순서를 설정합니다.
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.
음수가 허용됩니다.
HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용합니다.
flex-grow
flex-grow는 flexbox의 반응형 대응을 더 구체적으로 할 수 있는 속성이라고 생각하면 Flex Item의 증가 너비 비율을 설정한다. flexbox의 공간이 남는 경우에만 적용된다.
모든 Items의 총 증가 너비(flex-grow)에서 각 Item의 증가 너비의 비율 만큼 너비를 가질 수 있다. 모든 flexbox의 자식 요소는 디폴트로 0의 flex-grow값을 가진다.
위의 예시에서
first Item은 총 너비의 25%(1/4)을,
second Item은 총 너비의 50%(2/4)를,
third Item은 총 너비의 25%(1/4)을 가지게 된다.
flex-shrink
Flex Item의 감소 너비 비율을 설정.
flex-shrink 또한 flexbox의 공간이 남는 경우에만 적용됨.
모든 flexbox의 자식 요소는 디폴트로 1의 flex-grow값을 가진다.
flex-basis
flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정.
참고: auto 값을 가지지 않은 flex-basis와 width(flex-direction: column인 경우 height) 값을 동시에 적용한 경우 flex-basis가 우선합니다.
flex
flex-grow, flex-shrink, flex-basis의 단축 속성.
내 생각
float 속성을 보다가 flex를 보니까 정말 편한 레이아웃 방식이라는 걸 느낀다.
경험이 부족해서 기술의 우열을 바로 단정짓는 것 같기도 하다. 같은 지식이라도 누가 바라보느냐에 따라 다른 결과가 나오듯이, float 또한 누군가는 야무지게 쓰고 있을지도 모른다.
