KDT 수업/HTML | CSS

[CSS] CSS Position

니니는 진짜 전설이다 2023. 4. 4. 15:09

 

 

CSS position: 요소의 위치를 결정하는 방식을 설정



1. 정적 위치 지정방식

  • static position. 기본값
  • HTML 요소의 위치를 결정하는 기본적인 방식
  • 단순히 웹페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식

 

2. 상대 위치 지정방식

  • relative position
  • HTML 요소의 기본위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
  • top, left, right, bottom 속성값을 사용하여 재설정

예제코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상대 위치 지정 방식</title>
    <style>
        div {
            width: 200px;
            padding: 20px;
        }
        .relative1 {
            background-color: deeppink;
        }
        .relative2 {
            position: relative;
            background-color: deepskyblue;
            left: 200px;
            top: 100px;
        }
        .relative3 {
            position: relative;
            background-color: gold;
            right: 100px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <h2>상대 위치 지정 방식</h2>
    <div class="relative1">상대 위치 지정 방식1</div>
    <div class="relative2">상대 위치 지정 방식2</div>
    <div class="relative3">상대 위치 지정 방식3</div>
</body>
</html>

3. 고정 위치 지정방식

  • fixed position
  • 웹페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치한다
  • 뷰포트 기준으로 위치를 설정하는 방식
  • top, left, right, bottom 속성값을 사용할 수 있음

 

예제코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>고정 위치 지정 방식</title>
    <style>
        #fx{
            position: fixed;
            width: 100px;
            height: 200px;
            background-color: gold;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <h2>고정 위치 지정 방식</h2>
    <div id="fx"></div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam itaque labore ut similique voluptatem modi mollitia quo impedit, possimus ad vero aperiam, amet, voluptates quibusdam? At enim quis id inventore?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam itaque labore ut similique voluptatem modi mollitia quo impedit, possimus ad vero aperiam, amet, voluptates quibusdam? At enim quis id inventore?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam itaque labore ut similique voluptatem modi mollitia quo impedit, possimus ad vero aperiam, amet, voluptates quibusdam? At enim quis id inventore?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam itaque labore ut similique voluptatem modi mollitia quo impedit, possimus ad vero aperiam, amet, voluptates quibusdam? At enim quis id inventore?</p>
    </div>
</body>
</html>
</html>

페이지 사이즈를 늘려도 계속 오른쪽 아래에 고정

4. 부모태그를 이용한 고정위치 지정방식

  • sticky position
  • fixed가 브라우저 화면의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대 위치값을 사용하는 방식
  • 익스플로러에서는 작동하지 않음

예제코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sticky</title>
    <style>
        html, body{margin: 0; padding: 0;}
        .header {
            height: 80px;
            background-color: gold;
        }
        .container {
            display: flex;
            flex-flow: row nowrap;
        }
        .content {
            box-sizing: border-box;
            width: 80%;
            height: 800px;
            background-color: deepskyblue;
        }
        .sidebar {
            position: sticky;
            box-sizing: border-box;
            width: 20%;
            background-color: deeppink;
            height: 400px;
            top: 10px;
        }
        .footer {
            background-color: yellowgreen;
            height: 200px;
        }
    </style>
</head>
<body>
    <header class="header">헤더</header>
    <main class="container">
        <section class="content">메인 컨텐츠</section>
        <aside class="sidebar">Sticky 적용하기</aside>
    </main>
    <footer class="footer">푸터</footer>
</body>
</html>

5. 절대위치 지정방식

  • absolute position
  • 뷰포트를 기준으로 위치를 설정하는 방식
  • 조상요소를 기준으로 위치를 지정할 수 있음
  • 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정
  • 조상요소를 기준으로 위치를 지정하려면 조상요소는 반드시 정적 위치 지정방식이 아니어야 함
  • top, left, right, bottom 속성값을 사용할 수 있음

예제코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>절대 위치 지정 방식</title>
    <style>
        #wrap{
            position: relative;
            width: 500px;
            height: 500px;
            border: 3px solid red;
        }
        .box {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: deeppink;
        }
        #ab1 {top:0; right:0;}
        #ab2 {bottom: 0; left: 0;}
        #ab3 {bottom: 0; right: 0;}
        #ab4 {top: 100px; left: 150px;}
    </style>
</head>
<body>
    <h2>절대 위치 지정 방식</h2>
    <div id="wrap">
        <div class="box" id="ab1"></div>
        <div class="box" id="ab2"></div>
        <div class="box" id="ab3"></div>
        <div class="box" id="ab4"></div>
        <div class="box" id="ab5"></div>
    </div>
