3강 : HTML 기본2

3-1. 리스트 태그 - ul, ol, li

---

리스트를 표현하는 가장 많이 사용되고 있는 태그

수평 구조일 때도 ol 태그와 ul 태그 사용이 가능하다.

 

- ul 태그 : unordered list, 번호없이 리스트를 나열한다.

- ol 태그 : ordered list, 번호를 붙여서 리스트를 나열한다.

- li 태그 : list의 항목 각각을 나타낸다.

 

<ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
    <li>menu5</li>
</ul>

<ol>
    <li>서울</li>
    <li>경기</li>
    <li>충청</li>
    <li>전라</li>
    <li>경상</li>
    <li>강원</li>
 </ol>

 

3-2. 표를 나타내는 태그 - table

---

표 형식의 레이아웃을 만드는 태그이다.

현재는 잘 사용하지 않는다고 한다.

 

다음과 같이 사용한다.

<table border="1">
    <tr>
      <td rowspan="2">1행1열</td>
      <td>1행2열</td>
      <td>1행3열</td>
      <td>1행4열</td>
    </tr>

    <tr>
      <td>2행2열</td>
      <td>2행3열</td>
      <td>2행4열</td>
    </tr>

    <tr>
      <td colspan="2">3행1열</td>
      <td>3행3열</td>
      <td>3행4열</td>
    </tr>
</table>

 

 

3-3. 이미지를 나타내는 태그 - img

---

웹사이트에서 이미지를 출력해 주는 태그이다.

 

- img 태그의 속성

src : 이미지가 저장되어 있는 경로의 주소를 넣어준다.

alt : 이미지 불러오기에 실패했을 때 들어갈 문구를 넣어준다.

width : 이미지의 폭을 설정해준다. 단위는 px, % 등이 있다.

 

<img src="이미지 경로 주소" alt="로딩 실패" width="500px">

 

 

 

3-4. 사운드를 출력하는 태그 - audio

---

웹사이트에서 사운드를 출력해 주는 태그이다.

 

- audio 태그의 속성

src : 사운드 파일이 저장되어 있는 경로의 주소를 넣어준다.

autoplay : 자동 재생 여부 설정

loop : 반복 재생 여부 설정

controls : 컨트롤러 추가 여부 설정

 

<audio src="파일 경로" controls="controls" autoplay="autoplay" loop="loop"></audio>

 

 

 

 

출처

https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C#

인프런 실전 HTML & CSS 강좌