HTML 문서에 이미지 적용방법입니다.
img 객체 사용방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Images: img</title>
<style>
body {
font-size: 20px;
}
article {
width: 480px;
margin: auto;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<article>
<h1>Images</h1>
<p>HTML images, inserted using the <code>img</code> tag, are used for meaningful content.</p>
<img src="./img/ecuador_anaconda.jpg" width="480" height="287" alt="Anaconda">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="./img/ecuador_tarantula.jpg" width="480" height="360" alt="Tarantula">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="./img/ecuador_owlMonkeys.jpg" width="480" height="315" alt="Owl monkeys">
</article>
</body>
</html>배경 이미지 : background-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Images: background-image</title>
<style>
body {
color: #fc6;
background-color: #c72;
background-image: url("./img/bg.gif");;
font-size: 20px;
margin: 0;
}
article {
width: 480px;
padding: 20px;
margin: auto;
background-color: rgba(0,0,0,.2);
}
h1 {
text-align: center;
}
a {
color: white;
}
</style>
</head>
<body>
<article>
<h1>Images</h1>
<p>CSS images, applied using the <code>background-image</code> property, are used for decoration.</p>
<p>HTML images, inserted using the <code>img</code> tag, are used for meaningful content.</p>
<img src="./img/ecuador_anaconda.jpg" width="480" height="287" alt="Anaconda">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="./img/ecuador_tarantula.jpg" width="480" height="360" alt="Tarantula">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="./img/ecuador_owlMonkeys.jpg" width="480" height="315" alt="Owl monkeys">
</article>
</body>
</html>배경 위치 지정 : background-position 속성 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Positioning backgrounds</title>
<style>
body {
font: 14px courier;
background-color: #fff;
color: #000;
margin: 0;
padding: 10px;
}
p {
background-color: #ccc;
background-image: url("./img/bg.gif") no-repeat;
height: 200px;
text-align: center;
margin: 20px;
}
code {
background-color: white;
padding: 0 15px 2px;
}
#p0 {
background: none;
height: auto;
}
#p1 {
background-position: center;
}
#p2 {
background-position: right;
}
#p3 {
background-position: bottom left;
}
#p4 {
background-position: 20px;
}
#p5 {
background-position: 50%;
}
#p6 {
background-position: 75% 25px;
}
#p7 {
background-position: top 99px right 9px;
}
</style>
</head>
<body>
<p id="p0">In addition to <code>background-repeat: no-repeat</code>…</p>
<p id="p1"><code>background-position: center;</code></p>
<p id="p2"><code>background-position: right;</code></p>
<p id="p3"><code>background-position: bottom left;</code></p>
<p id="p4"><code>background-position: 20px;</code></p>
<p id="p5"><code>background-position: 50%;</code></p>
<p id="p6"><code>background-position: 75% 25px;</code></p>
<p id="p7"><code>background-position: top 99px right 9px;</code></p>
</body>
</html>반복되는 배경 이미지 : background-repeat 속성 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat</title>
<style>
body {
font: 14px courier;
background: #fff;
color: #000;
margin: 0;
padding: 10px;
}
p {
background-color: #ccc;
background-image: url("./img/bg.gif");
margin: 10px;
width: 300px;
height: 300px;
float: left;
text-align: center;
}
code {
background: white;
padding: 0 15px 2px;
}
#p1 {
background-repeat: repeat;
}
#p2 {
background-repeat: no-repeat;
}
#p3 {
background-repeat: repeat-x;
}
#p4 {
background-repeat: repeat-y;
}
#p5 {
background-repeat: space;
}
#p6 {
background-repeat: round;
}
</style>
</head>
<body>
<p id="p1"><code>background-repeat: repeat;</code></p>
<p id="p2"><code>background-repeat: no-repeat;</code></p>
<p id="p3"><code>background-repeat: repeat-x;</code></p>
<p id="p4"><code>background-repeat: repeat-y;</code></p>
<p id="p5"><code>background-repeat: space;</code></p>
<p id="p6"><code>background-repeat: round;</code></p>
</body>
</html>배경 첨부 : 스크롤하는 내용으로 백그라운드가 작동하는 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment</title>
<style>
body {
font: 20px courier;
background-image: url("./img/bg.gif");
background-color: #c72;
background-attachment: fixed;
color: #fff;
margin: 20px;
text-align: center;
}
article {
max-width: 500px;
margin: 0 auto;
}
h1 {
font-size: 30px;
margin: 80px 0;
}
h2 {
font-size: 20px;
}
code {
background: rgba(0,0,0,.25);
padding: 0 15px 2px;
}
p {
background-image: url("./img/x.png");
height: 300px;
padding: 20px;
margin-bottom: 80px;
overflow: auto;
}
#p1 {
background-attachment: scroll;
}
#p2 {
background-attachment: fixed;
}
#p3 {
background-attachment: local;
}
</style>
</head>
<body>
<article>
<h1><code>background-attachment</code></h1>
<h2><code>background-attachment: scroll;</code></h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet.</p>
<h2><code>background-attachment: fixed;</code></h2>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet.</p>
<h2><code>background-attachment: local;</code></h2>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet.</p>
</article>
</body>
</html>배경 이미지 크기 : background-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size</title>
<style>
body {
font: 14px courier;
background-color: #c72;
background-image: url("./img/bg.gif");
color: #000;
margin: 0;
padding: 10px;
}
p {
background-color: #7a796b;
background-image: url("./img/tikal.jpg");
margin: 10px;
width: 300px;
height: 300px;
float: left;
text-align: center;
}
code {
background: white;
padding: 0 15px 2px;
}
#p1 {
background-size: auto;
}
#p2 {
background-size: 50%;
}
#p3 {
background-size: 100px;
}
#p4 {
background-size: 100px 100px;
}
#p5 {
background-size: contain;
}
#p6 {
background-size: cover;
}
</style>
</head>
<body>
<p id="p1"><code>background-size: auto;</code></p>
<p id="p2"><code>background-size: 50%;</code></p>
<p id="p3"><code>background-size: 100px;</code></p>
<p id="p4"><code>background-size: 100px 100px;</code></p>
<p id="p5"><code>background-size: contain;</code></p>
<p id="p6"><code>background-size: cover;</code></p>
</body>
</html>여러 배경 : 단일 상자 안에 배경을 겹쳐서 표시합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple backgrounds</title>
<style>
body {
font: 14px/1.5 courier, monospace;
background: white;
color: black;
margin: 20px;
}
pre, #htmldog {
background-color: #c72;
height: 200px;
margin: 20px 0;
overflow: auto;
}
pre code {
background: white;
padding: 2px 10px 4px 0;
}
#p0 {
background-image: url("./img/bg.gif");
}
#p1 {
background-image: url("./img/circle.png"), url("./img/bg.gif");
}
#p2 {
background-image: url("./img/circle.png"), url("./img/bg.gif");
background-repeat: no-repeat, repeat;
}
#p3 {
background-image: url("./img/circle.png"), url("./img/bg.gif");
background-repeat: no-repeat, repeat;
background-position: center;
}
#p4 {
background: url("./img/circle.png") center no-repeat, url("./img/bg.gif");
}
</style>
</head>
<body>
<h1>Multiple backgrounds</h1>
<p>Using the <code>background-image</code> and <code>background</code> CSS properties.</p>
<pre id="p0"><code>background-image: url("bg.gif");</code></pre>
<pre id="p1"><code>background-image: url("circle.png"), url("bg.gif");</code></pre>
<pre id="p2"><code>background-image: url("circle.png"), url("bg.gif");</code>
<code>background-repeat: no-repeat, repeat;</code></pre>
<pre id="p3"><code>background-image: url("circle.png"), url("bg.gif");</code>
<code>background-repeat: no-repeat, repeat;</code>
<code>background-position: center;</code></pre>
<pre id="p4"><code>background: url("circle.png") center no-repeat, url("bg.gif");</code></pre>
</body>
</html>선형 그래디언트 : CSS로 그라디언트 배경 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Linear gradients</title>
<style>
html {
background: -webkit-linear-gradient(left, yellow, red);
background: linear-gradient(to left, yellow, red);
height: 100%;
}
body {
font: 14px/1.5 courier;
color: #000;
}
p {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px 0 0 20px;
float: left;
border: 1px solid yellow;
}
#gradient1 {
background-color: #888888; /* 그래디언트를 생성 할 수없는 브라우저에 배경 이미지를 사용할 수 있습니다. */
background-image: url("./img/gradientLinear.jpg") repeat-x;
background: -webkit-linear-gradient(yellow, red); /* 그래디언트를 처리 할 수있는 주요 브라우저를 위한 백업 */
background: linear-gradient(yellow, red); /* The CSS3 standard */
}
#gradient2 {
background: -webkit-linear-gradient(right, yellow, red);
background: linear-gradient(to right, yellow, red);
}
#gradient3 {
background: -webkit-linear-gradient(bottom right, yellow, red);
background: linear-gradient(to bottom right, yellow, red);
}
#gradient4 {
background: -webkit-linear-gradient(20deg, yellow, red);
background: linear-gradient(20deg, yellow, red);
}
#gradient5 {
background: -webkit-linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));
background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));
}
#gradient6 {
background: -webkit-linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);
background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);
}
</style>
</head>
<body>
<p id="gradient1"><code>background: linear-gradient(yellow, red);</code></p>
<p id="gradient2"><code>background: linear-gradient(to right, yellow, red);</code></p>
<p id="gradient3"><code>background: linear-gradient(to bottom right, yellow, red);</code></p>
<p id="gradient4"><code>background: linear-gradient(20deg, yellow, red);</code></p>
<p id="gradient5"><code>background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));</code></p>
<p id="gradient6"><code>background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);</code></p>
</body>
</html>방사형 그라디언트 : 원형 및 타원형 그라데이션 배경
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Radial gradients</title>
<style>
html {
background: -webkit-radial-gradient(green, yellow);
background: radial-gradient(green, yellow);
height: 100%;
}
body {
font: 14px/1.5 courier;
color: #000;
}
p {
width: 300px;
height: 150px;
padding: 20px;
margin: 20px 0 0 20px;
float: left;
border: 1px solid green;
}
#gradient1 {
background-color: #888888;
background-image: url("./img/gradientRadial.jpg"); /* 그래디언트를 생성 할 수없는 브라우저에 배경 이미지를 사용할 수 있습니다. */
background: -webkit-radial-gradient(yellow, green); /* 그래디언트를 처리 할 수있는 주요 브라우저를위한 백업 */
background: radial-gradient(yellow, green); /* CSS3 표준 */
}
#gradient2 {
background: -webkit-radial-gradient(circle, yellow, green);
background: radial-gradient(circle, yellow, green);
}
#gradient3 {
background: -webkit-radial-gradient(circle closest-side, yellow, green);
background: radial-gradient(circle closest-side, yellow, green);
}
#gradient4 {
background: -webkit-radial-gradient(top left, yellow, green);
background: radial-gradient(at top left, yellow, green);
}
#gradient5 {
background: -webkit-repeating-radial-gradient(#8d0, #0d0 10px, #9f0 10px, #0f0 20px);
background: repeating-radial-gradient(#8d0, #0d0 10px, #9f0 10px, #0f0 20px);
}
</style>
</head>
<body>
<p id="gradient1"><code>background: radial-gradient(yellow, green);</code></p>
<p id="gradient2"><code>background: radial-gradient(circle, yellow, green);</code></p>
<p id="gradient3"><code>background: radial-gradient(circle closest-side, yellow, green);</code></p>
<p id="gradient4"><code>background: radial-gradient(at top left, yellow, green);</code></p>
<p id="gradient5"><code>background: repeating-radial-gradient(#8d0, #0d0 10px, #9f0 10px, #0f0 20px);</code></p>
</body>
</html>불투명도 : 상자의 투명도
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Opacity</title>
<style>
body {
font: 14px courier;
background-color: #c72;
background-image: url("./img/bg.gif");
color: #000;
padding: 20px;
}
p {
background-color: #577028;
background-image: url("./img/opacityTort.jpg");
margin: 0;
width: 240px;
height: 240px;
float: left;
text-align: center;
}
code {
background: white;
padding: 0 15px 2px;
}
#opacity1 {
opacity: 1;
}
#opacity2 {
opacity: 0.8;
}
#opacity3 {
opacity: 0.5;
}
#opacity4 {
opacity: 0.2;
}
#opacity5 {
opacity: 0;
}
</style>
</head>
<body>
<p id="opacity1"><code>opacity: 1;</code></p>
<p id="opacity2"><code>opacity: 0.8;</code></p>
<p id="opacity3"><code>opacity: 0.5;</code></p>
<p id="opacity4"><code>opacity: 0.2;</code></p>
<p id="opacity5"><code>opacity: 0;</code></p>
</body>
</html>
