상속(Inheritance)

자식에게도 같은 스타일이 적용되는 것.
Example)

body {
  color: red;
  font-size: 14px;
}

body 태그에 color: red, 크기는 14px
그런데, p태그에도 body태그의 영향으로 빨간색과 14px 스타일이 상속되어 적용이 된다.

그룹(Grouping)

많은 태그와 클래스를 한꺼번에 스타일 지정할 수 있다.
Example)

.what-is-blockquote, span {
  color: green;
}

엄청 길게도 작성할 수 있다.
.a div .b .pre span {
  background-color: yellow;
}

위 코드는 span태그에 적용되는 css다.
그대로 읽으면
a클래스 밑에, div밑에, b클래스 밑에, pre클래스 밑에 span태그에 적용이 됩니다.

<div class="a">   <---a 클래스
  <div>
    <header class="b">    <-- b클래스
      <h1 class="pre">    <-- pre클래스
        <span>노란색 배경 나옴!</span>
        <span class="title">이것도 나옴!</span>
      </h1>
      <span>이건 적용안 됨</span>
    </header>
  </div>
  <span>이건 적용안 됨</span>
</div>

<img alt="js" src="https://www.w3schools.com/whatis/img_js.png">

• alt: 이미지가 엑스박스로 뜨거나 보이지 않을 때, 이미지 대신 보여줄 텍스트를 지정한다.
  코드는 위와 같다.
  
• src: 이미지 파일 경로 or 이미지 url 주소

• 홀수/짝수 인지 알 수 있는 selector 표기법

odd : 홀수 / even : 짝수 odd : 이상한. That ...

Table 태그

table태그는 HTML문서에서 표를 만드는 태그이다.
각 태그의 의미는 아래와 같다.

• table row의 줄임말
• table head의 줄임말. 가운데정렬과 글씨 두께를 두껍게 할 수 있다.
• td태그 : table data의 약자.

사용 예는 다음과 같다.

<th>내용</th> 표의 제목을 쓰는 역할. (기본 값: 굵은 글씨, 중앙정렬)
<tr>내용</tr>가로줄을 만드는 역할 (기본 값: 보통글씨, 왼쪽 정렬)
<td>내용</td>셀을 만드는 역할을 한다 (기본값 : 보통 글씨, 왼쪽 정렬)

EXAMPLE)

<table>
 <tr>
   <th></th>
   <th>Dog</th>
   <th>Cat</th>
 </tr>
 <tr>
   <th>종</th>   
   <td>Canine</td>
   <td>Feline</td>
 </tr>
 <tr>
   <th>짖는소리</th>
   <td>Bark</td>
   <td>Meow</td>
 </tr>
 <tr>
   <th>Immature</th>
   <td>Puppy</td>
   <td>Kitten</td>
 </tr>
</table>

위 코드의 결과물은 다음과 같다.

	Dog	Cat
종	Canine	Feline
짖는소리	Bark	Meow
Immature	Puppy	Kitten

• div

  division의 줄임말
  div는 block의 개념이기 때문에 줄바꿈이 일어난다.
  inline 속성의 span과 차이가 있다.

• p태그

  paragraph의 줄임말
  줄바꿈이 일어난다.

p {
  text-decoration : underline;
  }
p태그에 밑줄을 그어준다.