Notice
Recent Posts
Recent Comments
Link
Today
Total
05-03 00:03
Archives
관리 메뉴

Jeongchul Kim

CSS 05 CSS3 좌표계 본문

Web프로그래밍

CSS 05 CSS3 좌표계

김 정출 2016. 4. 29. 13:34


CSS 05 CSS3 좌표계





CSS3 좌표계

1. 레이아웃 위치의 개념

CSS3 좌표계

레이아웃 위치에 대해 살펴보도록 하겠습니다. 레이아웃 위치는 절대 좌표와 상대 좌표로 구분할 수 있습니다. 먼저 절대 좌표는 엘리먼트가 브라우저의 페이지 안에 표시되는 방법을 지정하는 것으로서 다음과 같이 position : absolute;으로 사용합니다. 절대 좌표는 브라우저 왼쪽 상단이 기준점이 되며, 오른쪽 하단의 지정된 좌표로 이동하여 표시됩니다.


다음으로 상대 좌표에 대해 알아보겠습니다. 상대 좌표란 현재 자기 위치에서 지정된 상대값 만큼 이동시키는 것으로서 원래 위치가 표시될 위치가 기준점이라는 것이 중요합니다. 상대좌표는 다음과 같이 position : relative;으로 사용하여 원래 있던 엘리먼트 위치가 기준이 되어 지정된 상대 값만큼 이동 시킵니다.


2. CSS3 단위

CSS3에서는 사용하는 단위에 대해서 알아보겠습니다. CSS에서 사용하는 크기 단위는 px, %, in, cm, mm, pt, em 등이 사용됩니다. 먼저 px는 픽셀의 줄임말로 컴퓨터 화면의 한 점 크기를 말합니다. 예를 들어 모니터 해상도가 1024*768이라고 하면, 가로로 1024개의 픽셀과 세로로 768개의 픽셀이 있다는 것을 의미하며 참고로 웹 브라우저의 기본 폰트 크기는 16픽셀입니다.

다음으로 %는 비율을 의미하며, 기준 크기는 100%로 합니다.

in, cm, mm은 각각 인치, 센티미터, 밀리미터를 의미하며, pt는 point의 줄임말로, 보통 글꼴의 단위로 사용하며, 참고로 1포인트는 1/72인치의 크기를 말합니다.

이외에도 em은 배수 단위를 의미하며, 1em은 현재 글꼴의 크기를 나타내기 때문에 2em은 현재 글꼴의 2배를 의미합니다. 픽셀은 소수점 이하를 표현하지 못하지만, em은 0.75 등과 같이 소수점을 설정할 수 있기 때문에 보다 정교하게 폰트 크기를 조절할 수 있습니다.


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>절대좌표를 적용한 텍스트

</body>

</html>




CSS3 레이아웃 사용법

1. float 사용법

CSS3 레이아웃 사용법

float 속성의 사용법에 대해서 알아보겠습니다. float 속성은 display와 position과 같이 웹 페이지의 레이아웃을 구성할 때 많이 사용하는 속성으로 이미지와 텍스트를 쉽게 배치하기 위해 만들어졌습니다. float은 다음과 같은 방법으로 사용하는데, 그에 따른 속성 값은 다음과 같습니다.

Inherit은 부모 또는 상위로 부터 상속받고, left는 요소를 왼쪽 방향으로 float된 블록 박스로 설정하며, right는 요소를 오른쪽 방향으로 float된 블록 박스로 설정합니다.

그리고 none은 요소를 float을 하지 않음을 의미합니다.


지금 보이는 그림은 float를 사용했을 경우 엘리먼트의 위치 이동에 대한 그림입니다. float이 선언된 엘리먼트는 왼쪽 또는 오른쪽으로만 위치할 수 있고, 위아래는 불가능합니다. float 이후에 오는 엘리먼트는 그 주변을 채워나가며 표시됩니다. float은 이미지와 텍스트를 활용한 레이아웃에서 많이 사용되고, 또한 화면 크기에 따라 동적으로 변할 수 있는 레이아웃 작업에 많이 이용됩니다.



2. clear 사용법

clear 사용법에 대해 알아보겠습니다. clear 속성은 float 영향을 받는 엘리먼트를 강제로 취소시킬지 아닐지를 지정하는 것으로 쉽게 말해, 더 이상 float을 쓰지 않겠다는 뜻을 말합니다. Clear는 다음과 같이 사용하며, 이에 따른 속성값은 다음과 같습니다.

Inherit은 부모 또는 상위로 부터 상속받을 때 사용하고, left는 왼쪽에서 float된 컨텐츠를 지정하여 clear할 때 사용하며, right는 left와 반대로 오른쪽에서 float된 컨텐츠를 지정하여 clear할 때 사용됩니다. Both는 왼쪽 오른쪽 모두 float된 컨텐츠를 지정하여 clear하며, none은 float에서 설정된 값을 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>





저작자표시

'Web프로그래밍' 카테고리의 다른 글

Javascript 02 Javascript 객체 및 이벤트 처리  (0) 2016.04.29
Javascript 01 Javascript의 개요  (0) 2016.04.29
CSS 04 CSS3 선택자  (0) 2016.04.27
CSS 03 CSS 레이아웃 및 HTML5 적용  (0) 2016.04.27
CSS 02 CSS 스타일링  (0) 2016.04.26
'Web프로그래밍' Related Articles more
Comments