๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML

๋ธ”๋ก ๊ตฌ์กฐ / ์ธ๋ผ์ธ ๊ตฌ์กฐ

by Youcodein 2022. 8. 22.
728x90
๋ฐ˜์‘ํ˜•

๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์™€ ์ธ๋ผ์ธ ์š”์†Œ

1. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ

๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ๋งˆํฌ์—…์„ ํ•  ๋•Œ ์ค„์ด ๋ฐ”๋€Œ๋Š” ํŠน์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ธ”๋ก ๊ตฌ์กฐ์˜ ํŠน์ง•์€ ํ•œ ์ค„์— ํ•˜๋‚˜๋งŒ ํ‘œํ˜„๋˜๋Š” ๊ฒƒ, ์ฆ‰ ๊ฐ€๋กœ๋กœ ์ •๋ ฌ์ด ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ์˜์—ญ์„ ํฌํ˜„ํ•˜๋Š” ๋ถ€๋ถ„์ด๊ธฐ ๋•Œ๋ฌธ์—, ๋งˆ์ง„ ๊ฐ’์ด๋‚˜ ํŒจ๋”ฉ ๊ฐ’์ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋ธ”๋ก ๊ตฌ์กฐ๋Š” ๋ธ”๋ก ๊ตฌ์กฐ ์•ˆ์— ๋ธ”๋ก ๊ตฌ์กฐ์™€ ์ธ๋ผ์ธ ๊ตฌ์กฐ ๋ชจ๋‘ ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

2. ์ธ๋ผ์ธ ์š”์†Œ

์ธ๋ผ์ธ ์š”์†Œ๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์ฒ˜๋Ÿผ ํ–‰์ด ๋ฐ”๋€Œ์ง€ ์•Š๊ณ  ํ•œ ์ค„๋กœ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค. ํ•œ ์ค„์— ์—ฌ๋Ÿฌ๊ฐœ๊ฐ€ ํ‘œํ˜„์ด ๋˜๋ฉฐ, ๊ฐ€๋กœ๋กœ ์ •๋ ฌ์ด ๋ฉ๋‹ˆ๋‹ค. ์˜์—ญ์€ ํ…์ŠคํŠธ ๋ถ€๋ถ„๋งŒ ์˜์—ญ์œผ๋กœ ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ํŒจ๋”ฉ์ด๋‚˜ ๋งˆ์ง„์ด ์ ์šฉ๋˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ขŒ์šฐ์—๋Š” ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ธ๋ผ์ธ ๊ตฌ์กฐ๋Š” ์ธ๋ผ์ธ ๊ตฌ์กฐ ์•ˆ์— ๋ธ”๋ก ๊ตฌ์กฐ๊ฐ€ ์˜ฌ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๋ธ”๋ก ํƒœ๊ทธ/์ธ๋ผ์ธ ํƒœ๊ทธ

๋ธ”๋ก ํƒœ๊ทธ ์ธ๋ผ์ธ ํƒœ๊ทธ
<div>, <address>, <article>, <aside>,
<audio>, <blockquote>, <canvas>,
<dd>, <div>, <dl>, <fieldset>,
<figcaption>, <figure>, <footer>,
<form>, <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>, <header>, <hgroup>, <hr>,
<noscript>, <ol>, <output>, <p>, <pre>,
<section>, <table>, <ul>, <video>
<span>, <a>, <abbr>, <acronym>,
<b>, <bdo>, <big>,
<br/>, <button>, <cite>, <code>,
<dfn>, <em>, <i>,
<img>, <input>, <kbd>, <label>,
<map>, <object>, <q>,
<samp>, <small>, <script>, <select>,
<span>, <strong>, <sub>,
<sup>, <textarea>, <tt>, <var>

3. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์™€ ์ธ๋ผ์ธ ์š”์†Œ์˜ ํŠน์„ฑ

๋งˆํฌ์—…์„ ํ•  ๋•Œ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์™€ ์ธ๋ผ์ธ ์š”์†Œ์˜ ํŠน์„ฑ์„ ์ž˜ ์•Œ๊ณ  ์žˆ์–ด์•ผ๋งŒ ๋ฌธ๋ฒ•์  ์˜ค๋ฅ˜๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

-๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์™€ ์ธ๋ผ์ธ ์š”์†Œ์˜ ํŠน์ง• ์ •๋ฆฌ

