웹 기초 - 인접동생 선택자, &nbsp, text-decoration, display

자식, 인접동생 선택자

• > : 자식 선택자
• + : 인접동생 선택자

<!-- `>` : 자식 선택자 -->
<div>
  <section>
    <nav></nav>
  </section>
  <section>
    <nav></nav>
  </section>
</div>

<!-- `+` : 인접 동생선택자 -->
<div></div>
<section></section>

---

 

•   : 공백 한 칸을 의미
  : 글자 사이에 공백을 두 칸 이상 띄우고 싶다면  를 사용하면 된다.
  

---

text-decoration

• text-decoration 속성은 주로 a 태그와 많이 사용된다.

• a 태그에 기본적으로 text-decoration:underline;으로 되어있는데, 이를 제거하거나 hover시에만 보이고 싶을때 이 속성을 주게된다.

• text-decoration의 종류

  • text-decoration:underline; -> a 태그의 기본값
  • text-decoration:inherit; -> 부모 요소의 속성값 그대로 적용
  • text-decoration:line-through; -> line-through
  • text-decoration:none; -> underline 제거
  • text-decoration:overline; -> line을 텍스트 상단에 생성

text-decoration 문제

• 두 번째 '안녕'의 밑줄 제거하기

HTML
<a href="#">안녕</a>
<div>
  <a href="#">안녕</a>
</div>

CSS
div > a {
  /* 글자의 효과 제거 */
  text-decoration:none;
}

---

div 태그만 사용하여, 색 변경

• 사과만 빨간색이 되도록 변경하기

HTML

<div>[사과]</div>
[당근]
[양파]
<div>[사과]</div>
[오렌지]
[귤]

CSS
div {
  color:red;
  display:inline-block;	// block화 되어있으므로 inline-block으로 변경
}