CSS display와 레이아웃 기본에 대해 공부한 것을 기록합니다. 이 글은 mdn과 css-tricks을 토대로 작성되었습니다.
block은 기본적으로 부모의 가로축을 모두 차지한다. 같은 부모 옆에 다른 어떤 요소도 허용하지 않는다. (따로 위치를 옮기지 않는 한)
레고 블럭과 같은 개념이다. 위로는 쌓을 수 있지만, 옆에서는 요소가 붙어있을 수 없다.
대표적으로 div
가 block요소다.
인라인 요소는 기본적으로 네모 상자처럼 딱딱 떨어지는 요소가 아니다. 물 흘러가듯이 공간이 남게 되면 그 자리에 끼려고 하는 요소.
inline은 height와 width를 가질 수 없다. 또한 margin을 위아래로 가질 수 없다.
따라서 인라인이 텍스트에 가깝다고 생각하면 이해가 쉬워진다.
대표적으로 span
이 inline요소이다.
블록 요소로써의 장점은 모두 가져가면서, 블록 특유의 '옆에 요소를 허용하지 않는 특징'은 없앤다. 그럼으로써 한 라인에 여러 블록이 있을 수 있게 된다.
그러나 여전히 문제가 있다.
float
은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티입니다. 하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 도구가 됩니다. 시작에 앞서float
을 학습하기 좋은 자료 url을 드립니다. 우선은 가볍게float
이 어떠한 속성인지 파악해보시기 바랍니다.
float
속성에는 left
, right
, none
가운데 하나를 값으로 줄 수 있다.
간단하다. 요소를 왼쪽에 띄우고 싶다면 left를, 오른쪽에 띄우고 싶다면 right를 주면 된다.
flex의 핵심은 레이아웃을 더 효과적으로 짤 수 있게 해주면서, 자식 요소들의 사이즈에 상관없이 자식 요소들의 공간 배치를 결정할 수 있다는 것에 있다.
flexbox는 flex-direction과 justify-content와 align-items로 모든 공간 분배가 결정된다고 볼 수 있다.
main axis(주축)과 cross axis(교차축) 개념을 알아야 한다.
flexbox의 방향은 디폴트로 가로축, 즉 row이다. 그러나 flex-direction을 통해서 flexbox의 방향을 바꿔줄 수 있다.
flexbox의 방향은 디폴트로 가로축, 즉 row이다.
세로축이다.
본질적으로 columne-reverse는 column direction을, row-reverse는 row direction을 만들지만 item들의 순서를 반대로 만든다. html element들에 접근하기 어려운 경우에 사용한다.
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: 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 /
flex-wrap 속성을 통해 items가 여러 줄 이상이고 여백이 있을 경우만 사용 가능하다. justify-content의 교차축 버전이라고 생각한다.
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!
Flex Item의 순서를 설정.
Item의 순서를 설정합니다.
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.
음수가 허용됩니다.
HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용합니다.
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 Item의 감소 너비 비율을 설정.
flex-shrink 또한 flexbox의 공간이 남는 경우에만 적용됨.
모든 flexbox의 자식 요소는 디폴트로 1의 flex-grow값을 가진다.
flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정.
참고: auto 값을 가지지 않은 flex-basis와 width(flex-direction: column인 경우 height) 값을 동시에 적용한 경우 flex-basis가 우선합니다.
flex-grow, flex-shrink, flex-basis의 단축 속성.
float 속성을 보다가 flex를 보니까 정말 편한 레이아웃 방식이라는 걸 느낀다.
경험이 부족해서 기술의 우열을 바로 단정짓는 것 같기도 하다. 같은 지식이라도 누가 바라보느냐에 따라 다른 결과가 나오듯이, float 또한 누군가는 야무지게 쓰고 있을지도 모른다.