엘리먼트의 부모, 자식, 형제 관계

• 나를 감싸는 엘리먼트 : 부모 엘리먼트
• 내가 감싸는 엘리먼트 : 자식 엘리먼트
• 같은 부모를 둔 엘리먼트 : 형제 엘리먼트

<!-- nav의 부모 엘리먼트 -->
<div>
  <!-- div의 자식 엘리먼트 -->
  <!-- 막내 nav엘리먼트의 인접 형 -->
  <nav></nav>
  <!-- div의 자식 엘리먼트 -->
  <!-- 첫째 nav엘리먼트의 인접 동생 -->
  <nav></nav>
</div>

폰트 조절

div {
  /* 글자의 두께 조절 */
  font-weight:normal;
  font-weight:bold;
  /* 기본폰트의 3배 */
  font-size:3rem;
  font-size:140px;
  /* 자간조절 */
  letter-spacing:-10px;
}

section {
  font-size:10rem;
  /*
  rgba 함수의 인자
  인자 1(red) : 0 ~ 255 까지 넣어서 실험
  인자 2(green) : 0 ~ 255 까지 넣어서 실험
  인자 3(blue) : 0 ~ 255 까지 넣어서 실험
  인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험
  */
  color:rgba(255,0,0,0.5);
}

<a> 태그

<a href="http://www.naver.com/" target="_blank">네이버</a>

• a 엘리먼트는 링크 버튼이다.
• a 태그는 기본적으로 display:inline; 이다.
• href 속성은 이동할 주소를 적는다.
• target 속성은 새 창으로 띄울지 여부를 정한다.
• 하단 밑줄 제거: text-decoration: none;

선택자(검색자)

• : 후손선택자
• > : 자식선택자
• + : 인접 동생 선택자
• 선택자가 길면(자세하면) 우선순위가 높다.
• 같은 우선순위면 아래 있는 게 적용된다.
• 예시
  - div>section*2>nav 쓰고 tab키를 누른다.
  - div+section 쓰고 tab키를 누른다.

text-align: center

• 자신을 정렬하는 게 아니라, 자신이 가지고 있는 텍스트를 정렬한다.

글자의 효과 제거

• text-decoration: none;