- HTML map & area tag
- <img src="" width="" height="" usemap=" write # + mapname">
- <map name=""></map>
- <area shape="" coords="" alt="" href="">
- shape ์ข ๋ฅ
- rect : ์ง์ฌ๊ฐํ
- circle : ์
- poly : ํ ์์ญ
- default : ์ ์ฒด ์์ญ
- coords : ์ ์, ์ขํ๋ฅผ ํ์
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> HTML Map tag Example</p>
<img src="https://www.w3schools.com/html/workplace.jpg" alt="you couldn't see that" usemap="#map">
<map name="map">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="css.html">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="basic.html">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="js.html">
</map>
</body>
</html>
- JS Script ์ฌ์ฉ
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> HTML Map tag Example</p>
<img src="https://www.w3schools.com/html/workplace.jpg" alt="you couldn't see that" usemap="#map">
<map name="map">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="css.html">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="basic.html">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="js.html" onclick="youClickMe()">
</map>
<script>
function youClickMe(){
alert("๋๋ฌ์ค์ ๊ณ ๋ง์.");
}
</script>
</body>
</html>
- HTML Background image
- Inline CSS
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-image: url('https://mblogthumb-phinf.pstatic.net/MjAxODAxMjRfMjQ0/MDAxNTE2ODAwMDQ4MjQy.7I_JZf_duXWvSLPA1-hoGMgBDnRWEsgW8RbzhBlZQ8Ug.S8nJ6XK2d1jMPSxQKuiopp2qfWAaptMEmVdeeLvTV6sg.JPEG.timeless_soul/20161005_040432_-649562736.jpg?type=w800');
background-size: 300px 150px;">
์๋
ํ์ธ์<br>
์ด๊ฑด ๋ฌดํ๋์ ์งค์
๋๋น<br>
์๋
ํ์ธ์<br>
์ด๊ฑด ๋ฌดํ๋์ ์งค์
๋๋น<br>
์๋
ํ์ธ์<br>
์ด๊ฑด ๋ฌดํ๋์ ์งค์
๋๋น<br>
์๋
ํ์ธ์<br>
์ด๊ฑด ๋ฌดํ๋์ ์งค์
๋๋น<br>
</div>
</body>
</html>
- Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url('https://mblogthumb-phinf.pstatic.net/MjAxODAxMjRfMjQ0/MDAxNTE2ODAwMDQ4MjQy.7I_JZf_duXWvSLPA1-hoGMgBDnRWEsgW8RbzhBlZQ8Ug.S8nJ6XK2d1jMPSxQKuiopp2qfWAaptMEmVdeeLvTV6sg.JPEG.timeless_soul/20161005_040432_-649562736.jpg?type=w800');
}
</style>
</head>
<body>
<div>
์๋
ํ์ธ์<br>
์ด๊ฑด ๋ฌดํ๋์ ์งค์
๋๋น<br>
</body>
</html>
background-img๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ด์ง์ ์ฌ๋ฌ ์ฌ์ง์ด ๋จ๋๋ฐ,
์ด๋ฅผ ํ๋๋ก ๋จ๊ฒ ํ๋ ๋ฐฉ๋ฒ์
background-repeat: no-repeat์ ์ฌ์ฉํ๋ฉด ๋๋ค.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url('https://mblogthumb-phinf.pstatic.net/MjAxODAxMjRfMjQ0/MDAxNTE2ODAwMDQ4MjQy.7I_JZf_duXWvSLPA1-hoGMgBDnRWEsgW8RbzhBlZQ8Ug.S8nJ6XK2d1jMPSxQKuiopp2qfWAaptMEmVdeeLvTV6sg.JPEG.timeless_soul/20161005_040432_-649562736.jpg?type=w800');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<div>
์๋
ํ์ธ์<br>
์ด๊ฑด ๋ฌดํ๋์ ์งค์
๋๋น<br>
</body>
</html>
+์ํ
- background-attachment
- fixed : ๊ณ ์ , ๋ฐฐ๊ฒฝ์ ํจ๊ป ์คํฌ๋กค์ด ๋์ง ์์
- local: ๋ฐฐ๊ฒฝ์ ์์ ์ฝํ ์ธ ์ ๊ณ ์ , ์์์ ์คํฌ๋กค์ด ์กด์ฌํ๋ฉด ์ฝํ ์ธ ์ ํจ๊ป ์คํฌ๋กค ๋จ
- scroll: ๋ฐฐ๊ฒฝ์ ์์ ์์ฒด์ ๊ณ ์ , ์์์ ์คํฌ๋กค์ด ์กด์ฌํด๋ ๋ฐฐ๊ฒฝ์ ํจ๊ป ์คํฌ๋กค ๋์ง ์์
https://www.codingfactory.net/10576 -> ์์ธํ ์ค๋ช ์ ์ด ๋ธ๋ก๊ทธ๋ฅผ ์ฐธ์กฐ
์ ๋ธ๋ก๊ทธ์์ ์ ์ํ ์ฝ๋๋ฅผ ํตํด์ ํ์ธํด๋ณด๋ฉด
์ธ๋ถ ์คํฌ๋กค๊ณผ ๋ด๋ถ ์คํฌ๋กค์ด ์๋ค๋ฉด,
fixed๋ ์ผ์ชฝ์์ ์๋ ์ฌ์ง์ด ๊ทธ ์ํ๋ก ์ ์ง๋์ด ๋ด๋ถ ์คํฌ๋กค์ ํ๋๋ผ๋ ์์ง์ด์ง ์๋๋ค. ๋ํ ์ธ๋ถ ์คํฌ๋กค์ ํ๋๋ผ๋ ์์ง์ด์ง ์๊ณ , ๊ทธ ์์น์ ๊ทธ๋๋ก ์ ์ง๋๋ค. (-> ์ ์ง๋์ด ์์ง์ด์ง ์๊ธฐ์ ๋ฐ์ผ๋ก ๋ด๋ ค๋ ์ก์์ผ๋ก ํ์ธ์ด ๊ฐ๋ฅํ๋ค.)
scroll์ ๋ด๋ถ ์คํฌ๋กค์ ํ๋ฉด ์์ง์ด์ง ์์ง๋ง, ์ธ๋ถ ์คํฌ๋ก๋ฅผ์ ํ๋ฉด ๋ด๋ถ ์์์ ํจ๊ป ์์ง์ด๊ฒ ๋๋ค.
local์ ๋ด๋ถ ์คํฌ๋กค์ ํ๋ฉด ์์ง์ด๊ณ , ์ธ๋ถ์คํฌ๋กค์ ํ๋ฉด ๋ด๋ถ ์์์ ํจ๊ป ์์ง์ธ๋ค.
- background-size
- cover : ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง์ ๊ฐ๋ก, ์ธ๋ก ๊ธธ์ด ๋ชจ๋ ์์๋ณด๋ค ํฌ๋ค๋ ์กฐ๊ฑดํ์ ๊ฐ๋ฅํ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์๊ฒ ์กฐ์ , ๊ฐ๋ก ์ธ๋ก ๋น์จ ์ ์ง, ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ ์์์ ํฌ๊ธฐ๋ณด๋ค ํญ์ ํฌ๊ฑฐ๋ ๊ฐ์
- contain: ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ๊ฐ๋ก, ์ธ๋ก ๋ชจ๋ ์์๋ณด๋ค ์๋ค๋ ์กฐ๊ฑดํ์ ๊ฐ๋ฅํ ํฌ๊ฒ ์กฐ์ , ์ด๋ฏธ์ง์ ๊ฐ๋ก, ์ธ๋ก ๋น์จ์ ์ ์ง, ๋ฐ๋ผ์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ ์์์ ํฌ๊ธฐ๋ณด๋ค ํญ์ ์๊ฑฐ๋ ๊ฐ์
- ์ง์ ๊ฐ ์ ํ๊ธฐ( ex > px)
cover๋ ์ค์ ๋น์จ, contain์ ์๋ณธ๋น์จ(์ด๋ฏธ์ง ์ ์ฒด๊ฐ ๋ณด์ด๋๋ก ์ค์ )์ ๋ํ๋ด๋ ๊ฒ์ด๋ค. ์ฆ, cover๋ <div>๋ฅผ ์ฌ์ฉํ์ ๋, ๋นํ์ด ์์ด ๊ฐ๋ ์ฑ์์ง ๊ฒ์ด๊ณ , contain์ ์ด๋ฏธ์ง ์ ์ฒด๊ฐ ๋ณด์ด๋ฉด ๊ฐ๋ ์ฑ์์ง์ง ์์ ์๋ ์๋ค.
'Programming Language > HTML | CSS | JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| HTML 10์ผ์ฐจ ๊ณต๋ถ (<link> rel, type ์์ฑ/ <table>) (0) | 2022.01.23 |
|---|---|
| HTML 9์ผ์ฐจ ๊ณต๋ถ <picture> Tag (0) | 2022.01.20 |
| HTML 7์ผ์ฐจ ๊ณต๋ถ (0) | 2022.01.18 |
| HTML 6์ผ์ฐจ ๊ณต๋ถ (0) | 2022.01.13 |
| HTML 5์ผ์ฐจ ๊ณต๋ถ (0) | 2022.01.12 |
