# CSS 크기 단위
| 단위 | 설명 |
| % | 백분율 단위 |
| em | 배수 단위 |
| px | 픽셀 |
ex) % 예시
<!DOCTYPE html>
<html>
<head>
<title>CoderBear's CSS Practice</title>
<style>
p:nth-child(1) { }
p:nth-child(2) { font-size: 100%; }
p:nth-child(3) { font-size: 150%; }
p:nth-child(4) { font-size: 200%; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>ex) em 예시
<!DOCTYPE html>
<html>
<head>
<title>CoderBear's CSS Practice</title>
<style>
p:nth-child(1) { }
p:nth-child(2) { font-size: 1.0em; } // =100% , 1배
p:nth-child(3) { font-size: 1.5em; } // =150% , 1.5배
p:nth-child(4) { font-size: 2.0em; } // =200% , 2배
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
ex) px 예시
<!DOCTYPE html>
<html>
<head>
<title>CoderBear's CSS Practice</title>
<style>
p:nth-child(1) { }
p:nth-child(2) { font-size: 16px; }
p:nth-child(3) { font-size: 24px; }
p:nth-child(4) { font-size: 32px; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
ex)
<!DOCTYPE html>
<html>
<head>
<title>CoderBear's CSS Practice</title>
<style>
* { font-size: 12px;}
h1 { font-size: 3.0em; }
h2 { font-size: 1.5em; }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>consectetur adipiscing elit. Sed nec purus elit, nec cursus dolor.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
# 블록
ex)
<!DOCTYPE html>
<html>
<head>
<title>CoderBear's CSS Practice</title>
<style>
div {
width: 100px; height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
# 색상 표현 단위
<style>
h1{background-color: red;}
h2{background-color: orange;}
h3{background-color: blue; }
</style>
- RGB(red, green, blue)
RGB 색상 단위는 R(붉은색)과 G(초록색)과 B(파란색)를 조합하여 색상을 표현하며
다음과 같이 0부터 255사이의 숫자를 입력한다.
#ff6347 #r(ff)g(63)b(47) 동일한 경우 축약표현도 가능하다.
<style>
h1{background-color:rgb(255, 255, 255); }
</style>
- RGBA((red, green, blue, alpha) : RGB + 투명도
RGBA 색상 단위는 RGB 색상 단위에 알파 값을 추가한 형태.
알파 값은 투명도를 나타내며 0.0부터 1.0사이의 숫자를 입력.
0.0은 완전 투명 상태고, 1.0은 완전 불투명 상태
<style>
h1{background-color:rgba(255, 255, 255, 0.5);}
</style>
- HEX 코드 단위 #000000
색상을 16진수로 표현할 때는 각 색상 요소에 00에서 FF사이의 값을 입력한다.
RGB 색상 단위와 같으므로 쉽게 사용할 수 있다.
HEX 코드 단위는 다음과 같이 사용
<style>
h1{background-color:#0094FF; }
</style>
- HSL(hue, saturation, lightness)
HSL은 색상, 채도, 명도를 표현할 수 있다.
- HSLA(hue, saturation, lightness, alpha)
HSL에 투명도를 추가한 개념이다.
- background-image 속성을 사용하면 배경 이미지를 지정할 수 있다.
background-image 속성에는 'url(경로)'형태로 URL 단위를 입력한다.
<style>
body
{
background-image: url('Desert.jpg');
}
</style>
// Tip : 색상 확인이 힘들다면 아래 링크 등에서 색상 선택 도구를 사용하면 편리하다.
- 색상 선택 프로그램 (http://www.colorpicker.com/)
Color Picker by WebFX – Free HTML Color Chooser
This sample text has a font color of #c93200 Text here Background Color:
www.webfx.com
- 네이버 색상팔레트
색상팔레트 : 네이버 통합검색
'색상팔레트'의 네이버 통합검색 결과입니다.
search.naver.com
#박스 속성
박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장 중요하다.
- width와 height, margin과 padding 속성
어떤 공간에 글자가 있다고 하면,
ⓐ width와 height : 글자를 감싸는 영역 크기 지정
ⓑ border : 테두리 두께 지정
ⓒ margin : 테두리와 다른 태그와의 간격 지정
ⓓ padding : 테두리와 글자 사이 간격 지정
- width와 height 속성은 글자가 들어가는 영역의 너비와 높이를 지정한다.
따라서 태그 전체의 크기는 다음 공식으로 나타낼 수 있다.
margin, border, padding 속성은 양쪽에 위치하므로 2를 곱한다.
전체 너비 = width + 2 * (margin + border + padding)
전체 높이 = height + 2 * (margin + border + padding)
- margin과 padding 속성 값 부분 지정
margin과 padding 속성은 다음 두 가지 방법으로 왼쪽, 오른쪽, 위쪽, 아래쪽을 각각 지정할 수 있다.
margin과 padding 속성의 방향 적용
| 속성이름 | 설명 |
| margin-left | 왼쪽 마진 |
| margin-right | 오른쪽 마진 |
| margin-top | 위쪽 마진 |
| margin-bottom | 아래쪽 마진 |
| padding-left | 왼쪽 패딩 |
| padding-right | 오른쪽 패딩 |
| padding-top | 위쪽 패딩 |
| padding-bottom | 아래쪽 패딩 |
ex) margin, padding 예시
<!DOCTYPE html>
<html>
<head>
<title>CoderBear's CSS Practice</title>
<style>
div {
width: 100px; height: 100px;
background-color: red;
/* margin: 위 오른쪽 아래 왼쪽 */
/* padding: 위 오른쪽 아래 왼쪽 */
margin: 0 30px 0 30px;
padding: 0 30px 0 30px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
ex) margin, padding 예시
<!DOCTYPE html>
<html>
<head>
<title>CoderBear's CSS Practice</title>
<style>
div {
width: 100px; height: 100px;
background-color: red;
/* margin: 위아래 왼쪽오른쪽 */
/* padding: 위아래 왼쪽오른쪽 */
margin: 0 30px; padding: 0 30px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
# 테두리 속성
테두리를 넣을 때는 두께, 형태, 색상에 해당하는 border-width, border-style, border-color 속성을 모두 사용해야 한다.
| 속성이름 | 설명 |
| border-width | 테두리 두께 지정 |
| border-style | 테두리 형태 지정 |
| border-color | 테두리 색상 지정 |
ex)
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
border-width: thick; // 두께
border-style: dashed; // 형태
border-color: black; // 색상
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>
- border-width, border-style, border-color 속성은 border 속성을 사용해 한 번에 입력할 수 있다.
ex)
<style>
.box
{
border: thick dashed black; // 두께 형태 색상
}
</style>
# border-radius 속성
border-radius는 CSS3에서 추가된 속성으로 테두리가 둥근 사각형 또는 원을 만들 수 있다.
ex) 테두리 및 border-radius 속성 예시
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
border-width: thick;
border-style: dashed;
border-color: black;
border-radius: 20px; // 모서리가 모두 20px씩 둥글게 깎이는 것!
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>
ex)
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
border-width: thick;
border-style: dashed;
border-color: black;
/* border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 */
border-radius: 50px 40px 20px 10px; // 4면을 모두 다르게 깎은 예시
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>
# display 속성
- 속성 키워드
| 키워드 이름 | 설명 |
| none | 태그를 화면에서 보이지 않게 만듬 (안보이면서 자리도 차지하지 않는다!) |
| block | 태그를 블록 형식으로 지정 |
| inline | 태그를 인라인 형식으로 지정 |
| inline-block | 태그를 인라인-블록 형식으로 지정 |
ex) none 키워드 적용하기
display 속성에 none키워드를 적용하면 태그가 화면에서 보이지 않는다.
즉, 중앙의 div 태그 전체가 화면에서 사라진다.
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: none;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>
ex) block 예시
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: inline;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>
ex) inline 예시
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: inline;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div> // div의 원래 성질도 block이다
<span>더미 객체</span>
</body>
</html>
ex) inline-block 예시
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: inline-block;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>
★ 인라인 형식과 인라인-블록 형식의 차이점
겉으로 봤을 때는 동일해 보이나 아래와 같은 차이점이 있다.
| width, height 속성 | margin 속성 | |
| inline 키워드 | 속성 적용 불가 | 좌우만 적용 |
| inline-block 키워드 | 속성 적용 가능 | 상하좌우 모두 적용 |
ex) inline 키워드 예시
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: inline;
background-color: red;
width: 100px; // 해당 속성이 적용되지 않는다.
height: 50px; // 해당 속성이 적용되지 않는다.
margin: 10px; // 해당 속성 중 좌우만 적용된다.
}
</style>
</head>
<body>
<p>의미 없는 더미 객체</p>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
<p>의미 없는 더미 객체</p>
</body>
</html>
ex) inline-block 예시
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: inline-block;
background-color: red;
width: 100px;
height: 50px;
margin: 10px; // 해당 속성이 상하좌우 모두 적용된다.
}
</style>
</head>
<body>
<p> 의미 없는 객체</p>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
<p> 의미 없는 객체</p>
</body>
</html>
#background 속성
ex) 배경이미지
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png');
}
</style>
</head>
<body>
</body>
</html>- 배경 이미지 두 개 삽입하기(레이어)
CSS 이전에는 이렇게 배경 이미지를 하나만 삽입할 수 있었다.
하지만 CSS3부터는 배경 이미지를 여러 개 적용할 수 있다.
코드를 실행시켜보면 알 수 있듯이 먼저 입력한(왼쪽) 이미지가 앞으로 나온다.
ex) 이미지 레이어
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
/* 각각의 그림을 레이어라고 부릅니다. */
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
}
</style>
</head>
<body>
</body>
</html>
- 배경 이미지 높이 조절하기
background-size 속성에서 두 번째에 입력하는 크기 단위는 높이를 의미한다.
★ background-size 속성과 관련된 주의 사항
너비와 높이에 띄어쓰기를 사용하는 것과 다음과 같이 쉼표를 사용하는 것은 다르다.
쉼표를 사용하면 각 배경에 서로 다른 크기를 입력하는 것으로 인식한다.
ex) 쉼표 있는 예시
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
/* 첫 번째 이미지의 너비: 100%
두 번째 이미지의 너비: 250px */
background-size: 100%, 250px;
}
</style>
</head>
<body>
</body>
</html>
- 아래의 태그에서 두 번째 위치에 250px를 입력했으므로 높이가 250px로 지정된다.
ex) 쉼표 없는 예시
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100% 250px; // 너비 높이
}
</style>
</head>
<body>
</body>
</html>
# background-repeat 속성
예제들 실행 결과들을 살펴보면 패턴처럼 이미지가 반복된다.
이는 background-repeat 속성의 기본 키워드가 repeat기 때문에 나타나는 현상이다.
repeat를 입력하면 이미지가 패턴을 이루고,
repeat-x를 입력하면 x축 방향으로만 이미지가 반복된다.
repeat-y를 입력하면 y축 방향으로 이미지가 반복된다.
- 배경 이미지 반복 없애기
background-repeat 속성에 no-repeat 키워드를 입력하면,
반복 없이 배경 이미지가 적용된다.
ex)
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
# background-attachment 속성
background-attachment는 배경 이미지를 화면에 고정한다.
background-attachment 속성의 기본 키워드는 scroll이다.
화면 스크롤에 따라 배경 이미지가 함께 이동한다.
- 스크롤이 가능할 분량의 텍스트 추가하기
태그 내부에 스크롤을 형성할 수 있을 정도의 글을 입력해보면,
결과 화면에서 스크롤을 내리면 배경 이미지가 위로 올라가 사라진다.
ex)
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
- 배경 이미지 화면에 고정시키기
background-attachment 속성 값에 fixed를 입력한다.
스크롤을 이동해도 배경 이미지가 고정된다.
ex)
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
# background-position 속성
background-position: 키워드;
background-position: X축 위치;
background-position: X축 위치 Y축 위치;
- 배경 이미지 하단에 배치하기
ex)
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
- 배경 이미지 위치 조정하기
X축 위치와 Y축 위치를 지정하는 두 개의 값을 입력하면 특정 위치에 이미지를 넣을 수 있다.
다음 코드는 배경 이미지의 X축 위치를 0px로 지정하고 Y축 위치를 50%로 지정한다.
ex)
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0px 50%;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>728x90
'Web > CSS' 카테고리의 다른 글
| [필기정리] Day38 - CSS 문제 및 해답 (0) | 2020.08.03 |
|---|---|
| [필기정리] Day38 - CSS 선택자, overflow, position 등 (0) | 2020.08.03 |
| [필기정리] Day37 - CSS 문제 및 해답 (0) | 2020.07.31 |
| [필기정리] Day36 - CSS 문제 및 해답 (0) | 2020.07.30 |
| [필기정리] Day36 - CSS 선택자(Selector) (0) | 2020.07.30 |