웹 기초 - 관계, 글자, 링크 개념 (+ br, hr)

부모, 자식, 형제 관계

<div>
	<nav></nav>
    <nav></nav>
<div>

• 첫 번째'nav'가 '나'라고 가정해 보자.
• 'nav'를 감싸고 있는 'div'는 부모 엘리먼트이고, 따라서 'div'의 자식은 'nav'가 된다.
• 두 번째 'nav'는 'div'의 둘째 자식이면서 첫 번째 'nav'의 동생이 된다.

div

• 태그는 **레이아웃**을 만들거나 **콘텐츠**를 나누는(division) **순전한 컨테이너**로 사용하는 태그
• 태그 자체적으로 특별한 의미는 없다.

글자

• 글자의 두께 조절

  • font-weight : nomal(기본값), bold, lighter, boder

• 폰트 크기

  • font-size : px, rem, em 등

    • px : CSS에서 가장 기본적인 단위
      : CSS에서 픽셀 단위로 값을 입력하는 것은, 내가 원하는 값은 정확이 이 값이라고 절댓값을 단호하게 선언하는 것이다.

    • rem : 루트 요소 폰트 사이즈의 상대 단위
      : 계산에 기반하는 요소가 정해져 있는 상대 단위
      : HTML 루트 요소의 폰트 사이즈가 계산의 기반값

    • em : 부모 요소의 폰트 사이즈값을 기반으로 하는 상대 단위
      : 부모 요소 한 번의 변경으로 자식 요소 여럿의 다양한 크기 값을 동시에 바꿀 수 있어 유연한 단위이다.
      : font-size외에도 사이즈 단위가 사용되는 모든 프로퍼티에 사용 가능

웹 브라우저에서 16px로 정해놓고 있다고 가정해 보자.
  div {
  /* 결과값 - 16px * 1.5 = 24px */
  font-size: 1.5rem;
  }

.parent {
  font-size: 20px;
}
.child-a {
  /* 결과 → 20px × 1.2 = 24px */
  font-size: 1.2em;
  /* 결과 → 자신의 폰트 사이즈 24px × 1.5 = 36px */
  height: 1.5em;
}
.child-b {
  /* 결과 → 자신의 상속받은 폰트 사이즈 20px × 1.5 = 30px */
  height: 1.5em;
}

• 자간 조절
  • letter-spacing : 글자와 글자 사이의 간격을 조절

div{
  letter-spacing: -10px; /* 글자 사이의 간격이 -10px 좁아짐  */
  letter-spacing: 10px;	/*  글자 사이의 간격이 10px 넓어짐  */
}

a 엘리먼트

• a 엘리먼트 : 링크 버튼

• target 속성 : 새 창을 띄울 것인지 여부를 정한다.

• href 속성 : 이동할 주소

  <a href="주소">주소 이름</a>
  <a href="주소" target="_blank">주소 이름</a>

  - target="_blank" : 기본속성 중 하나, 클릭시 새 창이 열린다.
  
### br , hr

  - br : 줄바꿈 엘리먼트
  - hr : 수평 가로선 엘리먼트