css파일 추가

<link rel="stylesheet" href="(filename).css" />

id와 class의 차이점

id

• #으로 선택

• 한 문서에 단 하나의 요소에만 적용

• 특정 요소에 이름을 붙이는 데 사용

class

• .으로 선택

• 동일한 값을 갖는 요소 많음

• 스타일의 분류(classification)에 사용

여러 개의 class를 하나의 엘리먼트에 적용하기

<li>요소에 적용된 여러 class중에서 selected class를 통해 적용된 내용을 확인할 수 있다.

<li class="menu-item selected">Home</li>
하나의 요소에 여러 class 적용
.selected {
  font-weight: bold;
  color: #009999;
}
특정 클래스(selected)를 통해 요소를 스타일링

줄바꿈이 되는 박스 vs 옆으로 붙는 박스

block 줄바꿈이 되는 박스 vs inline,inline-block 옆으로 붙는 박스
박스의 종류는 줄바꿈이 되는 박스와 줄바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다. 줄바꿈이 되는 박스는 block박스 , 줄바꿈이 일어나지 않고 크기지정을 할 수 없는 박스는 inline박스라고 한다.
그리고 이 두가지 박스 종류의 특징이 섞인 , 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다.
위 예제에서, 줄바꿈이 되는 태그와 그렇지 않은 태그는 무엇인가?

• HTML에서 줄바꿈이 되는 태그는 무엇인가?
  • 줄바꿈이 되는 태그 : <h1> <p>
  • 줄바꿈이 되지 않는 태그 : <span>

• 이것을 통해 <h1> <p> 등은 block 박스이며, <span> 은 inline 박스임을 알 수 있다.

-block 요소의 대표적인 예는 <div> , <p>
*Inline 요소의 대표적인 예는 <span>