728x90 웹디자인6 CSS 기초 강의 6편: 반응형 웹 디자인과 미디어 쿼리 1. 반응형 웹 디자인이란?반응형 웹 디자인(Responsive Web Design)은 다양한 화면 크기와 해상도에 맞춰 웹 페이지의 레이아웃과 스타일을 동적으로 조정하는 웹 디자인 방식입니다. 반응형 웹 디자인을 사용하면 디바이스에 상관없이 사용자에게 최적화된 웹 페이지를 제공합니다.2. 미디어 쿼리(Media Query)미디어 쿼리는 특정 조건(화면 크기, 해상도 등)에 따라 CSS 스타일을 적용하는 방법입니다. 화면 너비를 기준으로 모바일, 태블릿, 데스크톱 등 디바이스별 스타일을 지정할 수 있습니다.미디어 쿼리 기본 문법@media (조건) { /* 조건이 참일 때 적용할 CSS */}예제: 화면 너비 조건/* 화면 너비가 768px 이하일 때 */@media (max-width: 768px.. 2024. 11. 21. 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. CSS 기초 강의 2편: CSS 선택자와 우선순위 1. 기본 선택자1) 전체 선택자(*)전체 선택자는 페이지의 모든 HTML 요소에 스타일을 적용할 때 사용합니다. 주로 기본 스타일을 초기화하거나 공통 스타일을 설정할 때 사용됩니다.* { margin: 0; padding: 0;}2) 태그 선택자태그 선택자는 특정 HTML 태그에 스타일을 적용합니다. 태그 이름을 선택자로 사용하며, 같은 태그를 가진 모든 요소에 스타일이 적용됩니다.p { color: blue; font-size: 18px;}3) 클래스 선택자(.)클래스 선택자는 특정 클래스 이름을 가진 요소에 스타일을 적용하며, 여러 요소에 중복 적용이 가능합니다. 클래스 이름 앞에 .을 붙여 사용합니다.클래스 선택자를 사용한 문장입니다..highlight { backgro.. 2024. 11. 17. CSS 기초 강의 1편: CSS의 기본 개념과 문법 1. CSS란?CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 언어입니다. HTML이 웹 페이지의 구조와 콘텐츠를 나타낸다면, CSS는 이 콘텐츠의 색상, 폰트, 간격, 배경 등을 설정하여 웹 페이지의 시각적인 스타일을 지정합니다.2. CSS 문법CSS 문법은 **선택자(selector)**와 **선언(declaration)**으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 선택하고, 선언은 스타일 속성(property)과 그 값(value)을 지정합니다.선택자 { 속성: 값;}예제h1 { color: blue; font-size: 24px;} 선택자: h1은 스타일을 적용할 HTML 요소를 선택합니다.속성: color와 fo.. 2024. 11. 16. 이전 1 다음 728x90
