CSS 문법
선택자 {
속성명 : 값;
}
🔻CSS 선택자, Selector🔻
- HTML 문서에서 특정 요소를 선택하여 스타일을 적용하는 방법을 지정한다.
1. 전체 선택자
- '*' 기호로 모든 태그를 선택한다.
* {}2. 태그 선택자
- HTML 요소의 이름을 사용하여 해당 요소를 선택한다. 예를 들어, p는 모든 <p> 요소를 선택한다.
- 장점
- 사용이 쉽다.
- 같은 태그를 일괄 적용한다.
- 생산성 및 유지보수성이 향상된다.
- 단점 : 같은 태그를 일괄 적용하기에 내가 원하는 영역을 정하는 것이 복잡하다.
tag {}3. ID 선택자
- 태그에 명시된 ID 속성을 검색해서 태그를 선택한다.
- id 생성 시, 영어+숫자 조합, 숫자로 시작 불가
- 원하는 태그를 직접 선택할 수 있다.
- id는 한 페이지 내에서 유일한 값이어야 한다.
- 태그명#ID
#id{}4. class 선택자
- 태그에 명시된 class 속성을 검색해서 태그를 선택한다.
- 태그명.class
- 원하는 태그를 직접 선택할 수 있다.
- 태그명.class
.class{}5. 그룹 선택자
- 2개 이상의 선택자를 한번에 선언하는 방법이다.
- 태그이름을 생략할 수 있다.
선택자, 선택자, 선택자 {
구현부;
}6. 자식 선택자
- 특정 요소의 직계 자식으로 있는 요소를 선택한다. 예를 들어, li > span는 <ul> 안에 있는 직계 자식 <span> 요소를 선택한다.
- 별도의 식별자 없이 스타일을 적용할 수 있다.
- 정밀도가 높은 표현이다.
- HTML 구조 변경에 영향을 받는다.
- 부모선택자 > 자식 선택자
<style>
li>span {
color: red;
}
</style>7. 자손 선택자
- 별도의 식별자 없이 스타일을 적용할 수 있다.
- 중간 선택자가 생략되기 때문에 정밀도가 높으면서 범위가 넓은 표현이다.
- HTML 구조 변경에 영향을 받는다.
- 부모선택자 자손선택자
<style>
/* 자식 선택자
ul>li>span {
color: red;
}
*/
/* 자손 선택자 */
ul span {
color : blue;
}
</style>8. 인접 형제 선택자
- 인접한 형제에만 적용된다.
- 정밀도가 높고, 적용되는 범위가 좁다.
- 선택자 + 선택자
선택자 + 선택자 {
구현부;
}9. 형제 선택자
- 동일한 부모 요소를 가진 모든 형제 요소를 선택하는 CSS 선택자이다.
- 정밀도가 낮고, 적용되는 범위가 넓다.
- 선택자 ~ 선택자
선택자 ~ 선택자 {
구현부;
}10. 의사 클래스, Pseudo class
- 실제 태그에는 class 속성이 없지만, CSS에서 존재하는 클래스처럼 사용되는 클래스
- 원래는 a태그에만 적용되었지만 현재는 모든 태그에 적용이 된다.
링크 기본 서식
- 밑줄
- 마우스 포인터
- 색상
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* a 태그의 상태에 따라 각각 적용되는 클래스 */
/* 브라우저 방문 이력이 없는 링크 */
a:link {color : red;}
/* 브라우저가 방문한 이력이 있는 링크 */
a:visited {color: orange;}
/* 활성화 상태 */
a:active {color: greenyellow;}
/* 마우스 커서를 링크 위에 올린 상태 */
a:hover {color : yellow;}
</style>
</head>
<body>
<h1>링크</h1>
<a href="https://naver.com">네이버</a>
</body>
</html>위 기능 중에서 hover 제외하고는 현재 거의 사용하지 않는다.
링크의 일반적 서식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 링크의 일반적인 서식 */
a {
color : black;
text-decoration: none; /*밑줄 제거*/
}
a:hover {color:blue; text-decoration: underline;}
</style>
</head>
<body>
<h1>링크</h1>
<a href="https://naver.com">네이버</a>
</body>
</html>스타일 모듈
- 미리 클래스에 대한 스타일을 모듈로 작성해놓고 코드에서 조립하듯이 적용을 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {color: blue;}
.two {text-decoration: underline;}
.three {font-style: italic;}
.red {color : red;}
.blue {color : blue;}
.yellow {color : yellow;}
</style>
</head>
<body>
<p class="one">문단입니다.</p>
<p class="two">문단입니다.</p>
<p class="three red">문단입니다.</p>
<!-- 밑줄과 파란색 서식 적용 -->
<p class="one two">문단입니다.</p>
</body>
</html>
'WEB > CSS' 카테고리의 다른 글
| [CSS] text (색상, 정렬, 크기, 줄간격, 스타일, 두께, 단어 간격, 자간, 들여쓰기, 폰트) (0) | 2023.09.25 |
|---|---|
| [CSS] background-color, background-image, :focus (0) | 2023.09.25 |
| [CSS] 선택자 충돌 및 우선순위 점수 계산 (0) | 2023.09.25 |
| [CSS] HTML 문서에 CSS를 적용하는 방법 (0) | 2023.09.22 |
| [CSS] 기초지식(역할, 중요성, 버전 변화) (0) | 2023.09.22 |
