FLEX2 KDT 5th 웹개발자 입문 수업 5일차 1. Position 요소의 위치 지정 기준 - static : 기준 없음 기준이 없으므로 top, bottom, left, right 를 사용할 수 없음! - relative : 요소 자신(상단좌측 모서리)을 기준 배치 전 자리(상단좌측 모서리를 기준으로)에서 top, bottom, left, right 로 배치를 변경해줄 수 있다. *배치 전 자리는 그대로 비어있게 되므로 기본적으로 다음 요소가 침범할 수 없다. - absolute : 위치 상 부모 요소를 기준 -> 부모의 요소의 위치를 확인해야 함 보통 부모 요소의 위치를 잡아준다음, position : relative;(static만 아니면 됨) 로 설정해두고 그 아래 자식을 position : absolute; 로 둬야 제대로 배치가 먹힌다. .. 2023. 2. 1. FlexBox 정리 인터페이스 안 아이템 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 즉, 레이아웃을 다룰 때 1번에 1개의 차원(행 또는 열)을 다룬다는 의미임. (2차원 모델인 Grid 레이아웃도 있음) flex-direction 속성을 사용하여 축을 지정하며 주축(Main Axis)과 교차축(Cross Axis)으로 flexbox를 동작한다 flex-direction 값 동작 주축 row row-reverse 인라인 방향으로 행을 따름 column column-reverse 블록 방향으로 열을 따름 교차축 row row-reverse 열 방향을 따름 column column-reverse 행 방향을 따름 reverse는 말그대로 시작선과 끝선을 반대로 바꾼다는 것임 주축과 교차축은 서로 수직임을 잊지 .. 2022. 12. 14. 이전 1 다음
