[Pre-course] 2021. 10. 05

1. HTML span과 p

<span>: 줄이 바뀌지 않고 이어서 나온다
<p>: 줄바꿈이 일어난다

<span>이름: 김개발</span>
<span>직업: 프론트앤드 개발자</span>
→  이름: 김개발 직업: 프론트앤드 개발자
-----------------------------------
<p>이름: 김개발</p>
<p>직업: 프론트앤드 개발자</p>
→  이름: 김개발
   직업: 프론트앤드 개발자

2. HTML id와 class

id: 태그에 이름을 주는 속성으로 해당하는 웹페이지에서 하나만 있는 고유한 값이다
class: 태그에 이름을 주는 속성이지만 여러 태그에 중복이 가능하다

3. CSS font style

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

Georgia → "Times New Roman" → Times → serif 순으로 폰트 적용
"Times New Roman": 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용

4. CSS text style

<span>에서 text-align이 적용되지 않는 이유
: <span>은 inline-element라서 해당 text 영역만 차지하고 있기 때문

들여쓰기: text-indent
띄어쓰기:   (HTML에서)

5. CSS 밑줄 (text-decoration과 border-bottom)

text-decoration: 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기 어려움
border-bottom: 밑줄처럼 보이는 테두리, 원하는대로 디자인 가능

6. CSS selector의 우선순위

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

7. HTML CSS 이미지 (img와 background-image)

<img>: 태그로 이미지를 생성
background-image: css를 이용해 이미지를 생성

   ❓❗   Semantic Web과 Semantic Tags

위키피디아 내용 참고

<img> / background-image
위 둘의 방법과 사용의 차이를 알기 위해서는 Semantic Web과 Semantic Tags에 대한 이해가 필요하다

Semantic의 사전적 정의: 의미론적인, 의미의

Semantic Web: '의미론적인 웹', 의미있는 웹, 기계가 읽고 처리할 수 있는 웹
Semantic Tags: '의미론적인 태그', 의미있는 태그, 기계가 읽고 처리할 수 있는 태그

간단한 예시를 들면 HTML5에서 Semantic Web을 쉽게 구성할수 있도록 만들어주는 요소들이 추가되었다

<div id="header"> 내용 </div>

으로 작성하던 header부분을

<header> 내용 </header>

위와 같이 작성할 수 있게 되면서 컴퓨터가(물론 사람도) 의미를 명확하게 알 수 있게 되었다
의미가 명확해지기 때문에 검색 엔진에서 검색이 용이하다

여기서 <header> </header>가 Semantic Tags에 해당한다

따라서 <img>태그와 background-image (<div>태그)의 차이점은 컴퓨터가 해당 태그가 어떤 내용인지 이해할 수 있고 없고의 차이다


이는 실 사용에 있어서

1. 이미지에 대한 정보가 필요하고 검색엔진에 노출이 되길 원한다면 <img>태그를 사용
2. 이미지에 대한 정보가 필요없고 단순 배경이미지 정도의 용도라면 background-image (<div>태그)를 사용

하면 되겠다 !

---

참고