1. CSS를 통한 일괄 적용
- Selector(선택자)에 css를 적용
- 문장 구조 설명
a{ color: blueviolet; text-decoration:none; } |
* a → selector(선택자)
** color: blueviolet → declaration(선언 및 효과)
text-decoration:none → declaration(선언 및 효과)
*** color, text-decoration:none → property(속성)
**** blueviolet, none → value(속성 값 또는 값)
See the Pen CSS - a by hbkuk (@hbkuk) on CodePen.
2. CSS 적용을 위한 선택자 class
- class 적용 예
* CSS 적용을 위해 이름 앞에 .(콤마)를 기입
** class 선택자는 중복사용이 가능
*** class - class 적용순서는 상대적으로 앞쪽에 배치된 명령이 우선순위가 높음.
See the Pen CSS - class by hbkuk (@hbkuk) on CodePen.
3. CSS 적용을 위한 선택자 id
- id 적용 예
* CSS 적용을 위해 이름 앞에 #(샵)을 기입
** id 선택자는 중복사용이 불가능, 한번만 등장해야하는 규칙이 존재
*** 선택자 class - id 간 적용순서는 id가 우선이다.
=>why? 코딩을 할 때 상대적으로 포괄적인 부분을 진행하고, 구체화 시키는 방향으로 진행하라는 의미
'Front' 카테고리의 다른 글
[CSS] 미디어 쿼리(Media Query) (0) | 2022.08.19 |
---|---|
[CSS] BOX MODEL, <div>, <gird> (0) | 2022.08.18 |
[HTML] 문서의 구조(1) (0) | 2022.08.17 |
[HTML] 기본 문법 - 태그(1) (0) | 2022.08.17 |
[HTML+CSS] 캡션과 비디오 편집 (0) | 2022.08.03 |
댓글