Introduction to HTML 2

1. Displaying Text
use a paragraph(<p>) or span(<span>)
span : 짧은 문장들이나 다른 HTML을 포함, 또는 같은 라인에 있는 내용들도 구분하도록 사용할 수 있다

<span>예시

오른쪽 그림을 보면, 두개의 다른 <div>가 있다
두번째 <div>는 <p>를 포함하고, 그 안은 또 <span>이 있다
이 <span>은 "Self-driving cars"를 다른 내용들과 구분시켜주는 역할을 한다

-span을 쓰는 좋은 경우 : 같은 라인에 있는 특정 내용을 강조하고 싶을 때
*(블럭단위로 나누고 싶으면 div를 사용)


*가독성을 높이기위해 항상 div안에는 두개의 삽입공간을 두는 것이 좋다

2. Styling Text
-<em> : text 강조 (italic emphasis)
-<strong> : 중요한 text 강조 (bold emphasis)

The Nile River를 strong으로, longest를 em으로 강조

 

3. Line Breaks
HTML 파일의 코드 간 간격은 브라우저의 요소 위치 결정에 영향을 주지 않는다.
그러므로, <br>을 사용해 간격을 조정해야한다.
-<br> : opening tag로만 구성, 하나당 한 줄 띄우기


4. Unordered Lists
-<ul> : 순서 없는 리스트, bullet point로 구성, 그 안은 <li>를 통해 나열

<ul> 예시

5. Ordered Lists
-<ol> : ul과 다르게 번호가 매겨짐, 안은 마찬가지로 <li>로 구성

6. Images
-<img> : self-closing tag, src라는 속성이 필요
-src : 이미지의 source, location of the image (url이 해당됨)

<img>

7. Image Alts
-alt 속성 : img태그에서의 src 속성처럼 추가되는 속성, 이미지의 설명을 포함
              이미지의 로드에 실패했을 경우, 이미지의 설명을 부여
              시각장애인을 위한 이미지 설명
              검색 엔진이 검색할 수 있도록 하는 역할 (검색 엔진은 이미지를 "볼" 수 없다)

8. Videos
-<video> : 비디오의 source, src를 가짐
               <img>와 다르게 closing tag를 가짐

<video>

width와 height는 비디오의 사이즈를 결정 (숫자는 "" 안에)
controls는 pause, play and skip의 속성 부여
가운데 텍스트는 비디오가 load되지 않을 경우 나오는 텍스트



이번 포스팅 : Introduction to HTML 마무리
다음 포스팅 : Preparing for HTML (codecademy 다음 단계)