CSS 기초
CSS (Cascading Style Sheets)
웹 페이지의 스타일과 레이아웃을 지정하는 언어입니다.
•
스타일 우선순위
•
선택자
•
선택자 우선순위
•
스타일 적용 방식
•
박스모델
•
스타일 속성
•
레이아웃 속성
스타일 우선순위
스타일 우선순위는 CSS 스타일이 충돌할 때 어떤 스타일이 적용될지를 결정하는 규칙입니다.
우선순위 | 설명 |
인라인 스타일 | HTML 요소의 style 속성으로 정의된 스타일. 가장 높은 우선 순위를 가짐. |
내부 스타일 시트 | HTML 문서 내 <style> 태그 안에 정의된 스타일. |
외부 스타일 시트 | 별도의 .css 파일에 정의된 스타일. |
브라우저 기본 스타일 | 브라우저가 기본적으로 제공하는 스타일. CSS가 적용되지 않았을 때 사용. |
선택자
CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 방법입니다.
선택자 종류 | 설명 | 예시 |
요소 선택자 | HTML 요소의 이름으로 선택 | p, h1 |
클래스 선택자 | 클래스 속성 값을 사용하여 선택 | .class-name |
아이디 선택자 | 아이디 속성 값을 사용하여 선택 | #id-name |
속성 선택자 | 특정 속성을 가진 요소를 선택 | [type="text"] |
복합 선택자 | 여러 선택자를 조합하여 사용 | div p, ul > li |
선택자 우선순위
CSS 선택자의 우선순위는 스타일 충돌 시 적용될 스타일을 결정하는 규칙입니다.
선택자 종류 | 설명 | 우선순위 |
인라인 스타일 | HTML 요소의 style 속성 | 1000 |
아이디 선택자 | 단일 아이디 선택자 | 100 |
클래스 선택자 | 클래스, 속성, 가상 클래스 선택자 | 10 |
요소 선택자 | HTML 요소의 이름 | 1 |
스타일 적용 방식
CSS 스타일을 적용하는 방법을 설명합니다.
방식 | 설명 | 예시 |
인라인 스타일 | HTML 요소의 style 속성에 직접 스타일을 적용 | <p style="color: blue;">텍스트</p> |
내부 스타일 시트 | HTML 문서 내부에 <style> 태그를 사용하여 정의 | <style> p { color: red; } </style> |
외부 스타일 시트 | 별도의 .css 파일을 링크하여 스타일을 정의 | <link rel="stylesheet" href="styles.css"> |
박스모델
모든 HTML 요소는 박스 형태로 렌더링되며, 박스모델은 요소의 크기와 위치를 조정하는 데 사용됩니다.
구성 요소 | 설명 |
콘텐츠
(Content) | 요소의 실제 내용 |
패딩
(Padding) | 콘텐츠와 테두리 사이의 여백 |
테두리
(Border) | 패딩과 마진을 감싸는 선 |
마진
(Margin) | 요소와 다른 요소 사이의 외부 여백 |
스타일 속성
CSS를 사용하여 HTML 요소의 스타일을 정의하는 다양한 속성입니다.
속성 종류 | 설명 | 예시 |
색상 | 텍스트 및 배경 색상을 설정 | color, background-color |
폰트 | 텍스트의 글꼴, 크기, 두께 등을 설정 | font-family, font-size |
텍스트 | 텍스트의 정렬 및 장식 등을 설정 | text-align, text-decoration |
레이아웃 속성
•
기본 레이아웃 속성
속성 종류 | 설명 | 예시 |
디스플레이 | 요소의 표시 방식 | display: block; |
위치 | 요소의 위치를 정의 | position: relative; |
플로트 | 요소의 흐름을 제어 | float: left; |
•
FLEX & GRID 레이아웃
특징 | FLEX | GRID |
차원 | 1차원 레이아웃 (가로 또는 세로) | 2차원 레이아웃 (행과 열) |
정렬 방식 | 요소를 가로 또는 세로 방향으로 배치 | 요소를 행과 열을 기준으로 배치 |
사용 목적 | 간단한 레이아웃, 정렬과 정돈이 필요한 상황 | 복잡한 레이아웃을 구조화하고 배치할 때 유리 |
폰트 사이트
•
google fonts
•
Dafont
•
네이버 글꼴
•
눈누
