이번에 알아볼 태그는 <h> <img> <select> 태그이다.
h태그는 일정하게 정해진 글씨의 크기와 굵기를 사용할 수 있는 태그이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 align = "left"> 안녕하세요 </h1>
<h2 align = "right"> 안녕하세요</h2>
<h3 align = "center"> 안녕하세요</h3>
<h4> 안녕하세요 </h4>
<h5> 안녕하세요 </h5>
<h6> 안녕하세요 </h6>
<div style = "font-weight :bold;"> 안녕하세요</div>
</body>
</html>
결과는 이렇게 나온다. 별 다를 건 없고, h1부터 쭉 숫자가 내려갈수록 작아지는 특징이 있다.
일반적인 폰트에 bold 속성을 주면, <h4>와 비슷하다.
*번외로, 저번에 공백문자를 로 사용했는데,
그 외로, 웹상에서 표시할 수 있는 것들은 여러 가지가 있다.
< 는 '<'를, >는 '>' 를 나타낼 수 있고, & 는 '&'를 나타낸다.
<img> 태그는 이미지를 넣는 태그이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href = "https://www.naver.com">
<img src = "/Lecture-WEB/html/images/애옹이.jpg" width = "500" height = "500"
alt = "애옹이" border = "2" style = "border-color:pink" title = "클릭!!!!">
</a>
<hr>
<figure>
<img src="images/boy.gif" width = "100" height = "100">
<figcaption> 둠췻 </figcaption>
</figure>
</body>
</html>
<a>태그 사이에 이렇게 <img>태그를 넣으면,
신기하게도 그림에 링크가 걸린다.
src는 소스의 경로를 넣는데, 저번에 말했듯이
절대경로나 상대경로로 넣어주면 된다.
alt속성은 그림이 렌더링되지 못했을 때
엑박처럼 뜨면서 써지는 글이다.
title속성은 마우스를 올렸을 때 뜨는 글이다.
figure속성도 그림을 넣을 떄 사용하면 좋은데,
하위 속성인 figcaption을 넣어서 그림의 주석을
달아줄 수 있다.
마지막으로, <select> 태그이다.
select태그는 이름처럼 어떤 리스트를 보여주고, 거기서 선택할 수 있게끔 하는 목록을 만든다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2> 집밥천국 </h2>
<select size = "3"> <!-- 4칸씩 보여진다 -->
<option> 집떡볶이 </option>
<option> 집순대 </option>
<option> 집떡라면 </option>
<option> 집튀김 </option>
<option> 집쫄면 </option>
</select>
<hr>
<select multiple> <!-- 다양하게 선택 가능 -->
<option> 집떡볶이 </option>
<option> 집순대 </option>
<option> 집떡라면 </option>
<option> 집튀김 </option>
<option> 집쫄면 </option>
</select>
<hr>
<select size = "5">
<optgroup label = "양식">
<option> 집파스타 </option>
<option> 집오믈렛 </option>
<option> 집시카고피자 </option>
<option> 집수제햄버거 </option>
<option> 집리조또 </option>
<option> 집스테이크 </option>
</optgroup>
<optgroup label="한식">
<option>김치불고기덮밥</option>
<option>뚝배기불고기</option>
<option>비빔밥</option>
<option>김치찌개</option>
</optgroup>
</select>
<input name="kimbap" list="food" placeholder="country">
<datalist id = "food">
<option value = "참치김밥"></option>
<option value = "우엉김밥"></option>
<option value = "마약김밥"></option>
<option value = "매콤김밥"></option>
</datalist>
</body>
</html>
이렇게 만들어진다.
select size는 보여지는 칸 수
select multiple은 여러 개를 선택 가능
optgroup은 하나의 레이블로 대표적인 이름?을 지어줄 때 유용하다.
datalist는 html5에 오면서 생겼는데,
미리 정의해둔 리스트를 보여준다.
<input>태그에서 list이름을 datalist의 id로 연동해주면 된다.
'HTML&CSS&JS' 카테고리의 다른 글
| [HTML5] <audio> <video> <iframe> < embed> 태그 (0) | 2020.06.21 |
|---|---|
| [HTML5] <ol> <ul>, <li>, <header>, <section>, <footer> 태그 (0) | 2020.06.21 |
| [HTML5] <div>, <span>, <p>, <hr> 태그 (0) | 2020.06.21 |
| [HTML5] HTML 시작하기 2 (절대경로, 상대경로, A태그) (0) | 2020.06.21 |
| [HTML5] HTML 시작하기 1 (Apache Tomcat 9 설치) (0) | 2020.06.21 |
