Part 2. CSS 기초 (3) 입니다.
현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
학습목표
- 다양한 CSS selector 규칙을 이해한다.
- 후손 selector와 자식 selector의 차이를 이해한다.
- 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.
- 스타일 상속에 대한 개념과 선택자 우선순위 개념을 이해한다.
1. 다양한 CSS selector
// html
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li id="orange" class="orange">오렌지</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span class="orange">오렌지</span>
</div>- 기본 선택자
- 전체 선택자
*는 문서의 모든 요소를 선택합니다. - 태그 선택자(Type Selector)는 같은 태그명을 가진 모든 요소를 선택합니다. 복수 선택 가능합니다.
* {
color: red;
}
li {
color: red;
}
li, span {
color: red;
}- ID 선택자(ID selector)는
#id로 입력하여 선택합니다. - class 선택자(class selector)는
.class로 입력하여 선택합니다.
같은 class를 가진 모든 요소를 선택합니다.
#orange {
color: red;
}
.orange {
color: red;
}- 복합 선택자
- 일치 선택자는 각각의 선택자를 동시에 만족하는 요소를 선택합니다. 일치 선택자는 붙여서 사용하기 때문에 태그 선택자와 함께 사용할때는 클래스 선택자와 아이디 선택자 앞에 쓸 수 있도록 해야합니다.
span.orange {
color: red;
}- 자식 선택자(Child Combinator)는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다. 아래 예시의 경우
<header>요소 바로 아래에 있는 두 개의<p>요소는 선택되지만,<span>요소의 자식인<p>요소는 선택되지 않습니다.
header > p {}<header>
<p> <!-- 선택 -->
<span>
<p></p>
</span>
</p>
<p> <!-- 선택 -->
<span>
<p></p>
</span>
</p>
</header>- 후손(하위) 선택자는 첫 번째로 입력한 요소의 후손 요소들까지 선택합니다. '띄어쓰기'가 선택자의 기호입니다.
아래 예시의 경우<header>요소의 자식인<p>요소 뿐만 아니라<header>요소의 자식의 자식에 있는<p>요소까지 모두 선택됩니다.
header p {}<header>
<p> <!-- 선택 -->
<span>
<p></p><!-- !!선택!! -->
</span>
</p>
<p> <!-- 선택 -->
<span>
<p></p><!-- !!선택!! -->
</span>
</p>
</header>- 일반 형제 선택자는 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 형제 요소들를 모두 선택합니다. 아래 예시의 경우
<section>요소 뒤에 있는 세 개의<p>요소를 모두 선택합니다.
section ~ p { }<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
</header>- 인접 형제 선택자(Adjacent Sibling Combinator)는 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 형제 요소 하나를 선택합니다. 예시의 경우
<section>요소 뒤에 있는 세 개의<p>요소 중 첫 번째<p>요소를 선택합니다.
section + p { }<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p>
<p></p>
</header>- 기타 선택자
- 가상 클래스 선택자(Pseudo-Classes)는 요소의 상태 정보에 기반해 요소를 선택합니다.
// html
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
<div class="banana" tabindex="-1">바나나</div>
</div>
<a href="http://www.naver.com">NAVER</a>
<input type="text" />// css
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* <a>요소에 마우스 커서가 올라가 있는 동안 선택합니다. */
a:active { } /* <a>요소에 마우스를 클릭하고 있는 동안 선택합니다. */
input:focus { }
/* 선택자 요소가 포커스가 되면 선택합니다. */
/* focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당합니다.*/
/* 여기서, 대화형 콘텐츠란 사용자와의 상호작용을 위해 특별하게 설계된 요소를 말합니다.*/
/* input, a, button, label, select 등 여러 요소가 있습니다.*/
/* 추가적으로 tabindex 속성을 통해 focus가 될 수 있는 요소를 만들 수 있습니다.
이름에서도 알 수 있듯, Tab키를 사용해 fucus할 수 있는 순서를 지정하는 속성입니다.
순서(값)로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않습니다.
*/// css
.fruits div:first-child {} /* 형제 요소 중 첫째라면 선택합니다.*/
.fruits div:last-child {} /* 형제 요소 중 막내라면 선택합니다.*/
ABC:nth-child(n) /*선택자 ABC가 형제 요소 중 (n)번째라면 선택합니다.*/
.fruits *:nth-child(2) {} /*형제 요소 중 (2)번째라면 선택합니다.*/
.fruits *:nth-child(2n+1) {} /*형제 요소 중 홀수(2n+1)번째라면 선택합니다. 이때, n은 0부터 시작합니다.*/
.fruits *:nth-child(2n) {} /*형제 요소 중 짝수(2n)번째라면 선택합니다. 이때, n은 0부터 시작합니다.*/
div:first-of-type {} /*형제 요소 중 자신의 유형과 일치하는 첫째라면 선택합니다.*/
div:last-of-type {} /*형제 요소 중 자신의 유형과 일치하는 막내라면 선택합니다.*/- UI 요소 상태 선택자
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */- 부정 선택자(Negation)
ABC:not(XYZ) /* 선택자 XYZ가 아닌 ABC요소를 선택합니다.*/
.fruits *:not(span) {}- 정합성 확인 선택자
input[type="text"]:valid { }
input[type="text"]:invalid { }- 속성 선택자(Attribute)는 같은 속성을 가진 요소를 선택합니다.
[disable] /* 'disable' 속성을 포함한 요소를 선택합니다.*/
a[href] /*'href' 속성이 포함된 요소 a를 선택합니다.*/
[ABC="XYZ"]={} /**/
p[id="only"] /*'id' 속성의 값이 정확하게 'only'과 일치하는 요소 p 선택합니다.*/
div[class*="W"] /*'class' 속성의 값에 'w'가 포함되는 요소 div 선택합니다.*/
p[class~="out"] /* 'class' 속성의 값에 'out'이 포함되는 요소 p 선택합니다.*/
/*p[class*="w"]와의 차이점은 class*는 단어가 아니라 스펠링으로도 선택될 수 있습니다.
예를 들어 p[class*="w"]의 경우 class="wow", class="wwwoooooow"처럼 w가 포함된 모든 요소 선택이 가능합니다.*/
section[id^="sec"] /* 'id' 속성의 값이 'sec'으로 시작하는 요소 section 선택합니다.*/
div[class$="2"] /* 'class' 속성의 값이 '2'으로 끝나는 요소 div 선택합니다.*/
p[class|="out"] /*'class' 속성의 값이 정확하게 'out'이거나, 'out'으로 시작되는 요소 p 선택합니다.*/- 가상 요소 선택자(Pseudo-Element)
ABC::before
/*선택자 ABC 요소의 내부 앞에 내용(content)을 삽입합니다. 가상 요소는 인라인(글자)요소입니다.*/
.box::before {
content: "앞!";
}
ABC::after
/*선택자 ABC 요소의 내부 뒤에 내용(content)을 삽입합니다. 가상 요소는 인라인(글자)요소입니다.*/
.box::after {
content: "뒤!";
}
이때 중요한 건 가상 요소 선택자를 사용할 경우 content를 반드시 사용해야 작동합니다.2. 스타일 상속
스타일 상속이란 부모 요소 혹은 조상 요소로부터 자식 요소 혹은 후손 요소까지 상속되어져서 스타일이 적용되는 것을 의미합니다.
상속되는 CSS 속성들은 모두 글자/문자 관련 속성들에 국한됩니다.
예시) font-style, font-wight, line-height, color, text-align 등
- 강제 상속
자동으로 상속되지 않은 속성들은 inherit을 통해 강제 상속시킬 수 있습니다.
/*HTML*/
<div class="parent">
<div class="child">
</div>
</div>
/*CSS*/
.parent {
width: 300px;
height: 200px;
background-color: red;
}
.child {
width: 300px;
height: inherit; /*강제 상속*/
background-color: inherit; /*강제 상속*/
position: fixed;
top: 100px;
right: 10px;
}3. 선택자 우선순위
우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법을 의미합니다.
1. 점수가 높은 선언이 우선됩니다!
2. 점수가 같으면 가장 마지막에 해석된 선언이 우선됩니다!
/*html*/
<div
id="color_yellow"
class="color_green"
style="color: orange;"> // 인라인 선언 - 1000점
Hello world!
</div>
<ul class = "list">
<li></li>
<li></li>
</ul>/*css*/
div {color: red !important;} /*!important - 99999999999점*/
#color_yellow {color: yellow;} /* ID 선택자 - 100점 */
.color_green {color: green;} /* Class 선택자 - 10점 */
div {color: blue;} /* 태그 선택자 - 1점 */
* {color: darkblue;} /* 전체 선택자 - 0점 */
body {color: violet;} /* 상속 - X */
li:hover /*가상 클래스 선택자 - 10점 */
.color_green::before /* 가상 요소 선택자 - 1점 */
:not(.color_green){} /* 부정 연산자 상속 - X */