CSS 기초

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

•

스타일 우선순위

•

선택자

•

선택자 우선순위

•

스타일 적용 방식

•

박스모델

•

스타일 속성

•

레이아웃 속성

스타일 우선순위는 CSS 스타일이 충돌할 때 어떤 스타일이 적용될지를 결정하는 규칙입니다.

우선순위	설명
인라인 스타일	HTML 요소의 style 속성으로 정의된 스타일. 가장 높은 우선 순위를 가짐.
내부 스타일 시트	HTML 문서 내 <style> 태그 안에 정의된 스타일.
외부 스타일 시트	별도의 .css 파일에 정의된 스타일.
브라우저 기본 스타일	브라우저가 기본적으로 제공하는 스타일. CSS가 적용되지 않았을 때 사용.

CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 방법입니다.

CSS 선택자의 우선순위는 스타일 충돌 시 적용될 스타일을 결정하는 규칙입니다.

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

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

모든 HTML 요소는 박스 형태로 렌더링되며, 박스모델은 요소의 크기와 위치를 조정하는 데 사용됩니다.

CSS를 사용하여 HTML 요소의 스타일을 정의하는 다양한 속성입니다.

•

기본 레이아웃 속성

•

FLEX & GRID 레이아웃