웹 개발 공부 : Front-end

프론트엔드 #3 HTML 주요 태그들

Developer KTU 2020. 7. 25. 20:33
반응형

※ HTML 코드는 크게 두 가지로 나눌 수 있다.

1) BOX : 아이템들을 잘 정리할 수 있도록 도와줌 (섹셔닝)

대표적인 종류)

header, nav, aside, main, footer, section, article (재사용이 되는 아이템을 그룹화), div (아무곳에서나 쓸 수 있음, 묶어서 스타일링이 가능하고 굉장히 많이 쓰임), span, form 등

2) ITEM : 사용자들이 볼 수 있는 아이템

a (링크를 걸 수 있는 태그), button, input, label, img, video, audio, map, canvas, table

==> ITEM도 두 가지로 나눌 수 있다.

1) Block : 한 줄에 하나 차지

2) Inline : 공간이 허용하면 배치가 가능

 

※ Attributes (속성)

<a href="https://google.com" target=_blank>click</a>

href ~와 target~이 a태그의 속성이다.

<p class="editor-note">My cat is very grumpy</p>

CSS애서는 HTML의 class를 통해 원하는 클래스들을 어떻게 꾸밀지 정하게 된다.

 

※ 사용자에게 보여지지 않는  BOX와 사용자에게 보여지는 ITEM 실습코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>repl.it</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<!-- Box vs Item-->
		<!-- BOX -->
		<header></header>
		<footer></footer>
		<section></section>
		<div></div>
		<!-- ITEM-->
		<h1>H1</h1>
		<button>Click Me!</button>
	</body>
</html>

 

※ 많이 쓰이는 주요 태그들

1) a 태그

<a href="https://google.com" target=_blank>click</a>

href => 링크하고 싶은 주소를 적는 곳

target => 어느곳에다가 이 페이지를 열것인지 설정 (target 사용법을 잘 몰라도 mdn 사이트에 접속하면 target등 여러 태그들의 사용법(예제, 속성값)을 알 수 있다.)

 

2) 텍스트 관련 태그

<p>태그 : 문단을 정의할때 쓰는 태그

<b>태그 : 볼드체 사용, Inline 태그 (bold체가 다음 줄로 넘어가지 않으므로)

<span>태그 : 글자의 배경색 지정, Inline 태그 (배경색이 지정된다고 해서 그 문장이 다음 라인으로 넘어가지 않기 때문)

<div>태그 : BLOCK태그, <div>로 지정하면 해당 문장은 다음 줄로 넘어감

 

3) 리스트 관련 태그 (ol vs ul)

※ ol관련 꿀팁!

-> 리스트를 3개 만들고 싶은데 일일이 입력하면 번거로움 이때!

ol>li*3 + TAB 키누르면  (ul, li 다 포함)

	<ol>
	    <li>apple</li>
	    <li>pineapple</li>
	    <li>tomato</li>
	  </ol>

이렇게 자동 완성이 됨!

<ol>태그에 대해 더욱 다양한 속성값을 보고 싶다면 mdn사이트에서 알아보자

※ 결과

	<ol type="i">
	    <li>alpple</li>
	    <li>pineapple</li>
	    <li>tamoto</li>
	  </ol>

※ 결과

	<ul>
	    <li>Hello</li>
	    <li>world</li>
	    <li>hehe</li>
	  </ul>

※ 결과

 

4) Input 태그

사용자에게 입력을 받는 태그

	<!DOCTYPE html>
	<html>
	<head>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width">
	  <title>JS Bin</title>
	</head>
	<body>
	  <!-- Input-->
	  <label for="">Name:</label>
	  <input id="input_name" type="text">
	</body>
	</html>

※ 결과

Label 태그와 input태그는 모두 Inline태그이다.

Input태그는 한 페이지 내에서 굉장히 많이 사용되기 때문에 id를 이용해서 개인 식별자를 이용하는것이 좋다. 그리고 input태그에도 아주 다양한 속성들이 존재하니 mdn사이트에서 찾아보고 연습해보자!

반응형