배치 (Position)
-
요소의 위치는 반드시 반드시 어떠한 기준을 잡고 설정해야 해요!
속성 기능 구체적 내용 position 요소의 위치를 지정 기본 : static / 가능값 : relative(요소 자신 기준), absolute(부모 요소 기준), fixed(뷰포트 기준), sticky(스크롤 영역 기준) top bottom left right 위치 지정 기본 : auto, 가능값 : 양수 음수
❗️❗️ position : relavtive를 이용하는 배치는 거의 사용하지 않아요. 대부분 absolute 써요. 다른 요소들의 위치가 혼동이 올 수 있기 때문이예요.
-
relative를 쓰면 동급 친구들과의 상호작용이 유지됩니다. -
반면에
absolute를 쓰면 동급 친구들과의 상호작용이 무너집니다. -
position : absolute를 쓰려면 위치상부모 요소를 지정해줘야 해요. 따라서 구조 상에서 부모한테 position: relative를 써줘야해요. ( position : relavtive 는 대부분 이 때만 사용됩니다.) -
개념이 헷갈릴 수 있어요. 부모를 계속 찾아간다고 생각하세요. 부모를 찾아갔는데 그 부모가 position : 값으로 지정이 되어있다면 사용가능하겠죠?
※ absolute(부모 요소 기준), fixed(뷰포트 기준)를 사용하면 display: block이 기본적으로 적용됩니다.
정렬 (flex)
-
수평, 수직 정렬을 위해 사용합니다.
-
부모 요소에
dispaly : flex;주면 child들이 수평정렬 됩니다. 그러면, 부모를 flex container라고 부르고 child들을 flex items라고 부릅니다.body { display : flex; /* inline-flex, inline, block을 넣을 수 있어요. */ }부모요소 속성 기능 자세히 flex-direction 주축 설정 기본:row(수평), row-reverse, column(수직), column-reversejustify-content 주축의 정렬 방법(수평정렬, 가로정렬) 기본:flex-start 가능값:flex-end,centeralign-content 교차 축의 여러 줄정렬 방법(수직정렬 느낌)기본:stretch 가능값:flex-start,flex-end,center
stretch는 부모 container를 꽉 채우면서 정렬 그니깐 쭉 늘인다는거죠, flex-start는 child들이 다닥다닥 붙게 모두 start를 기준으로 정렬합니다.align-items 한 줄의 수직 정렬기본:stretch 가능값:flex-start,flex-end,center,baseline(문자 기준선)
그림으로 확인해볼까요?
-
align-content: 한 덩어리 전체를 움직인다고 생각하세요.
-
align-items: 각 개별 요소에 대한 정렬이라고 생각하면 됩니다.
자식요소 속성 기능 자세히 flex-wrap 자식요소 줄바꿀까 말까 기본:no-wrap, wrapno-wrap은 한줄에서 다하려고해서 찌그러지고 wrap은 넘치면 줄바꿈해줘요flex-grow 각 child가 가로로 늘어나는 비율 기본:0 가능값:1, ...flex-shrink 가로로 줄어드는 비율 기본:1 가능값: 감소비율0으로 두면 parent 너비가 child 너비보다 작아도 child는 줄어들지 않아요.flex-basis flex-grow를 위한 기준,기본 너비 기본:auto(content(글자) 너비) 가능값: 00으로 설정하면 눈으로 봤을 때 레이아웃이 정말 제가 원하는 기준만큼 나뉩니다.order flex item의 순서 기본:0 (순서없음) 가능값 : 숫자숫자가 작을수록 먼저 나와요. html구조 안바꿔도 원하는대로 출력할 수 있어요.flex-grow, flew-basis 예시
저는 가로 비율을 맞춰서 레이아웃을 작성해야 한다면 편하게 flex-basis를 0으로 설정하고 flex-grow를 설정할 것 같아요.
👉 flex를 가로라고 생각하세요 align을 세로라고 생각하세요. 여러 줄이면 align-content 한 줄이면 align-items 사용하면 됩니다!!
