이 되겠죠.. 물론 위치제어또한 embeded는 적용될태그 전부를 해당위치에다 놓는것이고 inline은 지정해준 하나의 태그만 그 위치에 갖다놓습니다. embeded와 inline의 특징을 생각하면 쉽죠
① 위치지정옵션 positon
position은 말그대로 위치를 어디에 지정하겠다는 시작을 알리는 겁니다. 그 값은 absolute와 relative가 있습니다. 따라서 position:absolute를 하게되면 위치를 절대적으로 지정하는 것이고 position:relative는 상대적으로 위치를 지정해주는 것입니다. 절대적으로 지정하는건 뭐고 상대적으로 지정하는건 뭐냐고요?
※ 절대적인 위치지정 어떠한 내용의 위치를 강제적으로 지정해 줄수 있는 기능입니다. 비록 지정했던 곳에 다른 그림이나 글들이 있다고 해도 말이죠. 절대위치는 position:absolute가 됩니다. 자, 이렇게 스타일의 절대위치를 쓸 마음을 먹었다면 어디에다 그 위치를 잡을지를 결정해야겠죠. 이를 top과 left옵션이 담당합니다. 따라서 position옵션은 top과 left옵션과 항상 같이 쓰이죠. opsition;absolute;top:값;left:값 이런식으로. 그 위치단위는 픽셀이고요. 스타일의 절대위치의 좌표는 화면전체에 해당합니다. 즉, 화면상단의 왼쪽이 기준점의 시작이라는거죠..
거기서부터 밑으로 10픽셀만큼만 내리고 싶다면 top:10으로 주시면 됩니다. 또 거기에다 왼쪽으로부터 오른쪽으로 30픽셀만큼만 이동하고 싶으면 left:30으로 주면 되는것이죠.. 그리고 이것들을 병렬처리로 붙이면 됩니다. position:absolue;top10;left:30 이런식으루 말이죠.이는 절대위치이기 때문에 조건이 어떠하든 무조건 전체화면의 그위치에 표시하게 해줍니다. DAUM카페에서 옆 메뉴바를 개조하는 건 바로 이걸 이용해서 바꾸는거죠. 물론 이만큼 알고 바꾸는 사람은 몇안될테지만..--;
이제 예제를 들어봅시다.
embeded방식
inline방식
<html> <head> <title>스타일시트 예제</title> <style type="text/css"> font {position:absolute;top:150;left:100} </style> </head> <body> <font>나는 할 수 있다</font> </body> </html>
<font style="position:absolute;top:150;left:100">나는 할 수 있다</font>
<image>태그를 예로 들어봤습니다. 이것뿐 아니라 모든 태그를 이렇게 강제 위치지정을 해줄수 있습니다. 그럼 절대위치지정은 끝났고 상대위치지정에 대해 알아봅시다.
※ 상대적인 위치지정 화면전체가 아니라 어떤 특정한 다른것을 기준점을 삼아서 거기에 상대적으로 위치를 지정하는 값입니다. 상대위치는 position:relative가 되죠. 물론 상대적으로도 얼만큼 떨어져서 위치를 잡아야 결정해야 하므로 top과 left옵션도 같이 쓰입니다.
왼쪽의 '상대위치'라는 글씨로부터 위치를 지정하고 싶으면 그 기준점은 '상대위치'라는 글씨가 끝나는 저 빨간점이 기준점이 되는 것이죠 저 점을 기준으로 top과 left를 써서 얼만큼 떨어뜨려서 나타내주는가를 결정하는 겁니다. 따라서 표현하고자 할 내용은 저 글씨의 상대적인 위치가 되겠죠.
예제를 들어보겠습니다.
embeded방식
inline방식
<html> <head> <title>스타일시트 예제</title> <style type="text/css"> font {position:relative;top:10;left:15} </style> </head> <body> HTML TUTOR <font>나는 할 수 있다</font> </body> </html>
HTML TUTOR <font style="position:relative;top:10;left:15">나는 할 수 있다</font>
저기 'HTML TUTOR'라는 글씨를 기준으로 top:10과 left:15만큼 떨어뜨려서 '나는 할 수 있다'라는 글씨를 나타냈습니다.
상대위치에 관한 팁하나더. 절대위치가 회면 상단왼쪽이라서 더이상 위로, 왼쪽으로 갈수 없던 반면 상대위치는 기준점이 반드시 상단왼쪽에 자리잡아야 한다는 법이 없으므로 기준점보다 위로또는 왼쪽으로 갈수 있는 여지가 있죠. 따라서 top과 left값을 마이너스(-)로 줄 수 있습니다.
embeded방식
inline방식
<html> <head> <title>스타일시트 예제</title> <style type="text/css"> font {position:relative;top:-10;left:-15} </style> </head> <body> HTML TUTOR <font>나는 할 수 있다</font> </body> </html>
HTML TUTOR <font style="position:relative;top:-10;left:-15">나는 할 수 있다</font>
상대위치나 절대위치로 지정을 하개되면 내용끼리 겹쳐지게 되는 경우가 있습니다. 그림과 글씨가 겹쳐진다던가 테이블과 그림이 겹친다던가 하는 경우가 있을테죠. 이럴때 z-index는 그 층의 순서를 결정해줍니다. 즉, 나중에 덮은 것이 우선권을 가지고 먼저 놓여있던 것은 기능이 묻히게 한다는것이죠. 보인다와 보이지 않는다의 개념과는 좀 다릅니다. 나중에 덮은것은 보이고 먼저 놓여있던 것은 보이지 않는법은 없습니다. 물론 그런경우도 있지만. 그냥 순서의 우선권을 부여하는것이기 때문에..
embeded방식
inline방식
<html> <head> <title>스타일시트 예제</title> <style type="text/css"> a {position:absolute;top:15;left:15; z-index:2} font {position:absolute;top:15;left:15; z-index:1} </style> </head> <body> <a href=http://kr.yahoo.com target=_blank>야후코리아</a> <font>나는 할 수 있다</font> </body> </html>
<a href=http://kr.yahoo.com target=_blank style="position:absolute;top:15;left:15; z-index:2">야후코리아</a> <font style="position:absolute;top:15;left:15; z-index:1">나는 할 수 있다</font>
정보맨 08-02-13 23:32 조회 : 2084
태그&소스
매니져: 미정
패밀리 사이트 바로가기
처음
