위치 속성
프로그램을 개발 할 때 요소의 위친은 다음 두 가지 방법으로 설정 합니다.
- 절대 위치 좌표 : 요소의 X좌표와 Y좌표를 설정해 절대 위치를 지정합니다.
- 상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치를 지정합니다.
지금까지 다룬 내용에는 태그의 X좌표와 Y좌푤ㄹ 직접 설정한 저이 없습니다. 즉, 상대 위치 좌표를 사용해HTML 페이지를 만든 것입니다. 이번에는 절대 위치 좌표를 사용하는 방법을 알아보겠습니다.
NOTE_ 절대 위치 좌표와 상대 위치 좌표 좀 더 알아보기
위치 속성을 처음 접하면 머릿속이 약간 복잡할 테니 좀더 설명해보겠습니다. 저랟 위치 좌표는 드래그해서 만들 수 있으므로 상대 위치 좌표보다 개발하기 쉽습니다.
화면의 크기가 고정된 프로그램을 개발할 때는 절대 위치 좌표를 이용합니다. 예를 들어 플레이 스테이션 빝, 닌텐도 3DS 등 게임기는 해상도가 고정되어 있으므로 절대 위치 좌표를 사용해 개발합니다. 반면 스마트폰은 다양한 회사에서 만드므로 화면 해상도가 제각각입니다. 그래서 스마트폰은 상대 위치 좌표를 사용해 개발합니다. HTML 페이지도 사용자가 화면의 크기가 각기 다른 장치에서 실행할 수 있으므로 상대 위치 좌표를 사용합니다.
" 그렇다면 HTML 페이지는 저랟 위치 좌표를 사용하지 않나요? "
일반적으로 절대 위치 좌표는 일정 크기의 영역을 지정한 태그 내부에서만 사용합니다. 공부하다 보면 어떤 경우에 사용하는지 알 수 있을 겁니다.
6.1 position 속성
HTML 태그의 위치 설정 방법을 변경할 때는 position 속성을 사용합니다. position 속성에는 [그림 6-30]의 키워드를 입력할 수 있습니다.
[그림 6-30]
position: abosolute, fixed, inherit, initial, relative, static
상대 위치 좌표를 사용할 때는 position 속성에 static이나 relative 키워드를 입력합니다. 반면 절대 위치 좌표를 사용할 때는position 속성에 absolute나 fixed 키워드를 입력합니다.
[표 6-7] 이 책에서 다루는 position 속성 키워드
키워드 설명
static 상대 위치 좌표 설정
relative 초기 위치에서 상하좌우로 이동
absolute 절대 위치 좌표 설정
fixed 화면을 기준으로 절대 위치 좌표 설정
기본 예제 6-12 position 속성
1. abosolute 키워드 적용하기 다음 코드처럼 HTML 페이지를 작성합니다. box 클래스를 가지는 div 태그의 position 속성에 absolute 키워드를 입력했습니다.
실행 결과는 웹 브라우저에 따라 약간 다르게 나타납니다. 미세한 버전 차이에 따라서 파란색 상자만 보이거나 3개의 상자가 모두 보입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width: 100px; heightA: 100px;
position: absolute;
}
.box:nth-child(1) { background-color: red; }
.box:nth-child(2) { background-color: green; }
.box:nth-child(3) { background-color: blue; }
</style>
</head>
<body>
<div class="box"><div>
<div class="box"><div>
<div class="box"><div>
</body>
</html>
2. left와 top 속성 적용하기 모든 웹 브라우저의 출력 방식을 통일하려면 [그림 6-31]의 스타일 속성을 함께 입력해야 합니다. 먼저 left와 top 속성을 입력합니다. [코드 6-36]의 실행 결과를 살펴보면 빨간색 상자가 맨 뒤쪽에 있고 파란색 상자가 맨 앞쪽에 있죠? 기본적으로 뒤쪽에 작성한 코드 태그가 상위에 올라갑니다.
[그림 6-31] position 속성과 함께 사용하는 스타일 속성
left속성 (왼쪽), top속성 (위쪽), right속성 (오른쪽), bottom 속성 (아래쪽)
코드 6-36 left와 top 속성 적용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
}
</style>
</head>
<body>
<div class="box"><div>
<div class="box"><div>
<div class="box"><div>
</body>
</html>
6.2 z-index 속성
[코드 6-36]의 실행 결과에서 도형의 순서를 변경하고 싶을 때는 z-index 속성을 사용합니다. z-index 속성에 숫자를 입력하면 숫자가 클수록 앞에 위치합니다.
기본 예제 6-13 z-index 속성
다음 코드에서는 박스 z-index 속성에 100, 10, 1을 입력했습니다.
[코드 6-37] z-index 속성 적용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color : red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50pxc; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
보통 '너는 반드시 앞에 있어야 한다!'는 태그의 z-index 속성에 9999 같이 터무니없이 큰 값을 입력하기도 하는데, 너무 크게 입력하면 웹 브라우저가 인식을 못할 수 있습니다.
6.3 위치 속성 공식
위치 속성을 사용할 때 필요한 공식 몇 가지를 살펴보겠습니다. 굉장히 중요한 공식들이므로 따로 적어 기억해도 좋습니다.
기본 예제 6-14 위치 조절 응용
1. HTML 페이지 만들기 위치 속성 공식을 적용하지 않은 HTML 페이지를 다음 코드처럼 작성합니다.
[코드6-38] 위치 속성 적용 전
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>
2 문제 파악하기 실행 결과에 두 가지 문제가 있습니다.
1) h1 태그 2개가 붙어 있습니다. (div 태그가 영역을 차지하지 않습니다.)
2) 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않습니다.
굉장히 중요한 내용입니다. position 속성에 absolute 키워드를 적용할 때는 부모 태그에 몇 가지 처리를 해야 합니다.
따라서 자손의 position 속성에 absolute 키워드를 적용할 때는 부모 태그에 몇 가지 처리를 해야 합니다.
3. 문제 해결하기 첫 번째 문제를 해결할 때는 다음 공식을 사용합니다.
"자손의 position 속성에 absolute 키워드를 적용하려면 부모에게 height 속성을 입력합니다."
이렇게 하면 부모 태그가 영역을 차지하게 만들 수 있습ㄴ디다. 예를 들어 style 태그에 다음 코드처럼 width와 height 속성을 추가해 영역을 만들어 줍니다.
[코드6-39] 부모 태그 영역 차지
body > div {
width: 400px; height: 100px;
border: 3px solid black;
}
두 번째 문제를 해결할 때는 다음 공식을 사용합니다.
"자손의 position 속성에 absolute 키워드를 적용하려면 부모의 position 속성에 relative 키워드를 적용합니다."
이렇게 하면 자손 태그가 부모의 위치를 기준으로 절대 위치 좌표를 설정합니다. 이 공식에 따라서 div 태그에 position 속성을 지정합니다.
[코드6-40] 부모 태그의 position 속성 부여
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
}
두 가지 공식을 적용하고 코드를 실행한 결과는 다음 그림과 같습니다.
6.4 overflow 속성
overflow는 내부의 요소가 부모의 범위를 벗어날 때 요소를 처리하는 방법을 지정하는 속성입니다. overflow 속성에는 [표6-8]의 키워드를 입력할 수 있습니다.
표 6-8 이 책에서 다루는 overflow 속성 키워드
키워드 설명
hidden 영역을 벗어나는 부분 감춤
scroll 영역을 벗어나는 부분을 스크롤로 만듦
기본 예제 6-15 overflow 속성
1. hidden 키워드 적용하기 [코드 6-40]의 실행 결과를 보면 색상이 적용된 사각형이 부모의 범위(검은색 테두리로 표시)를 벗어나 있습니다. 이러한 div 태그의 overflow 속성에 다음 코드처럼 hidden 키워드를 입력하면 부모의 영역을 벗어난 부분을 모두 감춥니다.
[코드 6-41] overflow 속성과 hidden 키워드
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
overflow: hidden;
}
2. Scroll 키워드 적용하기 overflow 속성에 scroll 키워드를 입력하면 div 태그에 스크롤이 생깁니다. 부모의 영역을 벗어나는 부분은 스크롤을 내리면 볼 수 있습니다.
[코드 6-42] overflow 속성과 scroll 키워드
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
overflow: scroll;
}
3. overflow-x와 overflow-y 속성 적용하기 overflow 속성에 scroll 키워드를 적용하면 무조건 모든 축에 스크롤이 생성됩니다. 특정한 방향으로만 스크롤을 생성하고 싶을 때는 overflow-x 속성과 overflow-y 속성을 사용합니다.
[코드 6-43] overflow-x 속성과 overflow-y 속성
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
overflow-y: scroll;
}
[기본 예제 6-15]에서는 overflow 속성의 기본 사용 방법을 다루었습니다. 프로그래밍 요소로 애니메이션을 구현할 때 많이 사용합니다. overflow 속성은 원래 이러한 목적에서 만들었지만, 다음 절에서 배울 float 속성과 함께 다른 용도로 사용할 때가 더 많습니다..
