TIL 008 | CSS Position

25326 단어 webCSSfrontendCSS

"position" property를 이용하여 요소를 원하는 위치에 배치할 수 있다. 가로배치를 위해 사용하던 "float"와는 다르게 자유도가 높은 "position"에 대해서 정리해본다.

Position

1. Static

기본적으로 요소들은 static 상태를 가지고 있다. 특별한 변화 없이 제 자리에 고정되어 있는 상태이다.


(그림 출처 : 김버그의 CSS는 재밌다)

2. Relative

position : relative 를 가지고 있는 요소의 경우에 자신의 원래 위치를 기준으로 위치를 조정할 수 있다. 

.red{
  position:relative;
  top:20px;
  left:20px;
}


그림을 보면 원래의 위치에서 위로부터 20px, 왼쪽으로부터 20px 이동됐다.

3. Absolute

position : absolute 를 가지고 있는 요소들은 자신의 원래 위치와는 상관 없이 배치를 하고 싶을 때 사용한다. 하지만 주의할 점이 있다.

  1. position : absolute 를 가지고 있는 요소의 조상 요소 중에서 position 이 static이 아닌 요소를 기준으로 위치를 조정할 수 있다.
  2. display 값이 block으로 변경되지만 자동으로 남는 공간에 margin을 채우지 않는다.
  3. float 와 유사하게 부모 요소가 자식 요소의 height 값을 계산하지 못하게 된다.

이를 명심하고 사용한다면 position : absolute는 레이아웃에 있어서 매우 편리한 property이다. 

.parent{
  position: relative;
}

.child-red{
  position: absolute;
  top: 20px;
  left: 20px;
}

4. Fixed

position : fixed 를 가지고 있는 요소는 viewport를 기준으로 위치를 조정한다. 여기서 viewport는 현재 사용자가 보고 있는 화면을 말한다. 화면에 변화가 생기더라도 위치가 고정되어야 하는 modal 창이나 menu 등에 사용할 수 있다.

5. 간단한 실습예제

1)

<!-- html -->
<body>
    <div class="card">
      <div class="card-carousel">
        <img src="./assets/img-card.jpg" alt="그랜드캐년" />
        <button type="button" aria-label="이전" id="prev"></button>
        <button type="button" aria-label="다음" id="next"></button>
      </div>
      <div class="card-content">
        <h1>
          그랜드캐년+앤텔롭+홀슈밴드 자유일정
        </h1>
        <span>
          김버그트래블
        </span>

        <strong>
          <span>
            1인
          </span>
          180,000원
        </strong>
      </div>
    </div>
  </body>
/* css */
#prev {
  background-image: url(./assets/icon-backward.svg);
}

#next {
  background-image: url(./assets/icon-forward.svg);
}

.card {
  width: 400px;
}

.card-carousel {
  position: relative;
}

.card-carousel img {
  display: block;
  width: 100%;
  height: auto;
}

#prev,
#next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#prev {
  left: 0;
}

#next {
  right: 0;
}

.card-content {
  width: 400px;
  padding: 12px 16px;
  background-color: #fff;
}

.card-content h1 {
  margin-bottom: 2px;
}
/* span은 inline이라 margin-bottom 안먹는다! */
.card-content strong {
  display: block;
  margin-top: 8px;
  text-align: right;
}

next button 과 prev button 을 position : absolute을 통해서 배치했다. 이때 transform property를 통해서 디테일한 조정을 할 수 있었다.
(button 아이콘의 윗 부분을 기준으로 가운대로 조정이 됐기 때문에 이를 조정해서 아이콘의 꼭지점이 가운데가 되도록 배치했다.)

2)

<!-- html -->
<body>
    <aside class="modal">
      <h1 class="modal-title">Manage Subscriptions</h1>
      <p class="modal-desc">
        You can follow the discussion on @kimbug without to leave a comment. Cool, huh? Just enter your email address in
        the form here below and you are all set.
      </p>
      <div class="input-group">
        <input type="email" placeholder="Your email" />
        <button type="button">Subscribe</button>
      </div>
      <button type="button" class="close-button" aria-label="Close the modal"></button>
    </aside>
  </body>
/* css */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 32px 40px;
  text-align: center;
  border-radius: 4px;
}

.modal-title {
  margin-bottom: 4px;
}
.modal-desc {
  width: 590px;
  margin-bottom: 24px;
}

.input-group input {
  width: 200px;
  height: 36px;
  padding: 8px 16px;
  background-color: #f6f8fa;
  border-radius: 4px;
  border: none;
}

.input-group button {
  padding: 8px 14px;
  color: #fff;
  background-color: #2860e1;
  border-radius: 4px;
  border: none;
}

.close-button {
  position: absolute;
  top: 8px;
  right: 8px;
}

position : fixed 와 position : absolute 를 사용해 볼 수 있었다. 레이아웃을 하고 있는 요소가 modal 창이었기 때문에 viewport의 가운데에 오도록 했고, 닫기 버튼의 경우에는 modal를 기준으로 우측 상단에 올 수 있도록 했다.

기억하고 싶은 코드

.card-content strong {
  display: block;
  margin-top: 8px;
  text-align: right;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 32px 40px;
  text-align: center;
  border-radius: 4px;
}

두 가지를 뽑았다. 우선, display : block 의 경우에는 꼭 명심하고 싶어서 선정했다. 비록, Box에 대해서 공부를 하기는 했지만 실제로 코드를 작성할 때에 그 요소가 inline 요소인지 block 요소인지 고민하지 않고 width, height, margin-bottom 등을 주게 되는 경우들이 꽤 있었다. css의 경우에는 따로 오류코드도 나오지 않기 때문에 이를 놓치면 찾아내기 어려울 수 있다. 그렇기 때문에 inline 요소 등에 margin이나 height 등을 적용할 때 꼭! 꼭! display : block를 잊지 않아야 한다.

두 번째의 경우에는 transform property이다. value에 따라 크기를 조정하거나 위치를 조정할 수 있어서 세부조정을 할 때 유용하게 사용할 수 있었다. position만을 사용하면서 이상함을 느꼈던 부분을 고칠 수 있었기 때문에 큰 도움이 되었다.

C# Hello C#(인프런)
백준 - 별 찍기 - 2 [2439]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage