안녕하세요~
이번 포스팅은 저번 포스팅에 이어 CSS Selector에 대해 알아볼게요
백엔드에서 알아두면 도움이 될만한 것들로만 추렸으니 정보가 더 필요하다면 각자 구글링 해보기로 약속~
그럼 출발!!!
전체 선택자
* {
background-color: gray;
}- HTML
body내 모든 Element를 선택해줍니다
태그 선택자
div {
}
span {
}
p {
}- 특정 태그를 지정하여 선택해줍니다
클래스 선택자
.btn-login {
}
<body>
<div class="btn-login">
<span>로그인</span>
</div>
</body>- 클래스명으로 지정하여 선택해줍니다.
- 재사용이 좋아 활용성이 높습니다
아이디 선택자
#user-login {
}
<body>
<div>
<span id="user-login">로그인</span>
<button id="user-login-btn" ... >버튼</button>
</div>
</body>- 아이디명으로 지정하여 선택해줍니다
- 아이디는 뷰에 대한 고유 식별자로서, 한 페이지에 하나만 존재해야합니다
- 자바스크립트를 적용할 때 활용도가 높습니다
특성 선택자
[type="submit"] {
}
[class="user-login"] {
}- 태그가 가진 특성으로 지정하여 선택해줍니다
가상 클래스 선택자
:hover : 커서를 뷰에 올려두었을 때
:visited : 이미 방문한 링크
:active : 마우스로 클릭하였을 때
:focus : 뷰에 포커스가 되었을 때
:link : 방문하지 않았던 링크
Selector 우선순위
CSS는 적용되는 우선순위 규칙이 있습니다
이러한 규칙들을 우선순위/계단식이라고 표현하는데요
한번 알아볼까요?
- 후자우선의 원칙
- 같은 선택자에 중복된 속성이 있을경우 나중에 적은 속성이 적용됨을 뜻합니다
이 경우, 동일한div { background-color: green; background-color: skyblue; }background-color속성이 작성되었는데skyblue가 후작성 되었으므로skyblue가 적용됩니다
- 명시성의 원칙
- 더 자세히 작성될수록 우선순위가 높습니다
우선 순위
1. inline-style
2. id(#) 선택자
3. class(.), 가상클래스, 속성(ex.type=[submit])선택자
4. 타입(h1,p,div...) 선택자
5. 전체(*) 선택자
- 중요도의 원칙 (최우선적인 적용)
!important속성 선언은 최우선적 우선순위입니다. 따라서 아주 신중히! 사용해야합니다.
필연적으로 사용해야할 것 같은 경우, 퍼블리셔/디자이너등의 담당자분들과 먼저 협의를 해보는게 좋겠죠?
이번 포스팅은 여기까지입니다.
감사합니다!
우동먹으려고 개발하는 김치나베우동 성장기