Coding/HTML & CSS

[CSS] CSS 정리 2 (display, position)

미스터로즈 2021. 7. 11. 10:16

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 

자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.

원하는 위치에 원하는 박스를 배치하는 것이 가장 중요합니다.

이를 하기 위해서 display와 position에 대해서 잘 이해해야 합니다.

CSS 연습 코드

 

1. block, inline-block

- 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" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- Block-level-->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!--Inline-level-->
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </body>
</html>

 

- CSS 코드

div,
span {
  width: 80px;
  height: 80px;
  margin: 20px;
}
div {
  background: red;
  display: inline-block;
}

span {
  background: Blue;
  display: block;
}

- 여기서 display에서 inline-block의 경우 한 줄에 여러개의 박스를 배치하는 것을 의미합니다.

- block는 한줄에 한개의 박스를 배치하는 것을 의미합니다.

 

2. Position : relative absolute fixed sticky

 

- 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" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
  </head>
  <body>
    <article class="container">
      <div></div>
      <div class="box">I'm Box</div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
  </body>
</html>

 

- CSS 코드

div,
span {
  width: 50px;
  height: 50px;
  margin: 20px;
  background: red;
}

.container {
  background: yellow;
  left: 20px;
  top: 20px;
  position: relative;
}

.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: absolute;
}

 

- relative 

얼래 있어야 하는 곳에서 옮겨 간 것

- absolute

내가 담겨 있는 상자에서 움직임

- fixed

상자에서 완전히 벚어나서 움직임

- sticky

스크롤링을 하면 위치가 변하지 않고 고정되어 보임