- 지금까지 배운 HTML은 컨텐츠의 배치가 자유롭지 못하여 원활한 작업이 곤란하였습니다. 하지만 CSS의 position 기능을 잘 활용하면 텍스트 위에 텍스트를 올릴 수 있으며, 이미지 위에 이미지를 배치할 수 있습니다.
- 한마디로 WYSIWYG(What You See Is What You Get)방식처럼 작성자가 원하는 위치의 어느 장소건 배치가 가능합니다.
- 일반적으로 복잡하게 사용된 테이블은 문서의 로딩 속도를 더디게 만들기도 하는데 이 position기능을 활용하면 로딩 시간을 더 빠르게 할 수 있는 장점도 있습니다.
- position 속성의 속성값으로는 static, relative, absolute가 있으며 속성값을 적지 않으면 static이 기본값으로 적용됩니다.
- 여기서 배우게 될 "상자 위치 지정하기"는 HTML태그에도 적용할 수 있는 부분이므로 활용에 따라서 상당히 다양한 작업을 할 수 있습니다. 즉, border 값을 지정해 주지 않으면 테두리가 없으므로 공중에 떠 있는 것처럼 컨텐츠 배치가 가능합니다.
|
|
| Position의 속성값 |
| STATIC |
설명 |
말처럼 역동성이 없으며, 배치가 자유롭지 못한 정적인 상자를 만듭니다. 현재 위치에서 바로 상자모델을 만들며, 상자를 이동할 수 없습니다. |
| top/left |
이 속성은 이동성이 전혀 없으므로 위치를 나타내는 top과 left를 적용할 수 없습니다. |
| width/height |
속성 중 static에서 유일하게 사용할 수 있는 기능으로 상자의 가로크기와 세로크기를 지정합니다. |
| RELATIVE |
설명 |
이것은 상대적 위치를 적용하는 것을 말합니다. 현재의 컨텐츠가 있는 곳에서 상자 모델이 적용됩니다. |
| top/left |
현재의 위치에서 x축과 y축으로 임의로 구분을 하여 좌우상하로 움직입니다. |
| width/height |
상자의 가로크기와 세로크기를 지정합니다. |
| ABSOLUTE |
설명 |
말뜻처럼 절대적 위치를 적용합니다. relative와는 상대적인 개념이 되며, 항상 상단 모서리를 기준으로 상자모델을 만듭니다. |
| top/left |
(0,0) 즉, 브라우저 상단왼편 모서리가 (0,0)이 되며 그곳에서부터 pixel단위를 적용하여 위치를 지정합니다. |
| width/height |
상자의 가로크기와 세로크기를 지정합니다. |
| static 과 reletive position의 적용예제 |
| 메모장 |
< html >
< head >< title >상자의 위치 지정하기< /title >< /head >
< body >
< P >지금까지 배운 HTML은 컨텐츠의 배치가 자유롭지 못하여 HTML작업이 쉽지 않았습니다. 하지만, CSS의 position 기능을 잘 활용하시면 텍스트 위에 텍스트를 올리수 있으며
이미지 위에 이미지를 배치할 수가 있습니다.< /P >
< P style="position:static;color:blue;font-family:굴림;font-size:15pt;" >여기서부터 static이 적용됩니다. 어떻게 될까요?< /P >
< DIV style="position:relative;left:-70;top:50;height:150;color:blue;font-family:굴림;font-size:9pt">여기는 reletive입니다. 저는 어때요??< /DIV >
< /body >
< /html >
|
|---|
| 브라우저 |
상자의 위치 지정하기
지금까지 배운 HTML은 컨텐츠의 배치가 자유롭지 못하여 HTML작업이 쉽지 않았습니다.
하지만, CSS의 position 기능을 잘 활용하시면 텍스트 위에 텍스트를 올리수 있으며
이미지 위에 이미지를 배치할 수가 있습니다.
여기서부터 static이 적용됩니다. 어떻게 될까요?
여기는 reletive입니다. 저는 어때요??
|
|
|---|
| 설명 |
| static |
- static이 적용된 결과는 일반적으로 적용되던 형식과 별다른 차이점을 못 느끼시겠죠?
- static은 정적인 형식으로 이동성이 없으며 relative와 absolute에 비해 활용빈도가 낮습니다.
- 여기서 static에 border를 주고자 한다면 스타일시트 내부에 border-style을 적어주면 그 효과를 볼 수 있습니다.
|
| relative |
- 자~! relative는 어떻게 나왔나요? relative는 static이 적용됐던 결과보다 조금 더 내려갔고, 왼편으로 들어가 버린 것처럼 보입니다.
- relative에서는 실제로 왼쪽 문장이 잘려 버리는 현상이 나타납니다.(이곳에서는 왼쪽으로 치우쳐 나타나 보입니다. 전체 웹브라우저가 아니고 table안에 표현을 해서 그런것 같습니다.)
- relative는 상대적 위치라고 앞서 언급한 것처럼 원래 정상적으로 문서가 작성되었을 때 있어야할 위치를 기준으로 left와 top이 적용됩니다.
- 위의 예제도 static의 위치에 있어야 할 문서가 상대적으로 left쪽으로 -70으로 움직였고, top에서 +50만큼 움직인 상태입니다.
- relative속성을 이해했나요?
|
|
|---|
| absolute position의 적용예제 |
| 메모장 |
< html >
< head >
< style type="text/css" >
.rel{ position:absolute;
left:450;top:4150;height:300;font-family:굴림;font-size:30pt;}
< /style >
< /head >
< body >
< P >지금까지 배운 HTML은 컨텐츠의 배치가 자유롭지 못하여 HTML작업이 쉽지 않았습니다.
하지만, CSS의 position 기능을 잘 활용하시면 텍스트 위에 텍스트를 올리수 있으며
이미지 위에 이미지를 배치할 수가 있습니다.< /P >
< DIV class="rel" >Good~~!!< /DIV >
< /body >
< /html >
|
|---|
| 브라우저 |
|
지금까지 배운 HTML은 컨텐츠의 배치가 자유롭지 못하여 HTML작업이 쉽지 않았습니다.
하지만, CSS의 position 기능을 잘 활용하시면 텍스트 위에 텍스트를 올리수 있으며
이미지 위에 이미지를 배치할 수가 있습니다.
Good~~!!
|
|
|---|
| 설명 |
- 이번 예제는 절대적 위치를 나타내는 방법으로서 상단 좌측모서리가 (0,0)으로 기준이 됩니다.
- 이 위치를 기준으로 왼편에서(left) 얼마만큼 이동하고, 상단(top)에서 얼마만큼 내려오라는 값을 설정합니다.
- < DIV class="rel" >Good~~!!< /DIV > ☜ 이것은 앞서 적용되었던 텍스트와는 전혀 상관이 없이 left: 650, top:2450의 위치에 Good ~~!!이라는 글자를 보여줍니다.(모니터의 해상도에 따라서 이 글자가 표현되어지는 위치가 약간씩 다를겁니다. 참고하세요.^^)
|
|
|---|
| top/left와 bottom/right의 비교 |
 |
☜ absolute 속성값의 기준 ①
top 30px, left 30px |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
absolute 속성값의 기준②
bottom 30px, right 30px ☞ |
|
|
- 좌표를 지정하는 속성에는 위에서 언급한 top/left 이외에 right/bottom이 있는데 top/left가 적용되면 right/bottom은 사용할 수 없으며, right/bottom이 적용되면 top/left는 적용할 수 없습니다.
- 옆의 그림에서 보는 것 처럼 absolute 좌표를 설정할 때 임의의 기준점이 2개(① ②)가 생깁니다.
임의의 기준점을 이렇게 2개로 잡은 이유는 컴퓨터마다 해상도에 따라서 화면 크기가 달라질 수 있기 때문에 아래와 같이 적용합니다.
상단을 기준으로 top/left,
하단을 기준으로 bottom/right
- 이런 상황에서 top과 bottom을 함께 사용하거나 left와 right를 함께 사용하면 브라우저가 어떤 기준점을 중심으로 좌표를 읽어 들여야 할지 혼동을 할 수 있습니다.
|
|