5. CSS3 좌표계
1. CSS3 좌표계
1) 레이아웃 위치 개념
● 절대 좌표(position : absolute) : 엘리먼트가 브라우저의 페이지 안에 표시되는 방법을 지정
p {position : relative}
● 상대 좌표(position : relative) : 엘리먼트가 브라우저의 페이지 안에 표시되는 방법을 지정
p { position : relative; }
2) CSS3단위
|
단위 |
의미 |
|
Px |
pixel의 줄임말로 컴퓨터 화면의 한 점 크기를 나타냄 (웹 브라우저의 기본 폰트 크기 : 16픽셀) |
|
% |
비율을 의미(100% : 기준크기) |
|
in |
인치 |
|
cm |
센티미터 |
|
mm |
밀리미터 |
|
Pt |
point의 줄임말로 보통 글꼴의 단위로 사용한다. |
|
em |
1em은 현재 글꼴의 크기를 나타낸다. (예 - 2em은 현재 글꼴의 2배 크기가 된다.) |
3) 절대 좌표 실습
● 절대 좌표의 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>절대 좌표 실습</title>
<style type=text/css">
h2{
position:absolute;
left:100px;
top:50px;
}
<style>
</head>
<body>
<p>일반적인 텍스트</p>
<h2>절대좌표를 적용한 텍스트</h2>
</body>
</html>
4) 상대 좌표 실습
● 상대 좌표의 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>상대 좌표 실습</title>
<style type=text/css">
.pos_left {
position:relative;
left:-100px;
}
.pos_right {
position:relative;
left:+100px;
}
<style>
</head>
<body>
<h2>원래 위치!!!</h2>
<h2 class="pos_left">원래위치에서 왼쪽으로 -100px 만큼 이동!!!</h2>
<h2 class="pos_right">원래위치에서 오른쪽으로 +100px 만큼 이동!!!</h2>
</body>
</html>
2. CSS3 레이아웃 사용법
1) float 사용법
● float 속성 : display와 position과 같이 웹 페이지의 레이아웃을 구성할 때 많이 사용하는 속성
- 이미지와 텍스트를 쉽게 배치하기 위해 만들어짐
- float가 선언된 엘리먼트는 왼쪽 또는 오른쪽으로만 위치할 수 있고 위아래는 불가능
- float 이후에 오는 엘리먼트는 그 주변을 채워나가며 표시됨
- 이미지와 텍스트를 활용한 레이아웃에서 많이 사용
- 화면 크기에 따라 동적으로 변할 수 있는 레이아웃 작업에 많이 이용
p{ float : 속성 값; }
|
속성 값 |
내용 |
|
inherit |
부모(상위)부터 상속받음 |
|
left |
요소를 왼쪽 방향으로 float된 블록 박스로 설정 |
|
right |
요소를 오른쪽 방향으로 float된 블록 박스로 설정 |
|
none |
요소를 float 하지 않음 |
2) float을 활용한 실습
● float을 홀용한 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>상대 좌표 실습</title>
<style type=text/css">
.box_a {float:left; width:100px; height:50px}
.box_b {float:right; width:100px; height:50px}
.box_c {margin:0px auto; width:100px; height:50px}
<style>
</head>
<body>
<div class="box_a">박스에 들어가는 내용입니다</div>
<div class="box_b">박스에 들어가는 내용입니다</div>
<div class="box_c">박스에 들어가는 내용입니다</div>
</body>
</html>
3) clear 사용법
● clear 속성 :float 영향을 받는 엘리먼트를 강제로 취소시킬지 아닐지 지정하는 것
- 더 이상 float을 쓰지 않겠다는 것을 의미함
p { clear : 속성 값; }
|
속성 값 |
내 용 |
|
inherit |
부모(상위)부터 상속받음 |
|
left |
왼쪽에서 float된 컨텐츠 지정 clear |
|
right |
오른쪽에서 float된 컨텐츠 지정 clear |
|
both |
왼쪽 오른쪽 모두 float된 컨텐츠 지정 clear |
|
none |
Float에서 설정된 값을 clear 하지 않음 |
4) clear를 활용한 실습
● clear를 활용한 실습 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>상대 좌표 실습</title>
<style type=text/css">
.box_a {float:left; background: gray; width:100px; height:50px}
.box_b {float:right; background: red; width:100px; height:50px}
.box_c {clear:both; background: blue; width:100px; height:50px}
</style>
</head>
<body>
<div class=box_a>1</div>
<div class=box_b>2</div>
<div class=box_c>3</div>
</body>
</html>
'Legend 개발자 > CSS3' 카테고리의 다른 글
| No.004.CSS3 선택자 [2017-05-19] (0) | 2017.05.19 |
|---|---|
| No.003.CSS3 레이아웃 및 HTML5 적용 [2017-05-17] (0) | 2017.05.17 |
| No.002.CSS3 스타일링 [2017-05-17] (0) | 2017.05.17 |
| No,001.CSS3의 개요 [2017-05-17] (0) | 2017.05.17 |