Study Record

CSS 포지셔닝 본문

웹/HTML + CSS

CSS 포지셔닝

초코초코초코 2025. 2. 20. 18:35
728x90

 

 

CSS 포지셔닝과 주요 속성

브라우저 화면 안에서 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 두 속성이 있다. 바로 float 속성과 position 속성이다. 이 속성들과 박스 모델의 마진, 패딩, 테두리 속성까지 포함해 전체적인 레이아웃이 완성된다. 같은 내용이라도 어떻게 배치함에 따라 완전 다른 사이트처럼 보여진다.

 

 

 박스 너비 기준 정하기 - box-sizing 속성

박스 모델을 배치하려면 우선 박스 모델의 너비를 알아야 한다. 모던 브라우저에서 박스 모델의 width 와 height 속성은 박스 모델 전체의 너비와 높이가 아니라 박스 모델 안에 있는 콘텐츠 부분의 너비와 높이이다. (인터넷 익스플로러 8 제외)

 

웹 문서에서 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야 하는데 width 속성값이 콘텐츠 영역의 너비만 나타내기 때문에 패딩이나 테두리는 따로 계산해야 한다. 이때 box-sizing 속성을 사용하면 width 속성 값을 콘텐츠 영역 너비 값으로 사용할지 패딩과 테두리까지 포함시켜 사용할지 결정한다.

  • box-sizing: content-box; : width = 콘텐츠 영역 너비 값 으로 사용한다. 기본값이다.
  • box-sizing: border-box; : width = 테두리 영역 너비 값까지 포함한 박스 모델 전체 너비 값으로 사용한다.

 

예시) content-box, 콘텐츠 영역 = 300px, 화면에 차지하는 너비 = 300px + 60px(padding) + 2px(border) = 362px

div{
    box-sizing: content-box;
    width: 300px;
    height: 150px;
    padding: 30px;
    margin: 10px;
    border: 1px solid black;
}

 

 

예시) border-box, 콘텐츠 영역 = 300px(width) -60px(padding) - 2px(border) = 238px, 화면에 차지하는 너비 =300px  

div{
    box-sizing: border-box;
    width: 300px;
    height: 150px;
    padding: 30px;
    margin: 10px;
    border: 1px solid black;
}

 

 

 왼쪽이나 오른쪽으로 배치하기 - float 속성

float 속성은 웹 요소를 문서 위에 떠 있게 만든다. '떠 있다'는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 의미이다. float 속성이 사용할 수 있는 속성값은 다음과 같다.

  • float: left; : 해당 요소를 문서의 왼쪽으로 배치한다.
  • float: right; : 해당 요소를 문서의 오른쪽으로 배치한다.
  • float: none; : 좌우 어느 쪽으로도 배치하지 않는다.

 

㉮ 이미지와 텍스트에서 float 속성 예시

img 가 float: left; 속성을 가지므로 왼쪽에 배치되었다.

 

<style>
    img {
        width: 200px;
        height: auto;
        float: left;
        margin-right: 15px;
    }
</style>

<body>
    <img src="img/img1.jpg" alt="image">
    <h1>이미지</h1>
    <p>대통령이 임시회의 집회를 요구할 때에는 기간과 집회요구의 이유를 명시하여야 한다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.</p>
</body>

 

 

㉯ left 와 right 속성 같이 있을 경우 예시

float:left 나 right 를 지정하면 너비 값은 컨텐츠를 표시할 때 필요한 만큼만 차지하고 다른 요소가 들어올 만큼의 공간을 비워 둔다. 예시는 float 속성이 지정된 박스1~4 까지 공간을 차지하고 다른 요소(p태그)가 들어올 만큼의 공간이 비워졌다. 

<style>
    div {
        padding: 20px;
        margin-right: 10px;
    }
    .box1 {
        background-color: rgb(88, 155, 155);
        float: left;
    }
    .box2 {
        background-color: rgb(199, 117, 117);
        float: left;
    }
    .box3 {
        background-color: rgb(131, 199, 167);
        float:left;
    }
    .box4 {
        float: right;
        background-color: beige;
    }
</style>


<body>
    <div class="box1">박스1</div>
    <div class="box2">박스2</div>
    <div class="box3">박스3</div>
    <div class="box4">박스4</div>
    <p>이미지 박스 채우기</p>
</body>

 

 

 float 속성 해제하기 - clear 속성

float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유용하지 않다고 알려주는 속성이 clear 이다. 

  • float: left; 를 이용해 왼쪽으로 배치한 경우 ≫ clear: left; 로 종료한다.
  • float: right; 를 이용해 오른쪽으로 배치한 경우 ≫ clear: right; 로 종료한다.
  • float 속성값과 관계없이 기본 상태로 돌리고 싶다면 clear: both; 를 사용한다.

 

예시 1)

<style>
    div {
        padding:20px;
        margin:10px;
    }
    .box1{
        background:#ffd800;
        float:left;
    }
    .box2 {
        background: #0094ff;
        float:left;
    }
    .box3 {
        padding: 0px;
        background: #00ff21;
    }
    .box4 {
        padding: 0px;
        background:#a874ff;
    }
    .box5 {
        background:#8b8892;
        clear:both;
    }
</style>

<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3">박스3</div>
<div class="box4">박스4</div>
<div class="box5">박스5</div>

 

 

예시 2) float 속성 - ㉮ 예시와 비교

<style>
    div {
        float: left;
        margin-right: 15px;
    }
    h1 { clear: both; }
