๋ชฉ์ฐจ
์ง์ธ์๊ฒ ์ฐ๋ฝ์ด์์ ์ฐพ์๋ณธ ๋ฐฉ๋ฒ์ด๋ค.
์ด๋ฐ ๋ฐฉ๋ฒ๋ ์๊ตฌ๋ ใ ใ ใ ํ๊ณ ๋๋๋ค ใ ใ
๊ตฌ๊ธ ๋๋ผ์ด๋ธ
1. ๊ตฌ๊ธ ๋๋ผ์ด๋ธ์ ํ์ผ์ ์ฌ๋ฆฌ๊ณ , ์ฐํด๋ฆญ ํ์ฌ "๊ณต์ " ๋ฉ๋ด๋ฅผ ํด๋ฆญํ๋ค.
2. ์ฒ์์๋ ๊ถํ์ด "์ ํ๋จ" ์ผ๋ก ์ค์ ๋์ด์๋ค. "๋งํฌ๊ฐ ์๋ ๋ชจ๋ ์ฌ์ฉ์๋ก ๋ณ๊ฒฝ" ํด๋ฆญ
3. ์๋ ํ๋ฉด์ด ๋จ๋ฉด ๊ถํ์ด "๋ชจ๋ ์ฌ์ฉ์์๊ฒ ๊ณต๊ฐ"๋ก ์ ๋ฐ์ดํธ ๋ ๊ฒ์ด๋ค. "๋งํฌ๋ณต์ฌ" ๋ฅผ ํด๋ฆญํ๊ณ "์๋ฃ"๋ฅผ ๋๋ฅธ๋ค.
(๋ง์ฝ ๋งํฌ๋ฅผ ๋ณต์ฌํ์ง ๋ชปํ๊ณ ์ฐฝ์ ๋ซ์์ ๋๋, ์ด๋ฏธ์งํ์ผ์ ์ฐํด๋ฆญํ์ฌ "๋งํฌ์์ฑ"์ ํด๋ฆญํด์ ํ์ ์ฐฝ์ ์ฐ๋ค.)
4. ๋ณต์ฌํ ๋งํฌ๋ฅผ ์์ ํ ๊ฒ์ด๋ค. ๋ฉ๋ชจ์ฅ์ ์ผ์.
๊ธฐ์กด ๋งํฌ์์ [ s: ], [ file/d/ ], [ /view?usp=sharing ] 3๊ฐ์ง๋ฅผ ์ญ์ ํ๊ณ
[ uc?export=view&id= ] ๋ฅผ ์ถ๊ฐํด์ค๋ค.
์ฐธ๊ณ : http://www.somanet.xyz/2017/06/blog-post_21.html
์ด์ ๋ณํ๋ ๋งํฌ๋ง ์์ผ๋ฉด ์ด๋์๋ ๋ด ์ด๋ฏธ์ง๋ฅผ ๋ณด์ฌ์ค ์ ์๋ค.
๊ฐ๋จํ๊ฒ ์น์ฌ์ดํธ ๋ง๋ค์ด๋ณด๊ธฐ
์น์ฌ์ดํธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก HTML ์ด๋ ๋งํฌ์ ์ธ์ด๋ก ๊ตฌ์ฑ๋์ด์๋ค.
์๋์ฒ๋ผ <html>~</html> ํ๊ทธ ์์ <head>~</head>, <body>~</body> ๋ผ๋ 2๊ฐ์ง ํ๊ทธ๋ฅผ ์์ฑํ๋๊ฒ ๊ธฐ๋ณธ ํ์ด๋ค.
์ง๊ธ์ ์ ๋ง ๊ฐ๋จํ๊ฒ๋ง HTMLํ์ผ์ ๋ง๋ค์ด๋ณด์.
HTMLํ์ผ์ ๋ฉ๋ชจ์ฅ์ผ๋ก๋ ์์ฑ ๊ฐ๋ฅํ๋ ๋ฉ๋ชจ์ฅ์ ์ด์.
์ผ๋จ ์๋์ ๊ฐ์ด ์ ๋ ฅํ์.
ํ์ผ์ ์ ์ฅํ ๊ฑด๋ฐ, ๊ธฐ๋ณธ์ ์ผ๋ก *.txt๋ก ๋์ด์๋ ๊ฒ์
์ํ๋ ํ์ผ์ด๋ฆ.html๋ก ๋ฐ๊พธ๊ณ ์ฌ์ง์ฒ๋ผ ๋ง์ถ ํ์ ์ ์ฅํ์.
์ ์ฅ์์น์ ๊ฐ๋ณด๋ฉด ์๋์ฒ๋ผ ์นํ์ด์ง๊ฐ ์์ฑ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
(์ง๊ธ์ ์คํ์์ผฐ์ ๋ ๋นํ๋ฉด๋ง ๋์ค๋ ๊ฒ์ด ๋ง๋ค.)
์น์ฌ์ดํธ์ ๋ฐฐ๋ ์ด๋ฏธ์ง ์์ฑํ๊ธฐ
์ผ๋จ head๋ ๋ฉํ์ ๋ณด๊ฐ ๋ค์ด๊ฐ๋ ๊ณณ์ด๋ ์ฐ๋ฆฌ๊ฐ ์๋์ง๋ง์. ๊ฐ๋ฐ์๋ค์ด ์ด์ฌํ ์ฑ์๋ฃ์ ๊ฒ์ด๋ค.
์ฐ๋ฆฌ๋ body ์์์๋ง ํ๊ทธ๋ฅผ ์์ฑํ ๊ฒ์ด๋ค.
<html>
<head>
๋ฉํ์ ๋ณด
</head>
<body>
ํ๋ฉด์ ๋ณด์ฌ์ค ํ๊ทธ๋ค๋ก ์์ฑ
</body>
</html>
<img> ํ๊ทธ๋ ์ด๋ฏธ์ง๋ฅผ ๋ณด์ฌ์ค ์ ์๋ ํ๊ทธ์ด๋ค.
src ์์ฑ์ ๊ตฌ๊ธ ๋๋ผ์ด๋ธ์์ ๋ณํํ๋ ์ด๋ฏธ์ง ๋งํฌ๋ฅผ ๋ฃ์ด์ฃผ๋ฉด๋๊ณ
width, height ์์ฑ์ผ๋ก ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ฅผ ์ก์์ฃผ๋ฉด๋๋ค. (width, height๋ฅผ ์ก์ง ์์ผ๋ฉด ์๋ณธ ํฌ๊ธฐ๋งํผ ์ถ๋ ฅ๋๋ค.)
์์ฑ ๊ฐ์ " " ๋ก ๋ฌถ์ด์ ์์ฑํ๋ค.
<html>
<head>
</head>
<body>
<img width="100px" src="http://drive.google.com/uc?export=view&id=1p0VA51_j4r~~CD0NV" />
</body>
</html>
์์์ฒ๋ผ ์์ฑํ ์ฝ๋๋ฅผ ์ ์ฅํ๊ณ ๋ค์ ํ์ผ์ ์ด์ด๋ณด๋ฉด, ์ด๋ฏธ์ง๊ฐ ํ์๋๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
๋ฐฐ๋ ์ด๋ฏธ์ง์ ๋งํฌ ๊ฑธ๊ธฐ
๋งํฌ๋ฅผ ๋ง๋ค ๋๋ <a> ~ </a> ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ค.
href ์์ฑ์ ์ด๋ํ ๋งํฌ๋ฅผ ์์ฑํด์ฃผ๋ฉด๋๋ค.
์ง๊ธ์ ์ด๋ฏธ์ง์ ๋งํฌ๋ฅผ ๋ง๋ค ๊ฒ์ด๋, ์์์ ๋ง๋ <img> ํ๊ทธ๋ฅผ <a> ~ </a>๋ก ๊ฐ์ธ์ฃผ๋ฉด๋๋ค.
<html>
<head>
</head>
<body>
<a href="http://www.naver.com">
<img width="100px" src="http://drive.google.com/uc?export=view&id=1p0VA51_j4r~~CD0NV" />
</a>
</body>
</html>
์ ์ฅํ๊ณ ๋ค์ HTMLํ์ผ์ ์ด์ด๋ณด์
์ด์ ๊ณผ ๋ค๋ฅด๊ฒ ์ด๋ฏธ์ง ํ๊ทธ์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ค๋ณด๋ฉด ๋ง์ฐ์ค ๋ชจ์์ด ๋ฐ๋๋ฉด์ ํด๋ฆญ ๊ฐ๋ฅํด์ง ๊ฒ์ ํ์ธํ ์ ์๋ค.
ํด๋ฆญํ๋ฉด ๋ค์ด๋ฒ๋ก ์ด๋ํ๊ฒ๋๋ค!
๊ฐ๋จํ๊ฒ HTML์ ์์ฑํด๋ณด๊ณ , ์ด๋ฏธ์ง๋ฅผ ๋์ฐ๊ณ , ๋งํฌ๋ฅผ ๊ฑธ์ด๋ดค๋ค.
์ฌ๊ธฐ์ ์ค์ํ๊ฑด <img>, <a> ํ๊ทธ์ด๋ HTMLํ์ผ์ ๊ตฌ์กฐ๋ '์~ ๊ทธ๋ ๊ตฌ๋' ํ๊ณ ์ฐธ๊ณ ๋งํ์.