์ํ์ฝ๋ฉ WEB-HTML&Internet
ํ๋ก์ ํธ๋๊ธฐ โ
๊ธฐํ โ
์ฝ๋ฉ๊ณผ HTML โ
HTML ์ฝ๋ฉ ์ค์ต ํ๊ฒฝ ์ค๋น โ
- ์ํฐ ์ค์น
- ์น๋ธ๋ผ์ฐ์ ์์ ctrl + O => html ํ์ผ ์ ํํด์ ์คํ
๊ธฐ๋ณธ ๋ฌธ๋ฒ - ํ๊ทธโ
- <strong> </strong> ๊ฐ์กฐ (๊ตต๊ฒ)
- <u> </u> ์ธ๋๋ผ์ธ
- ํ๊ธ์ด ๊นจ์ง๋? <meta charset="utf-8">
ํ๋ช ์ ์ธ ๋ณํโ
- W3C(The World Wide Web Consortium) ๊ตญ์ ๋ฏผ๊ฐํ์คํ๊ธฐ๊ตฌ
ํต๊ณ์ ๊ธฐ๋ฐํ ํ์ตโ
-https://www.advancedwebranking.com/seo/html-study/
์ค๋ฐ๊ฟโ
- <br> ์ค๋ฐ๊ฟ
- ๋ฌด์์ธ๊ฐ ์ค๋ช ํ์ง ์๋ ํ๊ทธ๋ ๊ฐ์ธ์ผํ๋ ์ปจํ ์ธ ๊ฐ ์์ผ๋ฏ๋ก ํ๊ทธ๋ฅผ ๋ซ์ง ์๋ ๊ท์น์ด ์์.
(img, input, br, hr, meta ๋ฑ)
- ์ค๋ฐ๊ฟ์ ํ๋ ์ด์ ๋ ๋จ๋ฝ์ ํํํ๊ธฐ ์ํด์ ๋จ๋ฝ(paragraph)
- <p> ๋จ๋ฝ ํํ (์ค๋ฐ๊ฟ์์)
- <p style="margin-top:45px;"> ๋ด๋ถ์คํ์ผ CSS
HTML ์ด ์ค์ํ ์ด์ โ
- ์น์ ํต์ฌ์ ์ธ ์ฒ ํ์ ์ ๊ทผ์ฑ
์ตํ์ ๋ฌธ๋ฒ ์์ฑ๊ณผ imgโ
- ํ๊ทธ ์์ฑ
- <img src="" >
- <img width="100%">
๋ถ๋ชจ ์์๊ณผ ๋ชฉ๋กโ
- <li> ๋ชฉ๋ก
- <ul> ์์์๋ ๋ชฉ๋ก
- <ol> ์์์๋ ๋ชฉ๋ก
๋ฌธ์์ ๊ตฌ์กฐ์ ์ํผ์คํ๋คโ
- <title> </title> ์นํ์ด์ง ์ ๋ชฉ
- <meta charset="utf-8"> ์นํ์ด์ง๊ฐ ์ ์ฅ๋ ๋ฌธ์ ํํ ๋ฐฉ์ + ์น๋ธ๋ผ์ฐ์ ๊ฐ ์นํ์ด์ง๋ฅผ ํด์ํ๋ ๋ฐฉ์์ด ์ผ์นํ์ง ์์ ๋ ๋ฌธ์๊ฐ ๊นจ์ง
- <head> </head>
- <body> </body>
HTML ํ๊ทธ์ ์ ์ โ
- anchor์ ์ฒซ๊ธ์ a
- <a href="" target="_blank" title="" ></a>
- href ๋ Hyper Text Reference
- target="_blank" ์์ฐฝ์์ ํ์ด์ง๊ฐ ์ด๋ฆฌ๊ฒ ํ๋ ์์ฑ
- title ์ด๋ค ๋ด์ฉ์ ๋ด๊ณ ์๋์ง ํดํ์ผ๋ก ๋ณด์ฌ์ค
์น์ฌ์ดํธ ์์ฑโ
์์์นโ
- ๋ถ์ฐ๋ ํํ์ ํต์ ์์คํ ์ ๊ตฌ์ํ๊ฒ ๋๋๋ฐ ๊ทธ๊ฒ์ด ์ธํฐ๋ท์ ์์์ด์์ต๋๋ค.
- ์น์ ๊ณ ํฅ์ ์ค์์ค / ์ ๋ฝ์ ์๋ฌผ๋ฆฌ์ฐ๊ตฌ์
- ํ๋ฒ๋์ค๋ฆฌ , ์ธ๊ณ์ต์ด์ ์น๋ธ๋ผ์ฐ์ ์๋ ์์ด๋ ์น(world wide web) =์์์น
์ธํฐ๋ท์ ์ฌ๋ ์ด์ : ์๋ฒ์ ํด๋ผ์ด์ธํธโ
- ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ ) <> ์๋ฒ (์๋ฒ)
- 1 ์ปดํจํฐ์ ์ง์ ์น ์๋ฒ ์ค์น
- 2 ์น์๋ฒ ์ ๊ณต ์ ์ฒด ์ด์ฉ = ์น ํธ์คํ ์ ์ฒด
์นํธ์คํ github pages (2022๋ ์์ ํ)โ
- ๊น ํ๋ธ ๊ฐ์ ํ ์น ํธ์คํ ํ๋ ๋ฐฉ๋ฒ
- ์ ์ฅ์ ์์ฑ > ํ์ผ ์ ๋ก๋ > ์ธํฐ๋ท์ ํตํด ์๋น์ค (setting > pages > branch ~