</style>

<div>
    <img src="img/img1.jpg" alt="image" style="width: 200px;">
</div>
<h1>이미지</h1>
<p>대통령이 임시회의 집회를 요구할 때에는 기간과 집회요구의 이유를 명시하여야 한다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.</p>

 

 

 position 속성 - 배치 방법 지정하기

position 속성을 사용하면 웹 문서 안에 요소들을 자유자재로 배치할 수 있다. top, bottom, left, right 속성과 같이 사용하면 정확한 위치를 좌표처럼 지정하여 배치할 수도 있다. 속성 값으로 static, relative, absolute, fixed 를 사용할 수 있다.

 

 

㉮ position: static; 일 경우

이 속성 값은 position 속성의 기본값으로 요소를 나열한 순서대로 배치하며 top, bottom, left, right 같은 속성을 사용할 수 없다. 단지 float 속성을 이용해 left 혹은 right 로 배치할 수 있다.

 

 

㉯ position: relative; 일 경우

이 속성값은 static 처럼 나열한 순서대로 배치되지만 top, bottom, left, right 속성을 사용할 수 있으며 좌표값을 사용해 위치를 지정할 수 있다.

 

예시)

div {
    width: 100px;
    padding: 10px;
    margin: 10px; 
}
.box1 {
    background-color: bisque; 
}
.box2 {
    background-color: cadetblue;
    position: relative;
    left: 50px;
    top: -20px;
}

 

 

㉰ position: absolute; 일 경우

이 속성 값은 문서의 흐름과 상관없이 left, right, top, bottom 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다. 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative 인 요소이다. 그래서 absolute 을 사용하려면 그 요소를 감싸는 <div> 를 만들고 position: relative; 로 지정해놓고 사용해야 한다.

 

예시)

#parent {
    width: 250px;
    height: 250px;
    border: 1px slateblue solid;
    position: relative;
}
.content {
    width: 50px;
    padding: 10px;
    background-color: cadetblue;
    position: absolute;
}
.box1 {
    top: 0;
    left: 0;
}
.box2 {
    top: 0;
    right: 0;
}
.box3 {
    bottom: 0;
    left: 0;
}
.box4 {
    bottom: 0;
    right: 0;
}
.box5 {
    top: 100px;
    left: 100px;
}

<div id="parent">
    <div class="content box1">박스1</div>
    <div class="content box2">박스2</div>
    <div class="content box3">박스3</div>
    <div class="content box4">박스4</div>
    <div class="content box5">박스5</div>
</div>

 

 

㉱ position:fixed; 일 경우

이 속성 값은 브라우저 창 기준으로 배치할 수 있다. 브라우저 창의 왼쪽 위 꼭지점을 원점으로 두고 좌표가 계산되며 한 번 배치되면 fixed 라는 이름처럼 브라우저 창을 스크롤하더라도 계속 고정되어 표시된다.

 

예시)

div {
    background-color: antiquewhite;
    padding: 10px;
    position: fixed;
    top: 30px;
    left: 40px;
}

<div>fixed 공간</div>

 

 

 visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기

visibility 속성은 특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성이다.

  • visibility: visible; → 화면에 요소를 표시한다. 기본값이다.
  • visibility: hidden; → 화면에 요소를 감춘다. 크기는 그대로 유지하기 때문에 배치에 영향을 준다.
  • visibility: collapse; → 표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절한다. 그 외의 영역에서는 hidden 속성값처럼 처리된다.
p { visibility: hidden; }

 

 

 z-index 속성 - 요소를 쌓는 순서 정하기

각 요소가 수평, 수직으로 이동하는 것 외에 한 요소 위에 다른 요소를 쌓을 수 있다. 요소 위에 쌓을 때 순서를 정하는 것이 z-index 속성이다. z-index 속성값이 작을수록 아래에 쌓이고 z-index 값이 클수록 위에 쌓인다. z-index 값을 명시하지 않으면 맨 먼저 삽입하는 요소가 z-index: 1; 을 가지며 그 후에 삽입된 요소들의 값이 점점 커진다.

 

예시) z-index 값을 명시하지 않을 경우

div {
    position: relative;
    float: left;
    width: 100px;
    padding: 10px;
    height: 70px;
}
.box1 {
    background-color: bisque;
}
.box2 {
    background-color: cadetblue;
    left: -40px;
    top: 25px;
}
.box3 {
    background-color: coral;
    left: -70px;
    top: 10px;
}

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

 

 

예시) box3 < box1 < box2 순으로 z-index 값을 가질 경우

div {
    position: relative;
    float: left;
    width: 100px;
    padding: 10px;
    height: 70px;
}
.box1 {
    background-color: bisque;
    z-index: 2;
}
.box2 {
    background-color: cadetblue;
    left: -40px;
    top: 25px;
    z-index: 3;
}
.box3 {
    background-color: coral;
    left: -70px;
    top: 10px;
    z-index: 1;
}

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

 

728x90

'웹 > HTML + CSS' 카테고리의 다른 글

CSS 레이아웃을 위한 스타일  (0) 2025.02.18
CSS 배경 그라데이션 효과  (0) 2025.02.17
CSS 색상과 배경을 위한 스타일  (0) 2025.02.17
CSS 목록과 링크 스타일  (4) 2025.02.16
CSS 텍스트 스타일  (0) 2025.02.16
'웹/HTML + CSS' Related Articles more