武裝
CSS 기본 선택자 본문
선택자(selector)
- 웹문서에서 특정 요소를 선택할 때 사용.
- 선택 → 스타일 적용, 이벤트 발생
- 요소 : 태그를 적용한 것을 뜻한다.
(ex) <p> 텍스트 단락 지정 </p> - 태그 : <p> 요소 : 텍스트 단락 지정
전체 선택자 (universal selector)
- 스타일을 문서의 모든요소에 적용할때 사용
- * { 속성: 값; ...... }
...
<style>
* {
color: aquamarine;
}
</style>
...
(타입, 아이디, 클래스 선택자의 구분을 잘 외우기)
타입(태그) 선택자
- 특정 태그를 사용한 모든 요소에 스타일을 적용
- 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용
- 태그명 { 스타일 규칙 }
...
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h1> 제목 </h1>
<p> 본문 </p>
<p> 본문 </p>
<p> 본문 </p>
<p> 본문 </p>
</body>
...
아이디 선택자
- #아이디명 { 스타일 규칙 }
- 아이디는 문서에 딱 1개만 있어야 한다. ( 만약 2개 이상 사용하고 싶은 경우, class를 사용해야 한다. )
- 형식이 또 작성이 되더라도, 하나의 값에만 특정하고 싶을 때
- 범위를 좁혀서 해당 부분 강조하는 것이 중요하다 .
...
<style>
#content {
font-style: italic;
}
</style>
</head>
<body>
<h1> 제목 </h1>
<p> 본문 </p>
<p id = "content"> 본문 </p>
<p> 본문 </p>
<p> 본문 </p>
</body>
...
클래스 선택자
- .클래스명 { 스타일 규칙 }
- 동일한 태그 중에 2개를 쓰고 싶은 경우나, 혹시나 추후에 누가 변경 가능성이 있는 경우
...
<style>
.content {
font-style: italic;
}
</style>
</head>
<body>
<h1> 제목 </h1>
<p> 본문 </p>
<p class = "content"> 본문 </p>
<p class = "content"> 본문 </p>
<p> 본문 </p>
</body>
...
다중 선택자 (여러 개를 선택)
- 선택자1, 선택자2 {스타일 규칙} or 선택자3선택자4 {스타일 규칙}
- 1과 2 모두 변경이 되는 것이고, 3과 4는 모두 충족해야 규칙이 적용이 된다.
- 자식 속성이 있을 때 ( 태그가 들어갈 수 있는 것만 사용해야 한다. p 태그는 자식이 안 된다.)
- 선택자1 > 선택자2 {스타일 규칙} or 선택자3 선택자4 {스타일 규칙}
선택자1 밑에 선택자 2 / 선택자 3의 안에서 4가 적용되는 건 전부
캐스케이딩 스타일 시트
- 캐스케이딩 : 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 스타일 적용
1. 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 결정되고, 우선순위에 따라 위에서 아래로 스타일 적용
2. 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
- 우선순위
- !important： 어떤 스타일보다 우선 적용하는 스타일
- 동일한 범위를 지정한 조건이라면, 나중에 적은 스타일의 우선순위가 높아진다.
- 같은 P 태그를 사용한 것들을 변경하더라도, 아이디로 범위를 좁히면 해당 내용이 우선적으로 적용이 된다.
- 상속
: 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소.
스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달
'프로그래머로 레벨업! > CSS' 카테고리의 다른 글
| 레이아웃을 구성하는 css 박스 모델 2 (0) | 2024.04.17 |
|---|---|
| 레이아웃을 구성하는 css 박스 모델 (0) | 2024.04.16 |
| 텍스트를 표현하는 다양한 스타일 2 (0) | 2024.04.16 |
| 텍스트를 표현하는 다양한 스타일 1 (0) | 2024.04.16 |
| css 적용 방법 (0) | 2024.04.16 |
