728x90
CSS (Cascading Style Sheets)는 HTML 문서에 디자인(스타일)을 적용하기 위해 별도로 개발된 스타일 언어입니다.
📌 HTML에 CSS 적용 방법
Inline 방식
<p style="color: red;">Hello World</p>Internal 방식 (Style 태그 사용)
<head> <style> p { color: blue; } </style> </head> <body> <p>Hello World</p> </body>External 방식 (CSS 파일 분리)
<link rel="stylesheet" href="style.css">
🎯 CSS 선택자란?
HTML에 명시된 Tag, ID, Class 등 특정 요소를 선택하여 스타일을 지정하는 문법입니다.
선택자를 활용하면 다음과 같은 요소를 타겟팅할 수 있습니다:
- 부모/자식
- 첫 번째/마지막 요소
- 특정 위치 (n번째) 등
📂 선택자 종류
🔸 Tag 선택자
ul {
list-style: none;
}
table {
border-collapse: collapse;
}🔸 ID 선택자
#header {
background-color: gray;
}🔸 Class 선택자
.menu {
font-weight: bold;
}🔸 자손/자식 선택자
ul li {
color: blue;
} /* 모든 ul 하위 li */
ul > li {
color: green;
} /* ul의 직계 자식 li만 */
ul.ol {
margin: 10px;
} /* ul과 ol을 동시에 지정 */🔸 Pseudo-class Selector (가상 클래스 선택자)
a:active {
color: green;
}
a:hover {
color: green;
}
a:visited {
color: purple;
}
input:focus {
border-color: blue;
}🔺 선택자 특징 및 우선순위
- 나중에 작성된 스타일이 우선순위가 높음
:visited는 보안상 제약이 있음:focus는 사용자 편의를 위해 보통 가장 마지막에 작성
🎮 선택자 학습 팁
- CSS 선택자 게임: http://flukeout.github.io/
- CSS 선택자 정리 모음: https://bluebreeze.co.kr/158
- 모든 선택자가 정리된 내용 Tip.2에 수록된 내용이다.
Tag Option
📘 추가 참고
- Tag 속성 설명: https://opentutorials.org/course/2418
728x90
'Publishing > Css' 카테고리의 다른 글
| Css란[4] (0) | 2023.04.15 |
|---|---|
| Css란[3] (0) | 2023.04.15 |
| CSS란[2] (0) | 2023.04.15 |