21.2.15

1. (HTML) id와 class 속성의 차이

   class
   (학습 자료 중)class도 태그에 이름을 주는 속성
   id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있음.

2. (CSS)

   (학습 자료 중)"Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데,
   폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용

3. (CSS) RGB 컬러 표현법

.pink {
  color: rgb(255, 192, 203);
}

4. (CSS) css로 들여쓰기 하기

### indent

.js-description {
  text-indent: 50px;
}

5. (CSS)margin과 padding
   참고 블로그

• margin은 객체와 외부와의 영역
• padding은 객체와 이를 둘러싼 border와의 영역

6. (CSS) 프로퍼티 모두에 적용하는 방법 -> *

7. (CSS) Box-Sizing

   box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성. inherit, initial, content-box, border-box 기준을 속성으로 사용 가능

8. (CSS) CSS 선택자 우선 순위

   tag <<<<< class <<<< id <<<<<< inline css

(연장선)

.container header p.title {
  font-size: 50px;
}

를 표현하기 위해 했던 작업 : div를 생각하자.

<div class="container">
<header>
    <p class="title">나는 p태그</p>
</header>
</div>

---

#### Semantic Web과 Semantic Tag에 대한 이해

1. img vs div 이미지 넣는 것에 대한 차이
   img : HTML 태그로 직접 이미지를 삽입.(바탕에 띄운다)
   div : CSS 태깅을 통해 구분된 영역에 백그라운드 형식으로 이미지를 삽입.(바탕 그 자체, 인라인과 블럭 차이가 있음.)

따라서 코드를 보기 전까지는 사이즈 변경 등 다양한 요소가 있어 구분하기 어렵다.

2. Semantic Web과 Semantic Tag에 대한 이해

• 배경 : 편리한 웹에 겉잡을 수 없이 많은 정보가 누적. 이로 인한 정보 처리 및 분석에 대한 필요성이 생겨서 나옴. 기계가 읽고 해석할 수 있는 웹을 개발하고자 나온 것이 Semantic Web.
  이 의미 있는 웹에서 나온 것이 현재 우리가 HTML에서 사용하고 있는 태그인 Semantic Tag

• Semantic Tag의 와 Non-Semantic Tag의 차이 : 태그 자체가 특정한 속성이나 역할, 사용자가 의미를 담을 수 있는가 없는가 차이.
  예 : 단순한 구획(header, div...) / 그 자체가 의미가 있고 추가로 사용자가 전달할 수 있는 태그(form, img...)

(이해한 바) 무분별한 정보가 웹상에 개재되는 것을 막고 일종의 형태를 만들고자 태그라는 이름표를 달아줬고, 태그마다 의미와 그 속성을 부여하여 웹이 보다 효율적으로 작동할 수 있게 해줬다는 것을 이야기.

3. img vs div 의 최종 차이 : img는 alt 라는 다소 편리한 속성을 지니고 있다. 혹 이미지가 문제가 발생하더라도 사용자가 볼 수 있는 부연 설명을 할 수 있고 다소 독립적이며 의미 있는 태그다. 반면 div는 구획에 종속되어 있으며 속성을 통한 정보를 담을 수 없다.

4. 그래서 언제 사용하면 좋은가?
   img : 사용자의 편의를 위한 설명이 덧붙여져야 할 때.(e.g 시각 장애인) 배경과 상관 없이 텍스트 등과 이미지를 사용할 때 편할 것으로 판단
   div : 부연 설명이 필요 없으며 특정 영역에 배경이 되는 이미지가 필요할 때 편할 것으로 판단

참고 링크