1. 플렉스 박스 레이아웃 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생기면 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 1️⃣ 플렉스 컨테이너 (부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소이다. 2️⃣ 플렉스 항목 (자식 박스) : 플렉스 박스 레이아웃을 적용할 대상이다. 3️⃣ 주축 (main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다. (기본적으로 왼쪽에서 오른쪽으로 수평방향으로 배치한다.) 4️⃣ 교차축 (cross axis) : 주축과 교차하는 방향을 말하며, 기본적으로 위에서 아래로 배치한다. 2. 플렉스 박스 항목을 배치하는 속성 justify-content : 주축 방향의 정렬 방..

1. display display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 때 사용한다. display 속성값 1️⃣ block : 인라인 레벨 요소를 블록 레벨 요소로 만든다. 2️⃣ inline : 블록 레벨 요소를 인라인 레벨 요소로 만든다. 3️⃣ inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다. 4️⃣ none : 해당 요소를 화면에 표시하지 않는다. 2. float float 속성은 웹 요소를 문서 위에 떠 있게 만든다. float 속성값 1️⃣ l..