WebDev/HTML & CSS16 [기초]CSS 그리드(Grid) CSS Grid 레이아웃은 웹 페이지의 복잡한 2차원 레이아웃을 간편하게 구성할 수 있는 강력한 레이아웃 시스템입니다. 그리드는 행(row)과 열(column)을 사용하여 컨테이너 안에 아이템을 배치합니다. CSS Grid는 주로 레이아웃의 큰 틀을 잡는 데 사용되며, CSS Flexbox와 함께 사용하면 더욱 유연한 디자인을 만들 수 있습니다. 기본 구성 요소그리드 컨테이너(Grid Container): 그리드 레이아웃이 적용되는 부모 요소입니다.그리드 아이템(Grid Items): 그리드 컨테이너 내의 자식 요소들입니다. 그리드 컨테이너 속성1. display: 그리드 컨테이너를 정의합니다.값: grid | inline-grid.container { display: grid;} 2. grid-te.. 2024. 8. 20. [기초]CSS 플렉스박스(FlexBox) Flexbox(유연한 박스 레이아웃 모듈)는 복잡한 레이아웃을 간편하게 구성할 수 있도록 설계된 1차원 레이아웃 모델입니다. Flexbox는 요소를 정렬하고 공간을 분배하며, 다양한 화면 크기와 장치에서도 유연하게 레이아웃을 조정할 수 있습니다. Flexbox의 기본 구성 요소Flex 컨테이너: Flexbox 레이아웃의 부모 요소로, 자식 요소들을 Flex 아이템으로 취급합니다.Flex 아이템: Flex 컨테이너 내의 직속 자식 요소들입니다. Flex 컨테이너 속성1. display: Flex 컨테이너를 정의합니다.값: flex | inline-flex.container { display: flex;} 2. flex-direction: Flex 아이템의 주 축(main axis)을 설정합니다.값: r.. 2024. 8. 19. [기초]CSS 디스플레이와 포지션 속성(display, position) display와 position 속성은 요소의 배치와 레이아웃에 중요한 역할을 합니다. 각각의 속성들은 요소의 보이는 방식과 위치를 조정할 수 있게 해줍니다. display 속성display 속성은 요소가 웹 페이지에서 어떻게 표시되고 배치되는지를 결정합니다. 주요 값으로는 block, inline, inline-block, none, flex, grid 등이 있습니다. 주요 값 1. block: 요소를 블록 레벨 요소로 표시합니다.특징:항상 새로운 줄에서 시작합니다.전체 너비를 차지합니다.블록 레벨 요소의 예: , , , div { display: block;} 2. inline: 요소를 인라인 레벨 요소로 표시합니다.특징:같은 줄에 다른 요소들과 함께 배치됩니다.width와 height를 설정할.. 2024. 8. 18. [기초]CSS 박스 모델과 박스 사이징(Box Model, Box Sizing) 박스 모델 (Box Model)CSS 박스 모델은 HTML 요소를 렌더링 할 때 각 요소의 크기와 여백을 계산하는 데 사용되는 개념입니다. 박스 모델은 요소를 네 개의 주요 부분으로 나누어 설명합니다: 콘텐츠, 패딩, 테두리, 여백. 각 부분은 요소의 전체 크기와 레이아웃에 영향을 미칩니다. 구성 요소콘텐츠 영역 (Content Area): 요소의 텍스트나 이미지 등 실제 콘텐츠가 들어가는 영역입니다. width와 height 속성으로 크기를 지정할 수 있습니다.패딩 (Padding): 콘텐츠 영역과 테두리 사이의 내부 간격입니다. 패딩은 콘텐츠 영역을 둘러싸며, 배경색이나 배경 이미지가 패딩 영역까지 확장됩니다.속성: padding-top, padding-right, padding-bottom, pad.. 2024. 8. 16. [기초]CSS 여백, 패딩, 테두리 스타일(margin, padding, border) CSS에서 여백, 패딩, 테두리는 요소와 그 주변 요소들 간의 공간을 관리하는 중요한 속성들입니다. 이 속성들을 사용하면 웹 페이지의 레이아웃과 시각적 스타일을 세밀하게 조정할 수 있습니다. 여백 (Margin)여백은 요소의 경계와 그 주변 요소 사이의 외부 공간을 의미합니다. margin 속성을 사용하여 설정하며, 단일 속성이나 개별 속성으로 지정할 수 있습니다. 1. 기본 속성margin: 모든 방향의 여백을 한 번에 설정할 수 있는 단축 속성입니다.(값이 4개일 경우 순서대로 시계방향으로 적용)div { margin: 20px; /* 모든 방향에 20px 여백 */}div { margin: 10px 20px; /* 상하 10px, 좌우 20px */}div { margin: 10px 20px.. 2024. 8. 15. [기초]CSS 배경 스타일(background) CSS에서 배경 스타일을 설정하는 속성들은 요소의 배경을 이미지나 색상으로 꾸미고, 이를 다양한 방식으로 조정하는 데 사용됩니다. 배경 스타일 속성1. 배경 색상 (background-color)요소의 배경 색상을 지정합니다.div { background-color: #f0f0f0; /* HEX 색상 */ background-color: rgb(240, 240, 240); /* RGB 색상 */ background-color: rgba(240, 240, 240, 0.8); /* RGBa 색상 */ background-color: hsl(0, 0%, 94%); /* HSL 색상 */} 2. 배경 이미지 (background-image)요소의 배경 이미지를 지정합니다.div { background.. 2024. 8. 14. 이전 1 2 3 다음
