flexbox2

• [HTML] Flex, nth-child, Grid, Block, vw, vh, position 예제들 반응형 웹 페이지를 모바일 단위로 만들어서 화면이 점점 커질때 이런 단위를 한 줄에 여러개 표현 하게 되는데 그 방법을 예를 들어 알려줘 반응형 기본 레이아웃 반응형 웹 페이지를 제작할 때, CSS의 미디어 쿼리를 사용하여 화면 크기에 따라 레이아웃을 조정할 수 있습니다. 예를 들어, 모바일 화면에서는 단위가 하나씩 표시되고 화면이 커질수록 여러 개의 단위가 한 줄에 표시되도록 설정할 수 있습니다.아래는 이러한 레이아웃을 설정하는 예제입니다. Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 설명기본 스타일: .container 클래스는 flex 레이아웃을 사용하여 아이템들을 배치합니다. .i.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25.

• [CSS] 2 x 2 이상의 자식을 가진 요소의 flex 레이아웃으로 2 x 2 이상의 자식을 가진 요소의 flex로 할 수 있는 것들을 설명해줘 Flexbox 레이아웃을 사용하여 2개 이상의 자식을 가진 요소를 다양한 방식으로 구성할 수 있습니다. Flexbox는 웹 페이지의 레이아웃을 디자인하는 데 매우 유용하며, 자식 요소들을 정렬하고 공간을 배분하는 데 도움을 줍니다. 다음은 Flexbox를 사용하여 2개 이상의 자식을 가진 요소에서 할 수 있는 몇 가지 주요 작업입니다.1. 주 축 정렬 (Main Axis Alignment)justify-content 속성을 사용하여 주 축(main axis)에서 자식 요소들을 정렬할 수 있습니다.flex-start: 자식 요소들을 주 축의 시작 부분에 정렬합니다.flex-end: 자식 요소들을 주 축의 끝 부분에 정렬합니다.ce.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24.