CSS 핵심강좌13 [CSS 핵심강좌] 6. Grid CSS Grid는 웹 페이지의 레이아웃을 구성하기 위한 2차원 격자 시스템입니다. Grid를 사용하면 열과 행을 쉽게 조절할 수 있으며, 복잡한 레이아웃을 효율적으로 구현할 수 있습니다. 이 강좌에서는 Grid의 기본 개념과 사용 방법에 대해 알아보겠습니다. Grid 컨테이너 Grid를 사용하려면 먼저 Grid 컨테이너를 설정해야 합니다. Grid 컨테이너는 display: grid 속성을 적용한 요소입니다. Grid 컨테이너 내부의 직계 자식 요소들을 Grid 아이템이라고 합니다. .container { display: grid; } Grid 템플릿 Grid 템플릿을 사용하여 격자의 행과 열의 크기를 설정할 수 있습니다. grid-template-columns: 열의 크기를 설정합니다. grid-tem.. 2023. 3. 5. [CSS 핵심강좌] 5. Flexbox CSS Flexbox는 요소들을 일차원적인 열 또는 행으로 배치하고, 공간을 쉽게 조절할 수 있는 레이아웃 기법입니다. 이 강좌에서는 Flexbox의 기본 개념과 사용 방법에 대해 알아보겠습니다. Flex 컨테이너 Flexbox를 사용하려면 먼저 Flex 컨테이너를 설정해야 합니다. Flex 컨테이너는 display: flex 또는 display: inline-flex 속성을 적용한 요소입니다. Flex 컨테이너 내부의 직계 자식 요소들을 Flex 아이템이라고 합니다. .container { display: flex; } 주 축과 교차 축 Flexbox에서는 주 축(main axis)과 교차 축(cross axis)이라는 개념이 중요합니다. 주 축은 Flex 아이템들이 나열되는 방향을 결정하고, 교차 축.. 2023. 3. 4. [CSS 핵심강좌] 4. 레이아웃 웹 페이지 레이아웃은 페이지의 구조와 요소들의 배치를 결정합니다. CSS를 이용하여 다양한 레이아웃을 구현할 수 있습니다. 이 강좌에서는 주요 레이아웃 기법에 대해 알아보겠습니다. 정적 레이아웃 (Static Layout) 정적 레이아웃은 웹 페이지의 요소들을 고정된 크기와 위치에 배치합니다. 주로 position: static과 position: relative를 사용하여 구현합니다. .box { position: static; width: 200px; height: 200px; } 고정 레이아웃 (Fixed Layout) 고정 레이아웃은 웹 페이지의 요소들을 뷰포트에 상대적인 고정된 위치에 배치합니다. 스크롤이 발생해도 요소의 위치가 변하지 않습니다. 주로 position: fixed를 사용하여 구현.. 2023. 3. 4. [CSS 핵심강좌] 3. 박스모델 CSS Box Model은 HTML 요소에 대해 생성되는 사각형 상자를 설명하는 웹 디자인에서 근본적인 개념입니다. 각 상자는 콘텐츠, 패딩, 테두리 및 마진으로 구성됩니다. 콘텐츠(Content): 실제 요소 콘텐츠(텍스트, 이미지 등)가 들어가는 영역입니다. 패딩(Padding): 콘텐츠를 감싸며 콘텐츠와 경계 사이의 공간을 제공합니다. 패딩은 투명하며 padding 속성을 사용하여 지정할 수 있습니다. 테두리(Border): 패딩을 감싸며 border-width, border-style 및 border-color 속성을 사용하여 스타일을 지정할 수 있습니다. 마진(Margin): 테두리를 감싸며 상자와 다른 요소 간의 공간을 제공합니다. margin 속성을 사용하여 지정할 수 있습니다. CSS Bo.. 2023. 3. 4. [CSS 핵심강좌] 2. 선택자 CSS 선택자는 웹 페이지에서 요소를 선택하고 스타일을 적용하는 데 사용되는 메커니즘입니다. 여러 유형의 선택자가 있습니다 1. 요소 선택자 특정 유형의 모든 요소를 선택합니다. 예를 들어, 선택자 "p"는 페이지의 모든 "p" 요소를 선택합니다. p { color: red; } 위의 CSS 코드는 페이지의 모든 "p" 요소의 텍스트 색상을 빨간색으로 지정합니다. 2. 클래스 선택자 특정 클래스 속성을 가진 요소를 선택합니다. 클래스 선택자는 마침표 (.)와 클래스 이름으로 표시됩니다. 예를 들어, 선택자 ".highlight"는 클래스 "highlight"를 가진 모든 요소를 선택합니다. .highlight { background-color: yellow; } 위의 CSS 코드는 페이지의 클래스 속성 .. 2023. 3. 4. [CSS 핵심강좌] 1. 소개 CSS (Cascading Style Sheets)은 HTML로 작성된 문서의 외관과 형식을 설명하는 스타일 시트 언어입니다. HTML, XHTML 및 XML로 작성된 웹 페이지와 사용자 인터페이스의 프리젠테이션을 제어하는 데 사용됩니다. CSS를 사용하면 색상, 글꼴, 크기, 레이아웃 등 HTML 요소에 스타일을 적용할 수 있습니다. 이를 통해 웹 페이지의 내용과 프리젠테이션을 분리하여 웹 사이트를 유지 관리하고 업데이트하기 쉬워집니다. HTML 문서에 CSS 스타일을 적용하는 세 가지 방법이 있습니다: 1. 인라인 스타일 스타일은 "style" 속성을 사용하여 HTML 요소에 직접 적용됩니다. This text will be displayed in red. 위의 HTML 코드는 "p" 요소에 직접 적.. 2023. 3. 4. 이전 1 2 3 다음 반응형
