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' 카테고리의 다른 글
| 스타일 시트 CSS 접두어 webkit, moz, ms, o 의미 (2) | 2024.12.03 |
|---|---|
| HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬 (0) | 2024.04.16 |
| 스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션 (0) | 2023.12.01 |
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
녹두장군1님의
글이 좋았다면 응원을 보내주세요!
