CSS3 위치 속성

미어캣의 개발일지·2022년 11월 27일

CSS

목록 보기

8/13

📖CSS 위치 속성

프로그램을 개발할 때는 요소의 위치를 2가지 방법으로 설정

절대 위치 좌표 - 요소의 X좌표와 Y좌표를 설정해 절대 위치 지정
상대 위치 좌표 - 요소를 입력한 순서를 통해 상대적으로 위치 지정

📃position 속성

상대 위치 좌표를 설정할 때는 position 속성에 static 키워드 or relative 키워드 적용
static 키워드를 적용하면 태그가 위에서 아래로와 왼쪽에서 오른쪽으로 순서에 맞게 배치
relative 키워드를 적용하면 static 키워드로 초기 위치가 지정된 상태에서 상하좌우로 이동 가능
절대 위치 좌표를 사용할 때는 position 속성에 absolute 키워드 or fixed 키워드 사용

키워드	설명
static	태그가 위에서 아래로 순서대로 배치
relative	초기 위치 상태에서 상하좌우로 위치를 이동
absolute	절대 위치 좌표를 설정
fixed	화면을 기준으로 절대 위치 좌표 설정

예시

<!DOCTYPE html>
<html></html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .red { background-color: red; }
        .green { background-color: green; }
        .blue { background-color: blue; }
    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
</body>
</html>

출력

모두 같은 위치에 배치되어 마지막인 blue만 보인다.

예시

    <style>
        .box {
            width: 100px; height: 100px;
            position: absolute;
        }
        .red {
            background-color: red;
            left: 10px; top: 10px;
        }
        .green {
            background-color: green;
            left: 50px; top: 50px;
        }
        .blue {
            background-color: blue;
            left: 100px; top: 100px;
        }
    </style>

출력

기본적으로 HTML 페이지의 뒤에 입력한 태그가 상위로 올라옴

📃z-index 속성

숫자를 적용하여 숫자가 클수록 앞에 위치함

예시

    <style>
        .box {
        width: 100px; height: 100px;
        position: absolute;
        }
        .red {
        background-color: red;
        left: 10px; top: 10px;
        z-index: 3;
        }
        .green {
        background-color: green;
        left: 50px; top: 50px;
        z-index: 2;
        }
        .blue {
        background-color: blue;
        left: 100px; top: 100px;
        z-index: 1;
        }
    </style>

출력

📃위치 속성과 관련된 공식

예시

<body>
    <h1>Lorem ipsum dolor amet</h1>
    <div>
        <div class="box red"></div>
        <div class="box green"></div>
        <div class="box blue"></div>
    </div>
    <h1>Lorem ipsum dolor amet</h1>
</body>

출력

코드를 실행하면 2가지 문제가 있다.
1. h1 태그 2개가 붙어있다. (div 태그가 영역을 차지하지 않음)
2. 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않음

position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지 하지 않음 따라서 position 속성에 absolute 키워드를 적용할 경우는 몇가지 처리가 필요함

자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용한다.

예시

<style>
    body > div {
                width: 300px; height: 100px;
                border: 3px solid black;
            }
</style>

출력

자손의 position 속성에 absolute 키워드를 적용하면 position 속성에 relative 키워드를 적용

이렇게 하면 자손태그가 부모의 위치를 기준으로 절대좌표를 설정

예시

<style>
    body > div {
                width: 300px; height: 100px;
                border: 3px solid black;
                position: relative;
            }
</style>

출력

📃overflow 속성

내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성

키워드	설명
hidden	영역을 벗어나는 부분을 보이지 않게 만듬
scroll	영역을 벗어나는 부분을 스크롤로 만듬

hidden 키워드
예시

<style>
    body > div {
              width: 300px; height: 100px;
              border: 3px solid black;
              position: relative;
              overflow: hidden;
          }
</style>

출력

scroll 키워드
예시

<style>
    body > div {
              width: 300px; height: 100px;
              border: 3px solid black;
              position: relative;
              overflow: scroll;
          }
</style>

출력

특정한 방향으로만 스크롤을 생성할 때는 overflow-x, overflow-y 속성 사용

미어캣의 개발일지

이게 왜 안되지? 이게 왜 되지?

이전 포스트

CSS3 폰트 속성

다음 포스트