✔ 강의 내용
CSS(Cascading Style Sheet)
CSS는 "Author Style(우리가 지정한 것) -> User Style(사용자가 지정한 것) -> Browser(브라우저가 지정한 것)" 순서로 Cascading되는데 이 연결고리를 끊어내는게 !important이다.
!important는 CSS 구조가 잘못됐거나, HTML에서 Box 모델을 잘못 설정할 경우 나쁜 아키텍처가 되는 경우에 쓰게된다. 이는 cacading이 깨지고 최우선순위로 되어 나쁜 코드가 되기 때문에 되도록 쓰지 않는 것이 좋다.
Box를 최소단위로 쪼개 labeling을 잘 하면 어떤것을 골라서 CSS를 적용할지 고르는 게 수월해진다.
Selectors
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width~"> <title>CSS DEMO</title> </head> <body> <ol> <li id="special">First</li> <li>Second</li> </ol> <h1 id="special">Hello</h1> <button>Button 1</button> <button>Button 2</button> <div class="red"></div> <!-- div: block 레벨 태그, 내부에 태그가 없으면 css적용 안됨 => width, height 설정해서 색 채울 수 있음 --> <div class="blue"></div> <a href="naver.com">Naver</a> <a href="googlenaver.com">Google</a> <a>Empty</a> </body> </html>
-
Universal
*: 모든 태그 선택* {
color: green;
} -
type
Tag: 태그 이름으로 선택li {
color: blue;
} -
ID
#id: #(Hash mark)로 id 골라내어 선택#special {
color: pink;
} -
Class
.class: .(dot)으로 class 골라내어 선택.red {
width: 100px;
height: 100px;
background: yellow;
} -
State
:: 태그 옆에 달아서 사용button:hover { // 마우스 올렸을 때(hover) 나타날 효과 지정
color: red;
background: beige;
} -
Attribute
[]: 대괄호 안에 속성값을 입력해서 해당하는 것 선택a[href] {
color: purple;
}a[href="naver.com"] {
color: purple;
}a[href="naver"] { // href가 naver로 시작하는 것 선택
color: purple;
}
추가 자료 : [MDN] CSS Selectors, CSS reference
