HTML_03_img, li, ul, ol

img

• 이미지(사진 등)를 HTML페이지에 임베드하기(퍼가기)
• to embed an image in an HTML page.
• 닫는 태그 없음
• 속성(attribute)을 활용한다.
  • src : specifies the 경로 path to the image.
  • alt : specifies an 대체 텍스트 alternate text for the image, if the image for some reason cannot be displayed
  • +) width / height : 너비 / 높이 of the image

• <img src="주소(인터넷의 이미지) 또는 이름(내 컴퓨터에 있는 이미지)">

예)

<img src="https://www.w3schools.com/tags/img_girl.jpg" alt="Girl in a jacket" width="250" height="300">

"이미지를 가로길이 250픽셀, 세로길이 300픽셀만큼 임베드하며, 이 이미지가 나오지 않을 경우 "Girl in a jacket"이라는 텍스트를 보여주기

예)

<img src="https://www.w3schools.com/tags/img_girls.jpg" alt="Girl in a jacket" width="100%">

경로를 잘못 넣었다. 
사진 너비를 원본의 100%만큼

---

---

li

• 목록 (list)
• defines a list item.

예)

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

1. HTML

2. CSS

3. JavaScript

1. HTML

2. CSS

3. JavaScript

---

ul

• 순서 없는 목록 (unordered list)
• defines an unordered (bulleted) list.
• <li> 와 <ul> 은 함께 쓴다.
  다른 목록과 구분되도록 경계 생성
• Use the <ul> tag together with the <li> tag to create unordered lists.

예)

<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ul>
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ul>

• 1. HTML
• 2. CSS
• 3. JavaScript

• 1. HTML
• 2. CSS
• 3. JavaScript

---

ol

• 순서 있는 목록 (ordered list)
• defines an ordered list. An ordered list can be numerical (1. 2. 3. ...) or
  alphabetical (a. b. c. ... A. B. C. ...).

예)

<ol>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ol>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

1. 1. HTML
2. 2. CSS
3. 3. JavaScript

1. HTML
2. CSS
3. JavaScript

** <ol>로 하면 순서(1. 2. 3. ...)를 입력하지 않아도 된다.

---

Ref

• w3school
• 생활코딩 HTML