์š”์†Œ ์œ ํ˜• ํŠน์ง•
๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ 1. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ์ค„ ๋ฐ”๊ฟˆ์ด ์ผ์–ด๋‚ฉ๋‹ˆ๋‹ค.
2. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ํ…์ŠคํŠธ(๋ฌธ์ž)์™€ ์ธ๋ผ์ธ ์š”์†Œ๋ฅผ ์ž์‹ ์š”์†Œ๋กœ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
3. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ ์ค‘์—๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋ฅผ ์ž์‹ ์š”์†Œ๋กœ ํฌํ•จ ํ•  ์ˆ˜ ์žˆ๋Š” ์š”์†Œ์™€ ํฌํ•จํ•  ์ˆ˜ ์—†๋Š” ์š”์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
์ธ๋ผ์ธ ์š”์†Œ 1. ์ธ๋ผ์ธ ์š”์†Œ๋Š” ์ค„ ๋ฐ”๊ฟˆ์ด ์ผ์–ด๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
2. ์ธ๋ผ์ธ ์š”์†Œ๋Š” ํ…์ŠคํŠธ(๋ฌธ์ž)์™€ ์ธ๋ผ์ธ ์š”์†Œ๋ฅผ ์ž์‹ ์š”์†Œ๋กœ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
3. ์ธ๋ผ์ธ ์š”์†Œ๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋ฅผ ์ž์‹ ์š”์†Œ๋กœ ํฌํ•จํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
-HTML5๋กœ ๋„˜์–ด์˜ค๋ฉฐ ์ข€ ๋” ๋ณต์žกํ•ด์ง„ ์ฝ˜ํ…์ธ ์˜ ์ข…๋ฅ˜์™€ ํƒœ๊ทธ๋“ค
์ฝ˜ํ…์ธ  ์ข…๋ฅ˜ ๋‚ด์šฉ ํ•ด๋‹น ์š”์†Œ
๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ์ฝ˜ํ…์ธ  <head> ํƒœ๊ทธ ์•ˆ์— ํฌํ•จ๋˜๋Š” ์š”์†Œ๋“ค๋กœ ์ฝ˜ํ…์ธ ์˜ ํ‘œํ˜„,๋™์ž‘ ์„ค์ •, ๋ฌธ์„œ๊ฐ„ ๊ด€๊ณ„๋ฅผ ์„ค์ •, ์ •๋ณด์ „๋‹ฌ์„ ํฌํ•จํ•˜๋Š” ์š”์†Œ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>, ...
ํ”Œ๋กœ์šฐ ์ฝ˜ํ…์ธ  <body> ํƒœ๊ทธ ์•ˆ์— ํฌํ•จ๋˜๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์š”์†Œ๋“ค๋กœ ๋‚ด์šฉ ํ๋ฆ„์— ๊ด€ํ•œ ์š”์†Œ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <address>, <p>, <a>, <img>, <ul>, <ol>,<dl>, <table>, <form>, ...
์„น์…˜ ์ฝ˜ํ…์ธ  heading๊ณผ footer์˜ ์ ์œ„๋ฅผ ์ •์˜ํ•˜๋Š” ์š”์†Œ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. <article>, <aside>, <nav>, <section>, ...
ํ—ค๋”ฉ ์ฝ˜ํ…์ธ  ์„น์…˜์˜ ํ—ค๋”๋ฅผ ์ •์˜ํ•˜๋Š” ์š”์†Œ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, ...
ํ”„๋ ˆ์ด์ง• ์ฝ˜ํ…์ธ  ํ…์ŠคํŠธ๋ฅผ ๋งˆํฌ์—…ํ•˜๋Š” ์š”์†Œ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. <a>, <em>, <storng>, <sub>, <sup>, <label>, ...
์ž„๋ฒ ๋””๋“œ ์ฝ˜ํ…์ธ  HTML๋ฌธ์„œ์— ๋‹ค๋ฅธ ๋ฆฌ์†Œ์Šค๋ฅผ ์‚ฝ์ž…ํ•˜๋Š” ์š”์†Œ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. <img>, <audio>, <video>, <iframe>, ...
์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์ฝ˜ํ…์ธ  ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ์ž‘์šฉ์„ ์œ„ํ•œ ์š”์†Œ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. <a>, <button>, <audio>, <video>, <select>, ...
728x90
๋ฐ˜์‘ํ˜•

'HTML' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

๊ตฌ์กฐ ๊ด€๋ จ ์š”์†Œ  (2) 2022.08.17
์›น ์ ‘๊ทผ์„ฑ/์›น ํ˜ธํ™˜์„ฑ  (5) 2022.08.09

๋Œ“๊ธ€