</body>
</html>

 

z-index

  • HTML요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
  • 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
  • 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래에 위치하게 됨

예제코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index</title>
    <style>
        div#wrapper{ position: relative;}
        div.box {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            font-size: 25px;
        }
        #b1 {
            left: 50px;
            top: 50px;
            background-color: deeppink;
            z-index: 10;
        }
        #b2 {
            left: 120px;
            top: 70px;
            background-color: gold;
            z-index: 100;
        }
        #b3 {
            left: 70px;
            top: 110px;
            background-color: greenyellow;
            z-index: 5;
        }
    </style>
</head>
<body>
    <h2>z-index</h2>
    <div id="wrapper">
        <div id="b1" class="box">1번째 div</div>
        <div id="b2" class="box">2번째 div</div>
        <div id="b3" class="box">3번째 div</div>
    </div>
</body>
</html>

float

  • HTML 요소가 주변(수평으로 나열된) 의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 사용
  • float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
  • float를 적용받은 요소의 방향을 결정(left, right)
  • 컨텐츠 크기 만큼만 영역을 설정(블록)
  • float를 적용받은 요소는 다른 요소보다 위쪽에 위치(배경보다 위)

예제코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float1</title>
    <style>
        img{
            float: left;
            margin-right: 20px ;
        }
    </style>
</head>
<body>
    <h2>float1</h2>
    <img src="./bus.png" alt="버스">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero porro, laborum, quisquam sint tenetur error exercitationem obcaecati incidunt atque, fugit ullam cupiditate! Similique facilis numquam explicabo nemo ea quisquam perferendis.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores architecto, distinctio tenetur fuga sit dolores error consequuntur quas sed quibusdam necessitatibus ut quod, aut nisi nam pariatur ducimus temporibus quis?
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float2</title>
    <style>
        #box1 {
            padding: 20px;
            background-color: gold;
            float: left;
            margin-right: 20px;
        }
        #box2 {
            padding: 20px;
            background-color: deeppink;
            float: left;
            margin-right: 20px;
        }
        #box3 {
            padding: 20px;
            background-color: deepskyblue;
            float: left;
        }
        #box4 {
            padding: 20px;
            background-color: greenyellow;
            float: right;
        }
    </style>
</head>
<body>
    <h2>float2</h2>
    <div id="box1">박스-1</div>
    <div id="box2">박스-2</div>
    <div id="box3">박스-3</div>
    <div id="box4">박스-4</div>
</body>
</html>

clear

  • float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
  • float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듬 
  • clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float속성에 영향을 받지 않도록 설정(left, right, both)

 

예제코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clear</title>
    <style>
        body{
            margin: 20px 30px; 
            max-width: 800px;
        }
        p {
            padding: 10px;
            text-align: center;
            font-size: 18px;
        }

        #p1 {
            float: left;
            width: 38%;
            background-color: gold;
            margin-bottom: 20px;
        }
        #p2 {
            float: right;
            width: 54%;
            background-color: deepskyblue;
        }
        #p3 {
            clear: both;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <h2>clear</h2>
    <div id="p1">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam voluptatibus nobis error quis, nesciunt non modi rerum fugiat perspiciatis totam nostrum. Repellat consequatur esse ratione possimus sint accusamus delectus ipsum!
        </p>
    </div>
    <div id="p2">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In officiis quaerat quis adipisci impedit dolor praesentium porro. Fugiat dolores illo distinctio. Alias sunt ad molestias, ducimus unde soluta incidunt doloribus!</p>
    </div>
    <div id="p3">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto accusamus sint eaque cum voluptatem modi, eos dolorum porro at quod incidunt possimus sit doloribus laboriosam, laudantium quidem fugit dolor tempora.</p>
    </div>
</body>
</html>

'KDT 수업 > HTML | CSS' 카테고리의 다른 글

[CSS] Flex 레이아웃  (0) 2023.04.07
[CSS] 다단레이아웃  (2) 2023.04.04
[CSS] CSS 디스플레이 / 폼  (0) 2023.04.03
[CSS] 박스 모델 (Box Model)  (0) 2023.04.03
[CSS] CSS 배경  (0) 2023.04.03

'KDT 수업/HTML | CSS'의 다른글

  • 현재글[CSS] CSS Position

관련글

티스토리툴바