๊ฐœ๋ฐœ ์ง€์‹, ์Šคํฌ๋ฆฝํŠธ/HTML + CSS

HTMLํƒœ๊ทธ (Tags) ์™€ ์†์„ฑ (attribute)

์‹œํ๋ฆฌํ‹ฐ์ง€ํ˜ธ 2023. 11. 26. 20:50

ํƒœ๊ทธ(Tag)๋Š” <> ๊ธฐํ˜ธ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.

 

์ž‘์„ฑ ๊ทœ์น™์€, ํ…์ŠคํŠธ(Content)์˜ ์•ž ๋’ค์— ๋ชจ๋‘ ์ž‘์„ฑํ•˜์—ฌ ๋งˆ์น˜ ํ•ด๋‹น ํ…์ŠคํŠธ๋ฅผ ๊ฐ์‹ธ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์ž‘์„ฑํ•œ๋‹ค,

 

<tag name> content </tag name> 

 

ํƒœ๊ทธ์™€ content๊นŒ์ง€ ๋‹ค ํ•ฉ์ณ ์šฐ๋ฆฌ๋Š” ์š”์†Œ๋ผ๊ณ  ํ•œ๋‹ค.

 

HTML ํƒœ๊ทธ๋Š” 100์—ฌ๊ฐœ ์ด์ƒ ์กด์žฌ, ๊ทธ ์ค‘์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

 

๋งํฌ : https://www.advancedwebranking.com/seo/html-study

 

HTML Study - AWR SEO Guide

This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.

www.advancedwebranking.com

 

ํƒœ๊ทธ๋Š” ์†์„ฑ์„ ๊ฐ€์ง„๋‹ค.

 

๊ฐ๊ฐ์˜ ํƒœ๊ทธ๋“ค์€ ์†์„ฑ(attribute)์„ ๊ฐ€์ง€๋Š”๋ฐ, ์†์„ฑ์€ Tag๋ณ„๋กœ ๊ณ ์œ ํ•  ์ˆ˜๋„ ์žˆ๊ณ , ๊ณตํ†ต ๋  ์ˆ˜๋„ ์žˆ๋‹ค.

 

์ด๋Ÿฌํ•œ ์†์„ฑ๋“ค์€ ๊ฐ Tag๋ณ„ ๊ธฐ๋Šฅ์ด๋‚˜ ๋ถ€๊ฐ€ ์˜ต์…˜์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ ์šฉ๋„๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

 

 

<tag name attribute = "value"> content </tag name>

 

href ์†์„ฑ

ex)

<a href = "www.naver.com"> go to Never web </a>

 

 

 

ํƒœ๊ทธ ์ข…๋ฅ˜์™€ ๊ธฐ๋Šฅ ๊ทธ๋ฆฌ๊ณ  ์†์„ฑ

 

 

<<๊ธฐ๋Šฅ์„ ๊ฐ€์ง„ ํƒœ๊ทธ(Functional Tags):>>

 

<h1> -- <h6> ํƒœ๊ทธ

6 ๋‹จ๊ณ„๋กœ ๊ตฌํš ์ œ๋ชฉ์„ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ๊ฐ๊ฐ ํฌ๊ธฐ๊ฐ€ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ์ฃผ๋กœ ์ œ๋ชฉ์— ์ด์šฉ๋˜๋ฉฐ, ํ•œ ํŽ˜์ด์ง€๋‹น h1 ํ•˜๋‚˜๋งŒ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•˜๊ณ  ์žˆ๋‹ค.

 

<a> ํƒœ๊ทธ

-> 

์†์„ฑ :

href : <a href = "www.naver.com"> go to Never web </a>

 

<img> ํƒœ๊ทธ

์†์„ฑ:

src :

 

<form> ํƒœ๊ทธ

-> ํผ(Form)์ด๋ž€ ๋ณดํ†ต ์‚ฌ์šฉ์ž์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์„ ์œ„ํ•ด ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ๋ฐ›๋Š” ํƒœ๊ทธ์ด์ž ์ข…๋ฅ˜๋ฅผ ๊ฐ€๋ฅดํ‚จ๋‹ค.

์ฃผ๋กœ <input> ํƒœ๊ทธ์™€ ๊ฐ™์ด ์“ฐ์ธ๋‹ค.

 

<form>

    <label for="fname">First name:</label><br>

    <input type="text" id="fname" name="fname"><br>

    <label for="lname">Last name:</label><br>

    <input type="text" id="lname" name="lname">

</form>

 

* ์—ฌ๊ธฐ์„œ <br> ํƒœ๊ทธ๋Š” ์ค„ ๋ฐ”๊ฟˆ ํƒœ๊ทธ์ด๋‹ค. ์ค„์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค. ์—†์ด ์ž‘์„ฑ์‹œ ๋‚˜๋ž€ํžˆ ์ ํžˆ๋Š” ์ƒํ™ฉ์ด ๋‚˜์˜จ๋‹ค.

 

<Input> ํƒœ๊ทธ

-> ์ž…๋ ฅ์„ ๋ฐ›๋Š” ํƒœ๊ทธ ์ข…๋ฃŒ ํƒœ๊ทธ๊ฐ€ ์—†๋‹ค.

 

<button> ํƒœ๊ทธ

-> 

 

 

<<์˜๋ฏธ๋งŒ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํƒœ๊ทธ(Semantic Tags):>>

 

<div> ํƒœ๊ทธ

 

<p> ํƒœ๊ทธ

 

<header> ํƒœ๊ทธ

 

<nav> ํƒœ๊ทธ

 

<main> ํƒœ๊ทธ

 

<section> ํƒœ๊ทธ

 

<footer> ํƒœ๊ทธ