left, right, top, bottom 은 태그의 위치를 원하는 곳에 위치 시킬 수 있습니다. 주로 position 속성과 함께 사용하며 position 속성의 값이 static 일 때는 위치 정보가 적용되지 않습니다.
▼ 각 위치 속성에 들어가는 값의 단위는 px, cm, % 이며 상수로 auto 가 있습니다. auto 는 기본값으로 브라우저 왼쪽 끝 위치로 셋팅 됩니다. 4가지 속성 중 반대되는 left, right 와 top, bottom 을 동시에 적용하면 나중에 선언한 값이 적용됩니다.
¤ left : 문서 좌측에서 태그 좌측 좌표 거리
¤ right : 문서 우측에서 태그 우측 좌표 거리
¤ top : 문서 상단에서 태그 상단 좌표 거리
¤ bottom : 문서 하단에서 태그 하단 좌표 거리
▼ 그럼 position 이 static 일 때 샘플을 보겠습니다. top 과 left 로 값을 지정했는데도 위치 이동이 없죠. top 과 left 속성에 입력한 값만큼 이동을 하지 않고 있습니다. 위에서 설명했듯이 static 일 때는 위치를 이동시킬 수가 없습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성 </title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
div {
background-color: #4fcbe5;
width: 300px; height: 60px;
border: 1px solid; padding: 5px;
}
#pos1{
position: static;
top: 20px; left: 50px;
width: 300px; height: 150px;
}
</style>
</head>
<body>
<div id="pos1">
position: static example
</div>
</body>
</html>
▼ 아래 샘플은 위치 속성값에 들어가는 다양한 형태를 각각 표현한 것입니다. auto 는 위에서 이야기 했듯이 자신을 포함한 컨테이너의 왼쪽 끝으로 이동시킬 수 있습니다. 속성을 right 로 해도 동일합니다. 그리고 마이너스(-) 를 이용하면 역 방향으로 이동시킬 수 있으며 % 로 지정하는 것도 가능합니다. % 는 브라우저의 전체 길이에서 % 값 만큼 이동합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성 </title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
div {
background-color: #4fcbe5;
width: 300px; height: 30px;
border: 1px solid;
margin: 10px;
padding: 5px
}
#pos1{position: relative; left: auto;}
#pos2{position: relative; left: 10px;}
#pos3{position: relative; left: -10px;}
#pos4{position: relative; left: 10%;}
</style>
</head>
<body>
<div id="pos1">
position: relative left: auto
</div>
<div id="pos2">
position: relative left: 10px
</div>
<div id="pos3">
position: relative left: -10px
</div>
<div id="pos4">
position: relative left: 10%
</div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬 (0) | 2024.04.16 |
|---|---|
| 스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션 (0) | 2023.12.01 |
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
| 스타일 시트 CSS 접두어 webkit, moz, ms, o 의미 (2) | 2022.12.19 |
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
