CSS

CSS 기초

웹 페이지의 스타일과 레이아웃을 지정하는 언어입니다.

CSS 기초

선택자

CSS 스타일을 적용하는 방법을 설명합니다.

방식	설명	예시
인라인 스타일	HTML 요소의 style 속성에 직접 스타일을 적용	<p style="color: blue;">텍스트</p>
내부 스타일 시트	HTML 문서 내부에 <style> 태그를 사용하여 정의	<style> p { color: red; } </style>
외부 스타일 시트	별도의 .css 파일을 링크하여 스타일을 정의	<link rel="stylesheet" href="styles.css">

스타일 적용 방식

박스 모델 Box Model

스타일 속성

유연한 레이아웃을 적용하기 위한 FLEX, GRID 레이아웃을 다룹니다.

Flex 레이아웃 속성은은 1차원 레이아웃을 다양하고 쉽게 만들게 해주는 스타일 속성이고,

Grid 레이아웃 속성은은 2차원 레이아웃을 다양하고 쉽게 만들게 해주는 스타일 속성입니다.

레이아웃 속성

FLEX

GRID

특정 규칙을 수행하도록 지시하는 문장입니다.

@ 기호로 시작하며, 그 뒤에 규칙 유형을 나타내는 식별자가 따라옵니다.

@ 규칙 (At-rules)

UI 요소

반응형 웹 디자인

실전 사이트

피그마 설치

상품정보 UI