728x90 css레이아웃3 CSS 기초 강의 5편: Grid 레이아웃을 활용한 2차원 레이아웃 구성하기 1. Grid 레이아웃 기본 개념Grid 레이아웃은 **그리드 컨테이너(Grid Container)**와 **그리드 아이템(Grid Item)**으로 구성됩니다.그리드 컨테이너: display: grid로 정의된 부모 요소로, 그리드 레이아웃을 구성할 수 있게 합니다.그리드 아이템: 그리드 컨테이너 내부의 자식 요소로, 그리드의 각 셀을 차지합니다..container { display: grid; /* 그리드 컨테이너 설정 */}2. 기본 그리드 설정1) grid-template-columns와 grid-template-rows그리드의 열과 행의 크기를 정의합니다. 각각 열과 행의 수를 지정하며, px, %, fr(fraction), auto 등 다양한 단위를 사용할 수 있습니다..container.. 2024. 11. 20. CSS 기초 강의 4편: Flexbox를 사용한 유연한 레이아웃 구성하기 1. Flexbox 개념과 기본 설정Flexbox는 **플렉스 컨테이너(Flex Container)**와 **플렉스 아이템(Flex Item)**으로 구성됩니다.플렉스 컨테이너: display: flex를 적용한 부모 요소로, 플렉스 아이템을 배치하고 정렬하는 기준이 됩니다.플렉스 아이템: 플렉스 컨테이너의 자식 요소로, 배치와 정렬이 플렉스 컨테이너의 설정에 의해 제어됩니다..container { display: flex; /* 플렉스 컨테이너 설정 */}2. 주요 Flexbox 속성1) flex-direction플렉스 아이템의 배치 방향을 설정합니다.row (기본값): 아이템을 가로 방향으로 배치합니다.row-reverse: 아이템을 가로 방향으로 배치하지만, 반대 순서로 표시합니다.column.. 2024. 11. 19. CSS 기초 강의 3편: CSS 레이아웃 기초와 박스 모델 1. 박스 모델(Box Model) 이해하기CSS의 박스 모델은 HTML 요소가 페이지에서 차지하는 공간을 계산하는 방식입니다. 모든 HTML 요소는 하나의 **박스(Box)**로 간주되며, 각 박스는 다음과 같은 네 가지 영역으로 구성됩니다.콘텐츠(content): 텍스트나 이미지 등의 실제 콘텐츠가 위치하는 영역패딩(padding): 콘텐츠와 테두리 사이의 여백테두리(border): 요소의 경계선을 나타내는 선마진(margin): 요소와 요소 사이의 바깥 여백박스 모델 예제.box { width: 200px; height: 100px; padding: 10px; border: 2px solid black; margin: 15px;}박스 모델에서 실제 크기 계산하기위 코드에서.. 2024. 11. 18. 이전 1 다음 728x90
