๐ณHTML / CSS
Last updated
Last updated
HTML์ ์ด๋์ ์ฐ๋ ์ธ์ด์ธ๊ฐ?
์นํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ๋์์ธํ๊ณ ์ถ์ ๋ ์ฌ์ฉํจ.
์ธ์์ ์กด์ฌํ๋ ๋ชจ๋ ์นํ์ด์ง๋ html ์ธ์ด๋ก ์์ฑํ๋ค.
HTML - Hypertext Markup Language
๋งํฌ์ ์ธ์ด๋ "์๋ฃ์ ๊ตฌ์กฐ๋ฅผ ํํํ๊ธฐ ์ํ ์ธ์ด"
์นํ์ด์ง์ ์ฐ๋ฆฌ๊ฐ ๊ธ๋ฃ๊ณ ๊ทธ๋ฆผ๋ฃ๊ณ ๋ฐ์ค๋ฃ๊ณ ๋ฒํผ๋ฃ๊ณ ..
์๋ฃ๋ฅผ ์ ๋ ฅํ๋ค.
๊ทธ ์๋ฃ๋ค์ด ์ด๋์ ๋ฐฐ์น๋๋์ง ๊ทธ๋ฐ ๊ฒ๋ค์ ๊ธฐ๋กํ๊ธฐ ์ํด
์กด์ฌํ๋ ์ธ์ด๊ฐ ๋ฐ๋ก HTML์ด๋ผ๊ณ ์ดํดํ๋ฉด ๋๋ค.
์ทจ์ ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ, ๊ธฐ์ ํ๋ณด ์ฌ์ดํธ์ ๊ฐ์ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ๋ง ํ๋ ์น์ฌ์ดํธ๋ฅผ ์ ์ ์ฌ์ดํธ๋ผ๊ณ ํ๊ณ ๋น๊ต์ ๊ฐ๋จํ๋ค.
์ผํ๋ชฐ, ์๋งค ์ฌ์ดํธ. SNS ๋ฑ๊ณผ ๊ฐ์ ์น์ฌ์ดํธ๋ ๋์ ์ฌ์ดํธ ๊ฒ์ผ๋ก ๋ณด์ด๋ ๊ป๋ฐ๊ธฐ๋ง ์ด์๊ฒ ๋ง๋ค๋ฉด ๋์ด ์๋๋ผ ์๋ฒ์ ์ ์ฅํ๊ณ ๋ค์ํ ๊ธฐ๋ฅ ๋ค์ด ํ์ํ๋ค. (ex. ์ฅ๋ฐ๊ตฌ๋, ํ๋ก์ฐ, ์ข์์ ๋ฑ๋ฑ)
HTML ํ์ผ ๊ธฐ๋ณธ ํ ํ๋ฆฟ
<!DOCTYPE>
: ํ์ฌ ๋ฌธ์๊ฐ HTML ๋ฌธ์ ํ์
์ ๋ช
์ํ๋ค. (HTML5 ๋ฌธ์ ํ์
์ <!DOCTYPE html>
์ด๋ค.)
<html>
: HTML ๋ฌธ์์ ๋ฃจํธ(root) ์์๋ฅผ ์ ์ํ๋ค.
<head>
: HTML ๋ฌธ์์ ๋ฉํ๋ฐ์ดํฐ(metadata)๋ฅผ ์ ์ํ๋ค.
๋ฉํ๋ฐ์ดํฐ(metadata)๋ HTML ๋ฌธ์์ ๋ํ ์ ๋ณด(data)๋ก ์น ๋ธ๋ผ์ฐ์ ์๋ ์ง์ ์ ์ผ๋ก ํํ๋์ง ์๋ ์ ๋ณด๋ฅผ ์๋ฏธํ๋ค.
์ด๋ฌํ ๋ฉํ๋ฐ์ดํฐ๋ <title>
, <style>
, <meta>
, <link>
, <script>
, <base>
ํ๊ทธ ๋ฑ์ ์ด์ฉํ์ฌ ํํํ ์ ์๋ค.
<title>
: HTML ๋ฌธ์์ ์ ๋ชฉ(title)์ ์ ์ํ๋ฉฐ, ๋ค์๊ณผ ๊ฐ์ ์ฉ๋๋ก ์ฌ์ฉ๋๋ค.
์น ๋ธ๋ผ์ฐ์ ์ ํด๋ฐ(toolbar)์ ํ์๋๋ค.
์น ๋ธ๋ผ์ฐ์ ์ ์ฆ๊ฒจ์ฐพ๊ธฐ(favorites)์ ์ถ๊ฐํ ๋ ์ฆ๊ฒจ์ฐพ๊ธฐ์ ์ ๋ชฉ์ด ๋๋ค.
๊ฒ์ ์์ง์ ๊ฒฐ๊ณผ ํ์ด์ง์ ์ ๋ชฉ์ผ๋ก ํ์๋๋ค.
<body>
: ์น ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ๋ณด์ด๋ ๋ด์ฉ(content) ๋ถ๋ถ์ด๋ค.
<h1>~<h6>
: ์ ๋ชฉ(heading)์ ๋ํ๋ธ๋ค.
<p>
: ๋จ๋ฝ(paragraph)์ ๋ํ๋ธ๋ค.
HTML / CSS / JavaScript ๋ฅผ ์ํ ํ์ดํ ์ฐ์ต
๊ฐ๋จํ HTML / CSS / JavaScript ์ฝ๋ ์์ฑ ํ ํ ์คํธํ๊ธฐ ์ข์ ์น ๊ธฐ๋ฐํธ์ง๊ธฐ