CSS 위치 속성
위치 속성
위치 설정 방법
- 절대 위치 좌표: 요소의 X좌표와 Y좌표를 설정해 절대 위치를 지정
- 상대 위치 좌표: 요소를 입력한 순서에 따른 상대 위치를 지정
position 속성
| position 속성 | |
|---|---|
| static | 상대 위치 좌표, 디폴트 |
| relative | 초기 위치에서 상하좌우로 이동 |
| absolute | 부모를 기준으로 절대 위치 좌표 |
| fixed | 화면을 기준으로 절대 위치 좌표 |
위치 속성 - static
- position:static
-
브라우저의 디폴트 배치 방식
- HTML 태그의 작성된 순서대로 출력 위치를 정함
-
top, bottom, left, right 속성 값은 적용 안 됨
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> div { /* 기본 속성, static일 경우 이동 불가 */ position: static; } </style> </head> <body> <div style="top: 100px">안녕하세요</div> </body> </html>
-
위치 속성 - relative
- position:relative
-
기본 위치에서 left, top, bottom, right 속성의 값만큼 이동한 상대 위치에 배치
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> div { /* 원래 있던 위치에서 이동 */ position: relative; } </style> </head> <body> <div style="top: 100px; left: 5em">안녕하세요</div> </body> </html>속성 left 왼쪽 모서리의 이동 거리 top 위쪽 모서리의 이동 거리 -
top/bottom가 동시 지정 시, bottom 무시
-
left/right가 동시 지정 시, right 무시
-
위치 속성 - absolute
- position:absolute
-
HTML 태그를 절대 위치에 배치
-
절대 위치는 left, top, bottom, right 속성 값으로 정함
-
- 부모에 relative 속성이 없을 때
-
절대값 기준으로 (100, 100)
-
- 부모에 relative 속성이 있을 때
-
relative를 준 parent2를 기준으로 (100, 100)
-
- child에 absolute가 있으면 브라우저가 바로 위 부모의 relative를 찾고, 만약 없을시 그 위에 있는 부모에게 relative가 있는지 찾음
-
있을 경우에는 relative가 있는 부모를 기준으로 잡고, 아무데도 없을 시 브라우저의 절대값 (0, 0)을 기준으로 한다
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> /* * { margin: 0; padding: 0; } */ .parent { border: 3px solid blue; /* relative 있는 위치 */ position: relative; } .parent2 { border: 3px solid green; } .child { border: 3px solid red; position: absolute; top: 0px; left: 0px; } </style> </head> <body> <div class="parent"> parent <div class="parent2"> parent2 <div class="child">child</div> </div> </div> </body> </html>
-
위치 속성 - fixed
- position:fixed
- 스크롤하거나 브라우저의 크기를 변경해도 브라우저 화면에 항상 보임
- left, top, right, bottom 속성 값으로 특정 위치에 고정
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> #fixed { background-color: red; color: white; /* background-attachment처럼 fixed하면 스크롤해도 그대로 따라옴 */ position: fixed; bottom: 20px; right: 100px; width: 120px; padding: 5px; } </style> </head> <body> <h3>Merry Christmas!</h3> <hr /> <img src="../medias/christmastree.png" width="300" height="300" alt="크리스마스 트리" /> <div id="fixed">메리크리스마스!</div> </body> </html>
z-index 속성
위치 속성 - z-index
- z-index 속성 (값은 숫자, 크면 클수록 최상단에 위치, 음수 사용 가능)
-
HTML 태그들을 z축에 따라 수직으로 쌓는 순서를 지정
-
속성 값이 클수록 위에 쌓임
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> .box { width: 100px; height: 100px; position: absolute; } /* model1이 최상단으로 올라옴 */ .model1 { background-color: red; top: 10px; left: 10px; z-index: 100; } .model2 { background-color: green; top: 50px; left: 50px; z-index: 10; } .model3 { background-color: blue; top: 90px; left: 90px; z-index: 1; } </style> </head> <body> <div class="box model1"></div> <div class="box model2"></div> <div class="box model3"></div> </body> </html>
-
위치 속성 - overflow
- overflow 속성
-
내부 요소의 부모의 범위를 벗어날 때 요소를 처리하는 방법
-
블록 태그에만 적용
overflow 속성 visible 내용이 잘리지 않고 영역을 넘어 출력, 디폴트 hidden 영역을 벗어나는 부분을 숨김 scroll 무조건 스크롤 생성 auto 내용이 부모 영역을 넘어가면 자동으로 스크롤 생성
-
float 속성
위치 속성 - float
- float 속성
- 태그를 오른쪽이나 왼쪽에 항상 배치 가능
- 항상 같은 위치에 출력할 광고나 공지 등에 적합
- 주요 키워드
| | 키워드 | | --- | --- | | left | 태그를 왼쪽에 붙이기 | | right | 태그를 오른쪽에 붙이기 |
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅
