홈 강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

마케팅 특별마케팅자료 다운로드마케팅자료 창업,경영 기획,카피 동기부여,성취 소스,유틸
CSS 사용 표현 - 위치표현
작성자 : 99 단국강토
등록날짜 : 2009.02.19 10:43
2,689
위치표현
  1 절대위치 - [ positon:absolute 예제 ]
  2 상대위치 - [ positon:relative 예제 ]
  3 겹치기 - [ z-index ]
blank.gif

지금부터 위치표현 공부를 시작해 볼까요.
위치, 영문으로 positon이 되겠죠 스타일속성은 positon이되고 옵션으로는 절대적인 위치를 말하는 absolute와 상대적인 위치를 말하는 relative가 있습니다.
자! 그럼 위치라는 속성이 있고 절대위치와 상대위치가 있으니 수치로 명확히 해야할 필요가 있겠죠^^
즉 top속성과 left속성을 이용하여 원하고자 하는 위치에 대상을 배치시켜야 겠죠^^

형식은 아래와 같습니다.
적용될태그 {position：absolute;top:10;left:20}
위 예제는 상단에서 10픽셀 왼쪽에서 20픽셀을 다른 테이블이나 이미지등에 상관없이 절대위치에 배치하라는 스타일입니다.
그럼 절대위치의 기준이 되는 지점이 있어야겠죠^^
absolute의 절대위치는 아래 그림의 빨간색부분입니다.
locate_01.gif

그리고 위 그림처럼 인포카페 텍스트에서 상대위치인 relative값이 주어졌을 경우에는 파란색 화살표가 위치하는 곳을 중심으로 해서 top와 left속성이 상대적으로 적용됩니다.

백문이 불여일견 한번 예제로 보는것이 더욱 좋겠죠^^

[positon:absolute 예제] -
<html>
<head>
<title>스타일시트 예제</title>
<style>
font {position：absolute;top:200;left:50}
</style>
</head>
<body>
<font>재미있는 인포카페^^</font>
</body>
</html>

[positon:relative 예제] -
<html>
<head>
<title>스타일시트 예제</title>
<style>
font {position:relative;top:50;left:100}
</style>
</head>
<body>
<br><br><br><br><br> 인포카페 <font>재미있는 인포카페^^</font>
</body>
</html>

어때요^^ 이해가 되시는가요? 위 속성들의 값을 조금씩 바꾸어 가며 연습을 해보세요. 그리고 중요한 것은 음수(-)로도 정의가 된다는것과 불필요하게 크게 또는 적게 설정을 하면 우주의 미라처럼 스크롤바도 없이 브라우저를 이탈해 버린답니다.^^ 테스트 해 보세요^^

[z-index 예제] -
<html>
<head>
<title>스타일시트 예제</title>
<style>
.test_1 {position：absolute;top:150;left:250;z-index:1;font-size:20}
.test_2 {position：absolute;top:150;left:250;z-index:2;font-size:20}
.test_3 {position：absolute;top:250;left:250;z-index:1;font-size:20}
.test_4 {position：absolute;top:250;left:250;z-index:2;font-size:20}
</style>
</head>
<body>
<a href='http://www.infocafe.pe.kr' target='_blank' class='test_1'>인포카페로 이동하지 못합니다.</a>
<font class='test_2'>인포카페로 이동하지 못합니다.</font>
<a href='http://www.infocafe.pe.kr' target='_blank' class='test_4'>인포카페로 이동합니다.</a>
<font class='test_3'>인포카페로 이동합니다.</font>
</body>
</html>

위 예제를 보시면 상단의 글씨는 링크가 가려져 있어 인포카페로 넘어가질 못하는데 반면 아랫글씨는 링크가 적용이 되는 것을 확일할 수 있습니다.
아바타의 원리를 상기하시고 위 속성 값을 수정해 가시면서 계속 연습해 보시기 바랍니다.
그럼 다음 강좌에서 뵙겠습니다.

출처 : Tong - 드렁크수달스님의 ■ CSS ■통

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
☞​자세히보기

Comments

로그인한 회원만 댓글 등록이 가능합니다.
번호 제목 글쓴이 날짜 조회
3195 투명 테이블 99 단국강토 02.19 2074
3194 이미지 사용하지 않고, HTML문서에 그라데이션 표현하기 99 단국강토 02.19 2117
3193 HTML 문서에서 데스크탑용 커서 사용하기 99 단국강토 02.19 2674
3192 테이블로 입체버튼 만들기 99 단국강토 02.19 2362
3191 html 문서에 테두리 넣기 99 단국강토 02.19 2512
3190 List 아이템을 그림으로 바꾸기 99 단국강토 02.19 2066
3189 프린트 할때 폰트 다르게 표현하기 99 단국강토 02.19 2394
3188 media-print CSS 를 아시나요? 99 단국강토 02.19 2139
3187 스타일시트 99 단국강토 02.19 2443
3186 한줄 Tip 99 단국강토 02.19 2705
3185 [css] 텍스트 / 폼 / 테이블 / 버튼 / 체크박스 99 단국강토 02.19 2605
3184 link색 바꾸기 99 단국강토 02.19 3138
3183 버튼 미디어 플래이어를 구현해 보자 99 단국강토 02.19 3028
3182 CSS 사용방법 - 폰트표현 99 단국강토 02.19 4766
열람중 CSS 사용 표현 - 위치표현 99 단국강토 02.19 2690
3180 레이어(Layer) 팝업 만들기 99 단국강토 02.19 3176
3179 문자열 체크 99 단국강토 02.19 1783
3178 onUnLoad 이벤트 제어하기 99 단국강토 02.19 2712
3177 onUnLoad 이벤트 제어하기 99 단국강토 02.19 2895
3176 Input Box의 readOnly 속성 제어하기 99 단국강토 02.19 2989
3175 Input Box의 readOnly 속성 제어하기 99 단국강토 02.19 2654
3174 iframe 속성 설명 99 단국강토 02.19 2351
3173 iframe 속성 설명 99 단국강토 02.19 2412
3172 Textare 에 이미지 넣기 99 단국강토 02.19 1642
3171 Textare 에 이미지 넣기 99 단국강토 02.19 2080
3170 form enctype (encoding) 조절하기 99 단국강토 02.19 2378
3169 form enctype (encoding) 조절하기 99 단국강토 02.19 2863
3168 new Image() 사용하기 99 단국강토 02.19 1661
3167 new Image() 사용하기 99 단국강토 02.19 2052
3166 특수문자 입력 방지하기 99 단국강토 02.19 3341
마케팅
특별 마케팅자료
다운로드 마케팅자료
+ 마케팅 더보기
+ 특별 마케팅자료 더보기
+ 다운로드 마케팅자료 더보기
창업,경영
기획,카피,상품전략
동기부여,성취
+ 창업,경영 더보기
+ 기획,카피,상품전략 더보기
+ 동기부여,성취 더보기