반응형
스타일(Style): 스타일은 웹 페이지의 요소(텍스트, 배경, 레이아웃 등)의 시각적 속성을 정의
(e.g. 글꼴, 색상, 간격, 배경색, 크기 등을 설정)
스타일 시트(Stylesheet): 스타일 시트는 HTML 요소에 적용할 스타일을 정의한 문서
- 인라인 방식 : HTML 태그 내에 직접 스타일을 적용
<h1 style="color: blue; font-size: 24px;">Hello World!</h1>
- 내부 스타일 시트: HTML 문서의 <head> 내에 <style> 태그로 작성하는 방법
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: blue;
}
</style>
</head>
- 외부 스타일 시트: CSS 파일을 별도로 만들어 링크하는 방법
<link rel="stylesheet" href="style.css">/* style.css */
body {
background-color: lightblue;
}
h1 {
color: blue;
}
선택자
/* 요소 선택자 */
h1 {
color: red;
}
/* 클래스 선택자 */
.highlight {
background-color: yellow;
}
/* ID 선택자 */
#header {
font-size: 20px;
}
/* 속성 선택자 */
input[type="text"] {
background-color: lightgray;
}
/* 유니버설 선택자 */
* {
margin: 0;
padding: 0;
}
/* 자식 선택자 */
div > p {
color: green;
}
/* 후손 선택자 */
div p {
color: green;
}
선택자 우선도
- CSS3는 CSS의 최신 버전으로, 애니메이션, 그라디언트, 반응형 디자인 등 새로운 기능들이 추가됨.
- 애니메이션(Animation): @keyframes를 사용하여 요소에 애니메이션 효과를 줄 수 있습니다.
- 변형(Transform): rotate, scale, translate 등을 사용하여 요소를 변형할 수 있습니다.
- 그라디언트(Gradient): 배경에 색상 변화를 주는 그라디언트를 설정할 수 있습니다.
- 반응형 디자인: 미디어 쿼리(@media)를 사용하여 다양한 화면 크기에 맞게 스타일을 적용합니다.
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation: example 5s infinite;
}
- CSS 모듈(CSS Modules):
- CSS 모듈은 컴포넌트 기반의 스타일링을 위한 접근법으로, 각 컴포넌트에 독립적인 스타일을 적용하여 전역 스타일 충돌을 방지합니다. React와 같은 라이브러리에서 주로 사용됩니다.
- 기본 아이디어는 CSS 클래스를 로컬으로 제한하여, 각 컴포넌트가 고유한 스타일을 유지하도록 하는 것입니다.
- 예시: .module.css 파일을 사용하여 특정 컴포넌트에만 적용되는 클래스를 정의합니다.
실습
See the Pen CSS3 & modules by Cheolho Jang (@chiro-J) on CodePen.
반응형
'Front-End > HTML&CSS' 카테고리의 다른 글
| CSS 기초 #3 (color) (0) | 2025.06.17 |
|---|---|
| CSS 기초 #2 (font, text, paragraph, list) (0) | 2025.06.17 |
| HTML 기초 #3 (form) (1) | 2025.06.16 |
| HTML 기초 #2 (form) (0) | 2025.06.16 |
| HTML 기초 #1 (0) | 2025.06.16 |
