<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="resources/css/11.style.css" rel="stylesheet">
<title>배경 관련 스타일</title>
</head>
<body>
<h1>배경 관련 스타일(background~ )</h1>
<h3>background-color : 배경색을 지정하고자 할 때</h3>
<div id="div-bg">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit necessitatibus atque perferendis deleniti magni doloremque fugiat pariatur commodi repellat incidunt dolores illum ipsam minima doloribus, asperiores eveniet nisi nesciunt quis.
Non laborum nulla incidunt adipisci. Soluta nihil nulla facere magni deserunt sint et, iusto obcaecati error odit. Laboriosam maxime maiores eum nobis non, ducimus beatae quibusdam ratione, in aliquid natus?
Excepturi cum placeat amet maxime, voluptate eveniet obcaecati ullam quisquam ipsam culpa totam temporibus dolores qui, praesentium quasi explicabo adipisci, magnam pariatur earum necessitatibus facere repellat! Tempore eos iure necessitatibus.
</div>
<hr>
<h3>background-clip : 배경을 적용시키고자 하는 범위 지정할 때 사용</h3>
<pre>
선택자 {
backaground-clip:border-box(기본값)|padding-box|content-box
}
</pre>
<div class="div-test" id="div1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa, at deleniti. Ut nobis voluptas voluptate rerum. Magnam blanditiis, minima odit aliquid modi quae, fugiat est voluptate repellat sit doloribus at.</div>
<div class="div-test" id="div2">Repudiandae molestias pariatur suscipit omnis quis quasi, perspiciatis mollitia, ipsa, ea natus asperiores saepe? Accusamus aut voluptate ea at. Doloremque dicta dolor sint, beatae ipsam ratione modi veniam similique impedit?</div>
<div class="div-test" id="div3">Ipsa iure excepturi similique accusantium modi quaerat unde porro repudiandae. At ex et praesentium numquam vitae placeat labore quo sapiente nisi vero, in officiis fugiat neque error distinctio aperiam eos?</div>
<hr>
<h3>배경 이미지 넣기</h3>
<pre>
선택자 {
background-image:url("이미지경로");
background-repeat:repeat|repeat-x|repeat-y|no-repeat;
background-size:auto|contain|cover|px px|% %;
background-position:좌/우/가운데 위/아래/가운데|px px|% %;
backgroung-attachment:scroll|fixed;
}
</pre>
<div id="bg-img"></div>
</body>
</html>
<CSS>
body {
background-color: cadetblue;
background-color: rgba(95,158,160,0.3);
}
#div-bg {
background-color: white;
padding: 20px;
border: 1px solid rgb(49, 85, 86);
width: 50%;
}
.div-test {
margin: 30px;
background-color: yellowgreen;
border: 10px dashed;
padding: 20px;
}
#div1 {background-clip: border-box;}
#div2 {background-clip: padding-box;}
#div3 {background-clip: content-box;}
#bg-img {
border: 1px solid;
width: 70%;
height: 800px;
background-image: url("../img/img1.png");
background-repeat: no-repeat;
/*
background-repeat: repeat-y;
background-repeat: repeat-x;
*/
background-size: auto; /* 기본값 원래 이미지 사이즈*/
background-size: contain; /* 해당 요소안에 이미지가 모두 보이게 */
background-size: cover; /* 해당 요소안에 이미지가 가득 차게 */
background-size: 300px; /* 가로길이(세로는 원래이미지의 비율에 맞춰) */
background-size: 300px 300px; /* 가로길이 세로길이 */
background-size: 30%;
background-size: 50% 50%;
background-size: auto;
background-position: left top; /* 기본값 */
background-position: center bottom;
background-position: center center;
background-position: 20% 30%;
background-position: 50% 50%;
background-attachment: scroll; /* 기본값 */
background-attachment: fixed; /* 이미지 고정 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="resources/css/06.style.css" rel="stylesheet">
<title>텍스트 관련 스타일</title>
</head>
<body>
<h1>텍스트 관련 스타일</h1>
<h3>1. color : 텍스트의 색상 지정</h3>
<pre id="c">
선택자 {
color : 색상명 | 16진수 | rgb(x, x, x) | rgba(x, x, x, x(투명도)) | hsl(x, x, x) |hsla(x, x, x, x);
}
</pre>
<br>
<h3>2. text-decoration : 텍스트에 줄을 긋거나 줄을 없앨 때 사용</h3>
<pre>
선택자 {
text-decoration: none | underline | overline |line-through;
}
</pre>
<ul>
<li id="td1">텍스트 영역 위에 줄 긋기</li>
<li id="td2">텍스트 영역 중간에 줄 긋기</li>
<li id="td3">텍스트 영역 아래 줄 긋기</li>
</ul>
<a href="http://google.com" target="_blank" id="td4">구글로 이동</a>
<br><br>
<h3>3. text-transform : 영문 텍스트의 대소문자 변환 시 사용</h3>
<pre>
선택자 {
text-transform : uppercase | lowercase | capitalize;
}
</pre>
<ol>
<li id="tt1">uppercase : 모든 영문자를 대문자로</li>
<li id="tt2">LOWERCASE : 모든 영문자를 소문자로</li>
<li id="tt3">capitalize : 영문자의 first text 대문자로</li>
</ol>
<br><br>
<h3>4. text-shadow : 텍스트에 그림자 효과를 줄 때 사용</h3>
<pre>
선택자 {
text-shadow : 가로거리(x) 세로거리(y) [번짐정도] [색상];
}
</pre>
<div>
<span class="shadow" id="ts1">HTML</span><br>
<span class="shadow" id="ts2">HTML</span><br>
<span class="shadow" id="ts3">HTML</span>
</div>
<br><br>
<h3>5. text-align : 텍스트 정렬할 때 사용</h3>
<pre>
선택자 {
text-align : left(기본값) [right | justify | center];
}
</pre>
<h4>왼쪽정렬(기본값)</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio distinctio nihil labore quae consequuntur minima veritatis illum! Aliquam possimus exercitationem explicabo molestias dolores veniam rem optio sint, in vel quae.Vero iure delectus, ex ipsum distinctio voluptatem, laborum aut, adipisci nesciunt consequuntur possimus modi iste vitae. Beatae tempore voluptatem minus nobis enim, rerum quos repellat incidunt quasi magni excepturi ullam.</p>
<h4>양쪽정렬</h4>
<p id="justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam numquam in expedita iste dolorum quas, obcaecati veritatis minus delectus, amet similique explicabo aliquam architecto ex porro assumenda tempora nulla rem!Culpa, quibusdam, id ipsa non nihil pariatur ducimus accusamus natus doloribus quia corporis dignissimos obcaecati! Cum blanditiis, rem temporibus aliquid dolorum sint deserunt veritatis ut eius, maxime in obcaecati suscipit?</p>
<h4>오른쪽정렬</h4>
<p id="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quidem aliquid numquam dolores ad placeat voluptas mollitia doloremque architecto necessitatibus sequi porro nam, tenetur ea dolor! Ab eos officia quaerat.Accusantium aut cumque nobis omnis expedita iste porro saepe dicta? Quae numquam praesentium iste eos veniam eveniet quos cupiditate asperiores perspiciatis autem, enim provident minima aliquam illo, molestias quam accusamus!</p>
<h4>가운데정렬</h4>
<p id="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dignissimos amet molestiae iure hic recusandae tenetur quo! Delectus in suscipit tempora obcaecati cumque sit eveniet, dolore vitae incidunt ullam qui?Assumenda earum iure aliquid eveniet iste praesentium iusto architecto, eligendi perspiciatis dicta tempore, ad minus, delectus debitis. Officiis nesciunt sed possimus odit consectetur a eum maiores, explicabo, earum tempora est?</p>
<br><br>
<h3>6. line-height : 줄간격 조절할 때 사용</h3>
<pre>
선택자 {
line-height : nomal | px | em | %;
}
</pre>
<h4>px 고정 단위 간격</h4>
<p id="lineH1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores consequatur ipsam fugit dolore libero rem voluptates incidunt, atque dignissimos totam molestias porro quo adipisci quisquam commodi vero iure! Laboriosam, doloribus!</p>
<h4>em 가변 단위 간격</h4>
<p id="lineH2">Vero nam natus hic voluptates asperiores. Dolor dolore amet inventore maxime minima quis iure facilis architecto sequi cum ab quidem quas rerum qui esse animi at, porro recusandae, repellendus nisi!</p>
<h4>% 배율 단위 간격</h4>
<p id="lineH3">Fuga numquam magnam aliquam, inventore architecto ipsum, commodi et minima fugit suscipit accusantium provident pariatur ipsam enim omnis. Voluptates maxime ratione necessitatibus numquam doloribus aut repellat natus exercitationem nulla ullam!</p>
<div id="test">글자쓰기</div>
</body>
</html>
