CSS ⭐ ③ 필수 속성 - (2) 화면 배치

kongmi 2023. 3. 15. 09:10

⭐위치 속성으로 HTML 요소 배치

위치 속성은 요소를 상대적으로 또는 절대적으로 배치할 수 있습니다.

postion 속성

👉 position은 요소의 위치를 지정하는 데 사용되는 속성

position 속성을 지정하면 top, right, bottom, left 속성을 이용하여 요소의 위치를 조정할 수 있습니다.
각 속성은 요소를 기준으로 지정된 거리만큼 이동시킵니다.

position 속성과 함께 사용되는 속성으로 z-index가 있습니다. z-index는 요소의 쌓임 순서를 지정하는데 사용됩니다. 값이 높을 수록 위에 쌓이게 됩니다.

position 속성은 레이아웃을 구성하는 데 매우 중요한 역할을 합니다.

특히 absolute와 fixed 값은 요소를 자유롭게 배치할 수 있도록 도와줍니다. 그러나 이러한 속성을 사용할 때에는 다른 요소들과 충돌이나 겹침을 방지하기 위해 조심해야 합니다.

static

👉 positoin 속성값을 static으로 지정하면 아무런 변화 없음

relative

👉 요소를 좌표 속성에 따라 재배치할 수 있습니다.
원래 위치 기준으로 상대적으로 배치 됨.

📌 부모 요소에 위치를 넣는다면 relative를..!

absolute

👉 요소를 부모 요소를 기준으로 절대적인 위치에 배치하는 데 사용
위치상의 부모 요소 기준, 즉 부모의 position 속성이 반드시 relative, absolute, fixed 중 하나여야 합니다.
상위 요소가 없으면 html 기준으로 요소의 기준 위치 결

원래 위치

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>위치 속성으로 html 요소 배치하기</title>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100px;
      height: 100px;
    }
    .red-box {
      background-color: red;
    }
    .green-box {
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="box red-box"></div>
  <div class="box green-box"></div>
</body>
</html>

relative 적용

absolute 적용

fixed

👉요소를 뷰포트 기준으로 고정된 위치에 배치하는 데 사용
스크롤이 되어도 화면에서 사라지지 않고 항상 고정된 위치에 있습니다.
absolute와 똑같이 작동하는 것 처럼 보이지만, 스크롤 했을 때 차이가 있습니다.

📌 상단 고정 메뉴바 같은 ....

sticky

👉스크롤이 발생할 때 지정한 위치에 고정되는 요소를 만드는 데 사용

👉 fixed와 달리 스크롤이 발생하지 않으면 일반적인 문서 흐름에 따라 배치됨.

👉 스크롤이 발생하면 지정한 위치까지만 움직이고 그 뒤로는 고정됨.
📌 사이드바 느낌...?

z-index

👉 position 속성으로 배치한 요소의 쌓이는 위치(높낮이)를 결정 (z축)

👉우선순위 변경, 값이 커질 수록 우선순위가 커짐. 위치 뒤집기(?)
단, 동등 조건일 때에만 적용됨. (static이면 적용 안됨)

🐸 연습문제

아래의 화면과 같이 배치 해 보세요.

전체 박스 가로 크기 300px (배경색상 royalblue)
내부 박스 크기 100px의 정사각형 (배경 색상 orange)
선 두께 4px

내가 작성한 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    .background {
      width: 300px;
      height: 200px;
      background-color: royalblue;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: orange;
      border: 4px dashed red;
      box-sizing: border-box;
    }
    .box1 {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .box2 {
      position: absolute;
      left: 50px;
      top: 50px;
      z-index: 2;
    }
    .box3 {
      position: relative;
      bottom: 100px;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div class="background"></div>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</body>
</html>

강사님 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container {
      width: 300px;
      background-color: royalblue;
      position: relative;
    }
    .container .item {
      width: 100px;
      height: 100px;
      border: 4px dashed red;
      background-color: orange;
    }
    .container .item:nth-child(2) {
      position: absolute;
      left: 50px;
      top: 50px;
    }
    .container .item:nth-child(3) {
      z-index: 1;
      position: relative;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

내 코드와 다른 점

파란색 박스를 부모 요소로 넣고 오렌지 박스 3개를 자식으로 두어 부모 박스 높이가 자식 박스 크기에 맞춰 늘어나도록 했다.
자식들을 선택자로 지정하여 위치 속성 적용
자식이 여러개 일 때 굳이 클래스 여러개 만들지 말고 nth-child(n) 속성 이용할 것

float

👉 대상 요소를 공중에 띄워 다음에 오는 요소를 주변에 자연스럽게 배치

👉 margin을 안주면 옆에 딱 붙어버림

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    img {
      float: left;
      margin-right: 14px;
    }
  </style>
</head>
<body>
  <img src="./images/coffee.jpg" alt="커피">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Corrupti ut dolor ratione blanditiis iste, harum fugit, soluta eum
    obcaecati, expedita perspiciatis quam culpa? Doloribus repellendus
    labore sed inventore iusto eveniet. Lorem, ipsum dolor sit amet
    consectetur adipisicing elit. Maiores at natus aliquid numquam vitae nisi, 
    voluptates laudantium saepe error sapiente nobis adipisci et accusamus 
    molestiae commodi consequuntur earum, ut dicta? Lorem ipsum dolor sit amet consectetur, 
    adipisicing elit. Id molestiae perspiciatis non temporibus voluptates alias 
    ducimus libero esse recusandae placeat, natus quo mollitia sint enim? 
    Ex numquam non officia ipsam?</p>
</body>
</html>

블록 요소를 인라인 요소처럼 배치 하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      color: white;
    }
    .red-box {
      background-color: red;
      float: left;
      width: 100px;
    }
    .blue-box {
      background-color: blue;
      width: 100px;
      float: left;
    }
    .green-box {
      background-color: green;
      width: 100px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="red-box">red-box</div>
  <div class="blue-box">blue-box</div>
  <div class="green-box">green-box</div>
</body>
</html>

계속 배치하려면 float:left 해야함..
하지만 float 보단 flex-box를 이용하는 것이 더 직관적이고 좋음.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      color: white;
    }
    .red-box {
      background-color: red;
      float: left;
      width: 100px;
    }
    .blue-box {
      background-color: blue;
      width: 100px;
      float: left;
    }
    .green-box {
      background-color: green;
      width: 100px;
      float: left;
    }
    p {
      color: black;
      clear: left;
    }
  </style>
</head>
<body>
  <div class="red-box">red-box</div>
  <div class="blue-box">blue-box</div>
  <div class="green-box">green-box</div>
  <div>
    <p>여기서 부터는 본문 입니다.</p>
  </div>  
</body>
</html>

clear 안 쓰면 p도 박스 옆에 붙음!
아래로 내리려면 clear:left; 쓰면 된다.

저작자표시 비영리 변경금지 (새창열림)