์น ( World Wide Web )
- ์ค๋๋ ์ฌ๋ฌ IT๊ธฐ์ ์ค ๊ฐ์ฅ ์ค์ํ ๊ธฐ์ ์ค ํ๋์ด๋ค.
- ์น์ ์ฌ๋ฌ ๊ฐ์ง ๋ค์ํ ๊ธฐ์ ๋ค์ด ํ๋ ฅํด์ Web์ด ๋์ํ๊ฒ ํ๋ ๊ฒ์ด๋ค.
์ธ์ด๋?
์ฌ๋๊ณผ ์ฌ๋๊ณผ์ ์ฝ์
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋?
์ฌ๋๊ณผ ์ปดํจํฐ์ ์ฝ์
HTML ( Hypertext Markup Language )
๋งํฌ๋ HTML์ ๋ณธ์ง HTML์ ๋ณธ์ง์ ์น์ ๋ณธ์ง
TAG
ํ๊ทธ๋ ์์ ํ๊ทธ์ ๋ ํ๊ทธ๋ก ๋๋์ด์ ธ ์๋ค.
<strong> = ๋ด์ฉ ๊ฐ์กฐ
์๋ ํ์ธ์, <strong> PIDS </strong>์ ๋๋ค.
์์ ๊ฐ์ ๋ด์ฉ์ ํ์ธํ ์ ์๋ค.
์์ฑ
<a> = ๋งํฌ๋ฅผ ๊ฑฐ๋ ํ๊ทธ
<a href="https://pids.tistory.com/">PIDS</a>
์๋ก์ด ์ฐฝ์ผ๋ก ์ฌ๋ ๋ฐฉ๋ฒ
<a href="https://pids.tistory.com/" target="_blank">PIDS</a>
๊ธฐ๋ณธ๊ฐ์ "_self"์ด๋ค.
[ ์์ฑ๊ณผ ์์ฑ์ ๊ตฌ๋ถ์๋ ๊ณต๋ฐฑ(์คํ์ด์ค๋ฐ)์ด๋ค. ]
List <li>
๋ฆฌ์คํธ ํ์์ผ๋ก ํ์ธ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<li>html</li>
<li>css</li>
<li>javascript</li>
</body>
</html>
์์ ๊ฐ์ด <li> ํ๊ทธ๋ก ๊ฐ์ธ์ฃผ๊ฒ ๋๋ฉด ํํ์ด์ง์์ ๋ฆฌ์คํธ ํ์์ผ๋ก ํ์ธํ ์ ์๋ค.
<ul> = ์์๊ฐ ์๋ list์ผ ๊ฒฝ์ฐ
<ol> = ์์๊ฐ ์๋ list์ผ ๊ฒฝ์ฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>java</li>
<li>python</li>
<li>C#</li>
</ul>
</body>
</html>
<ol>ํ๊ทธ๋ก ๋ฌถ์ ๊ฒ์ ์์๊ฐ ๊ธฐ์ฌ๋์ด์๋ค.
<ul>ํ๊ทธ๋ก ๋ฌถ์ ๊ฒ์ ์ ์ผ๋ก ๊ธฐ์ฌ๋์ด์๋ค.
<body>ํ๊ทธ๋ ์นํ์ด์ง์์ ๋ณธ๋ฌธ์ ํด๋นํ๋ ๋ด์ฉ์ ํ์ธํ ์ ์๋ ํ๊ทธ์ด๋ค.
<head> ํ๊ทธ๋ ๋ฌธ์์ ๋ํ ์ ๋ณด๋ฅผ ๋ด๊ณ ์๋ ํ๊ทธ์ด๋ค.
์์์ ๋ฐฐ์ด ๋ด์ฉ์ <body> ํ๊ทธ์์๋ง ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค.
<title> = ์นํ์ด์ง์ ์ด๋ฆ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Language</title>
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>java</li>
<li>python</li>
<li>C#</li>
</ul>
</body>
</html>
์ด๋ ๊ฒ <head> ํ๊ทธ ์์ <title> ํ๊ทธ๋ก ์ด๋ฆ์ ์ง์ ํด์ฃผ๋ฉด
์น ํ์ด์ง์ ์ฐฝ ์ด๋ฆ์ด ์ค์ ํ ๊ฐ์ผ๋ก ๋ฐ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
<html> ํ๊ทธ๋ <html>ํ๊ทธ ์์ ์๋ ๋ด์ฉ๋ค์ด <html> ๋ด์ฉ์ด๋ ๊ฒ์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ ค์ฃผ๋ ์ญํ ์ด๋ค.
html์ ์์ฑ์ 100~200๊ฐ ์ ๋๊ฐ ์๋ค.
https://opentutorials.org/course/1058
์ ์ฌ์ดํธ๋ฅผ ํตํด ํ์ํ ์์ฑ์ ์ฐพ์์ ์ฌ์ฉํ๋ ์ต๊ด์ ๊ธฐ๋ฅด๋๋ก ํ์.
์ค์ต
javascript์ ๋ํด ๊ณต๋ถํ๋ ์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด๋ณด์.
๋์ ๋ชฉ <h1~n>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Plus I Developer Stroy</h1>
<h2>Plus I Developer Stroy</h2>
Plus I Developer Stroy
</html>
์ด๋ ๊ฒ <h1>์ ๊ฐ์ฅ ํฌ๊ณ ๊ตต๊ฒ <h2>๋ ๊ทธ๋ณด๋จ ์๊ฒ ์๋ฌด๊ฒ๋ ์๋ ๊ฒ์ ์๊ณ ์๊ฒ ๋์ค๋ ๊ฑธ ํ์ธํ ์ ์๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>JavaScript</h1>
<ol>
<li>JavaScript๋?</li>
<li>๋ณ์์ ์์</li>
<li>์ฐ์ฐ์</li>
</ol>
</html>
์๋ฏธ๊ฐ ์ ๋๋ฌ๋๋ ์น - Semantic Web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<header>
<h1>JavaScript</h1>
</header>
<nav>
<ol>
<li>JavaScript๋?</li>
<li>๋ณ์์ ์์</li>
<li>์ฐ์ฐ์</li>
</ol>
</nav>
<article>
<h2>๋ณ์์ ์์</h2>
๋ณ์๋
<ul>
<li>๋ณํ๋ ๊ฐ</li>
<li>x=10์ผ ๋ ์ผ์ชฝํญ ... </li>
</ul>
</article>
</html>์ ์ฝ๋๋ ํ๋ฉด์ ๋ณด์ด๋ ๋ถ๋ถ์ ๋ฌ๋ผ์ง๋ ๊ฒ ์๋ค.
๋ค๋ง HTML ์ฝ๋๋ฅผ ๋ค๋ฅธ ๋๊ตฐ๊ฐ๊ฐ ํ์ธํ์์ ๋
๊ฐ ๋ด์ฉ์ด ์ด๋ค ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋์ง ํ์ธํ๊ธฐ ์์ํ๋ค.
์ด๋ ๋ฏ <header><nav><article>์ ํตํด ๊ฐ ๋ด๊ฒจ์๋ ๋ด์ฉ์ด ์ด๋ค ๋ถ๋ถ์ธ์ง๋ฅผ
ํ์ธํ๊ธฐ ์ฝ๊ฒ ๋ง๋๋ ๊ฒ ์ ์ฉํ๋ค.
๋ํ ๋ด๊ฐ ๋ง๋ค๋ ค๊ณ ํ๋ ํ์ด์ง๋ ํ ์คํธ๋ง ์กด์ฌํด์๋ ์๋๋ค.
ํ ์คํธ๋ฅผ ํด๋ฆญํ์์ ๋, ํด๋นํ๋ ํ ์คํธ์ ๊ด๋ จ๋ ์ ๋ณด๋ฅผ ์ ๊ณตํ ์ ์์ด์ผ ํ๋ค.
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ <a> ํ๊ทธ๋ฅผ ์ฌ์ฉํด์ ๋งํฌ๋ฅผ ์ ๊ณตํ๋ฉด ๋๋ค.
๊ทธ๋ ๊ฒ ํ๊ธฐ ์ํด์๋, ์ฌ๋ฌ ๊ฐ์ง html ํ์ผ์ด ํ์ํ๋ค.
์ด๋ ๊ฒ ํด๋นํ๋ ์ ๋ณด๋ฅผ ํด๋ฆญํ์์ ๋ ๋์ค๋ html ํ์ผ์ ์ฌ๋ฌ ๊ฐ ์์ฑํด์ฃผ๊ณ ,
๊ฐ html ํ์ผ๋ง๋ค ๋งํฌ๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript๋?</a></li>
<li><a href="http://localhost/page_vc.html">๋ณ์์ ์์</a></li>
<li><a href="http://localhost/page_op.html">์ฐ์ฐ์</a></li>
</ol>
</nav>
<article>
<h2>์ฐ์ฐ์</h2>
๊ณ์ฐ์ ํ ๋ ์ฌ์ฉ๋๋ ๊ฒ์
๋๋ค.
</article>
</html>์ด๋ ๊ฒ ๋ชจ๋ ํ ์คํธ์ ๋งํฌ๋ฅผ ๋ฌ์์ฃผ๊ฒ ๋๋ฉด
์ข ๊ทธ๋ด์ธํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ ์ฌ์ดํธ๋ฅผ ํ์ธํ ์ ์๋ค.
์ถ์ฒ: [์ํ์ฝ๋ฉ]์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ
'๐ Web > ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [MySQL ์ด๋ก ] (0) | 2022.09.20 |
|---|---|
| ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [PHP ์ค์ต] (0) | 2022.09.18 |
| ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [JS ์ค์ต] (0) | 2022.09.18 |
| ์น ์ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [JS,PHP ์ด๋ก ] (2) | 2022.09.16 |
| ์น ์ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [CSS] (0) | 2022.09.15 |
