[맛집지도만들기] 자주 쓰는 HTML 태그

안녕하세요, 이번 시간에는 HTML에서 자주 사용하는 HTML 태그에 대해서 알아보겠습니다.

 

 

<ul> 태그

Unordered List의 약어입니다. 순서 없이 어떤 리스트를 출력하고 싶을 때 유용하죠.

ul 태그는 <li> 태그와 함께 사용합니다.

<ul>

    <!-- list의 약어인 li태그안에 요소들을 넣는다! -->

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

아래와 같이 순서가 없는 리스트가 출력되네요.

 

<ol> 태그

Ordered List의 약어입니다. 순서가 있는 리스트를 출력합니다.

<ol>

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ol>

1,2,3을 출력하는데 순서가 있는거 보이시죠? 그리고 <li> 태그는 지금 보니까 자동 줄바꿈을 해주네요.

 

<h1> ~ <h6> 태그

강조하고 싶은 제목을 사용할 때 사용하는 태그입니다. h는 Head의 약어겠죠? h1부터 h6순으로 점점 작아집니다.

<h1>안녕</h1>

<h2>안녕</h2>

<h3>안녕</h3>

<h4>안녕</h4>

<h5>안녕</h5>

<h6>안녕</h6>

 

 

<img> 태그

img 태그는 이미지를 출력하는 태그로, src 속성, alt 속성 두 개의 속성과 함께 사용합니다.

src는 경로를 나타내고, alt는 이미지를 호출하지 못했을 때 띄우는 대체 텍스트입니다.

예전에 자주보던 엑박(엑스박스)가 alt라고 보시면 돼요.

<img src="./test1.jpg" alt="울릉도사진"> <br>

아래는 정상적으로 test1.jpg를 호출했을 때입니다. 웹페이지에 울릉도 사진이 잘 확인되네요.

<img src="./test123.jpg" alt="울릉도사진"> <br>

이번에는 test1.jpg 사진의 이름을 test123.jpg로 바꾸어 호출해보았습니다.

이런 이름의 이미지 파일은 없으니 alt로 대체텍스트가 나오는 것을 볼 수 있습니다.

 

<input> 태그

무언가를 입력할 때 사용하는 태그로 여러가지 type이 있습니다.

그 중 자주 사용하는 text, button, checkbox, password, radio, number 6개 타입을 보여드릴게요.

<input type="text" /> <br>

<input type="button" /> <br>

<input type="checkbox"/> <br>

<input type="password"/> <br>

<input type="radio"/> <br>

<input type="number"/> <br>

 

 

<button> 태그

input태그의 button 타입과 비슷하죠? button아래 원하는 문구를 작성할 수 있습니다.

<button>클릭하세요</button> <br><br>

 

 

<a> 태그

anchor의 약어로, 뭔가를 연결하는 역할을 합니다.

hyperlink 기능을 제공하는 태그입니다. href안에 연결 할 주소를 작성해줍니다.

<a href="https://naver.com">네이버</a>

아래와 같이 네이버 버튼이 활성화돼있고 이 버튼을 클릭하면 네이버로 이동이 됩니다. 

매우 자주 사용하는 태그겠죠?

 

 

 

이렇게 오늘은 자주 사용하는 태그에 대해서 알아보았습니다.