'자식태그' 태그의 글 목록

자식태그

CSS 활용하기 2021.04.11

CSS 활용하기

tt_honey 2021. 4. 11. 14:38

2021. 4. 11. 14:38

728x90

CSS에서 스타일링 해줄 요소는 '선택자' 로 결정한다.

1. 선택자 정리

태그 이름

/* 모든 <h1> 태그 */
h1 {
  color: orange;
}

클래스 / 아이디

/* 'important'라는 클래스를 갖고 있는 모든 태그 */
.important {
  color: orange;
}

/* 'favorite'라는 아이디를 갖고 있는 태그 */
#favorite {
  color: blue;
}

자식(children)

/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
  color: orange;
}

직속 자식(direct children)

/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}

복수 선택

/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
  color: orange;
}

여러 조건

/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}

/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}

Pseudo-class(가상 클래스)

콜론(:)을 사용하면 몇 가지 '가상 클래스'를 선택할 수 있다.

n번째 자식

<div class="div1">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
  <p>Paragraph 6</p>
</div>

/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
  color: blue;
}

/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
  color: red;
}

/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
  color: green;
}

/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
  font-size: 150%;
}

/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
  text-decoration: line-through;
}

0번째 부터가 아니고 first-child가 첫번째 요소이다.

마우스 오버(hover)

h1 {
  color: orange;
}

/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
  color: green;
}

2. CSS 상속

css에는 '상속' 개념이 있다. 부모 요소의 속성들을 자식들한테 넘겨주는 것이다. 큰 div태그가 있으면 그 안에 들어가있는 속성들은 모두 div태그의 css속성 값에 따라 같이 적용되는 것이다.

하지만 태그와 속성에 따라 상속이 되지 않는 경우도 있다. 예를 들어서 부모 태그에 설정한 margin이 모든 자식들에게 적용은 되지 않는다.

웬만하면 상속되는 몇 가지 속성들

color
font-family
font-size
font-weight
line-height
list-style
text-align
visibility

웬만하면 이라고 한 이유는 항상 상속되는 것은 아니기 때문이다. 예를들어 <a>태그에는 color 속성이 상속되지 않는다. <a>태그가 억지로 상속을 받아오기 위해서는 해당 속성에 inherit 값을 쓰면 된다.

<div class="div1">
  Let's go to <a href="https://google.com" target="_blank">google</a>!
</div>

<div class="div2">
  Let's go to <a href="https://google.com" target="_blank">google</a>!
</div>

.div1 {
  color: green;
}

.div2 {
  color: orange;
}

.div2 a {
  color: inherit;
}

3. CSS 우선 순위

여러 선택자가 같은 요소를 가리키면 우선 순위를 어떻게 평가할까.

1. 완전 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어쓰게 된다.

h1 {
  color: blue;
  text-align: center;
}

h1 {
  color: green;
}

//h1 태그는 초록색으로 된다.

2. 명시도(Specificity)

같은 요소를 가리키지만 선택자가 다르다면, '명시도(specificity)'에 따라 우선 순위가 결정된다.

명시도 계산기

인라인 스타일이 가장 우선 순위가 높다.
선택자에 id가 많을 수록 우선 순위가 높다.
선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높다.
그 다음은 그냥 요소(또는 가상 요소)가 많은 순서이다.

<ul> 태그 안에 <li> 태그 안에 <a id="link">가 있다고 가정해보자.

<ul>
  <li><a id="link" href="#">Link 1</a></li>
  <li><a id="link" href="#">Link 1</a></li>
  <li><a id="link" href="#">Link 1</a></li>
  <li><a id="link" href="#">Link 1</a></li>
</ul>

ul li:first-child #link {
  color: green;
}

ul li:first-child a {
  color: orange;
}


/*첫번째 것이 요소의 명시도가 높으므로 첫번째 css가 적용된다*/

4. CSS의 다양한 단위들

css에는 px, rem, em, %등 여러 단위가 있다. 폰트 크기 뿐만 아니라 padding, margin, width 등 다양한 속성들에 이 단위들을 사용할 수 있다.

1. px

절대적인 값. 다른 요소의 값에 영향을 받지 않는다.

2. rem

상대적인 값. 하지만 오직 <html> 태그의 font-size에만 영향을 받는다.

2rem은 <html>태그의 font-size의 2배 크기이다.

3. em

em도 rem과 마찬가지로 상대적인 값이다. em은 자기 자신의 font-size를 기준으로 한다.

2em은 자기 자신의 font-size의 2배 크기이다. 자기 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속받은 값을 기준으로 한다.

만약 자신에게 정해진 font-size가 있다면 그 값을 기준으로 em이 결정된다.

4. 퍼센트 %

%는 어느 항목에서 쓰이냐에 따라 다른 기준이 적용된다.

예를 들어 font-size에서 %가 쓰일 경우, 상위 요소의 font-size에 곱해주는 방식으로 계산.

%가 margin이나 padding의 단위로 사용될 경우, 상위 요소의 width를 기준으로 계산된다.

margin-top이나 padding-bottom 등 세로 속성을 조절할 때에도 상위 요소의 height가 아닌 width를 기준으로 계산된다.