Position-02 연습

초기 코드

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Position 2</title>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,500,700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <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>
</html>

styles.css

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 22px;
  font-weight: 500;
  color: #1f2d3d;
  line-height: 1.4545454545;
}

span {
  font-size: 14px;
  font-weight: 400;
  color: #7d858f;
  line-height: 1.5;
}

strong {
  font-size: 22px;
  color: #2860e1;
  line-height: 1.0909090909;
}

strong span {
  font-size: 16px;
  font-weight: 400;
  color: #525d69;
  line-height: 1.5;
}

button {
  display: block;
  width: 28px;
  height: 28px;
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
}

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

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

/* ▼ WHERE YOUR CODE BEGINS */

body에 background-color: black;을 주면 화살표가 숨겨져 있다.

css 코드 추가하기

card 사이즈 수정 (★★)

.card {
  width: 400px;
}

이미지 자체 사이즈 때문에 부모 크기를 무시하고 이미지가 삐져나가고 있다.

.card {
  width: 400px;
}

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

<이미지 size를 조정할 때 굉장히 많이 사용하므로 기억해두자!>

width: 100%는 부모의 width에 맞춰지고,
height: auto는 자기가 갖고 있는 비율에 맞추어 알아서 조정한다.

img의 경우, display: inline인데
원래 inline은 width와 height 값을 줄 수 없지만, img의 경우 특수한 경우로 조정할 수 있다.

하지만 약간의 오차가 생길 확률이 있으므로, 깔끔하게, display: blockl;으로 속성을 주도록 하자!

.card {
  width: 400px;
}

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

card-carousel 화살표

.card-carousel {
  background-color: black;
}

배경화면에 black을 주면, 다음과 같다.

지금 card-carousel이 button의 영역까지 height가 포함되어 있는 것을 볼 수 있다.

하지만 우리가 원하는 것은, 얘들이 영역을 차지하는 것이 아니라, 붕 띄워서 자기 자리를 차지하는 것이다.

이 때 사용하는 것이 position !!

그 중에서도, absolute를 사용!

card-carousel을 기준으로 위치를 잡을 수 있도록, position: relative 속성을 주도록 하자.

.card-carousel {
  position: relative;
  background-color: black;
}

#prev,
#next {
  position: absolute;
}

이제 기준점을 잡았으므로 상대적인 위치를 정해주도록 하자.

#prev,
#next {
  position: absolute;
  top: 50%;
}

#prev {
  left: 0;
}

#next {
  right: 0;
}

이 때, top: 50%;의 의미는 #prev, #next가 기준으로 삼는 것의 높이에서 50% 지점에 위치한다는 것이다.

어 근데 뭔가가 이상하다.

딱 50% 지점에서 시작해서 살짝 낮아 보인다....

transform 사용하기

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

translateY(-50%);의 의미는 자기 자신의 height 값의 50% 만큼 위로 올라가라는 뜻이다.

translate(X, Y);로도 사용할 수 있다.

transform의 경우 여러가지 함수들이 있으므로, 나중에 한 번 찾아보도록 하자!

이제 가운데로 옮겨왔다.

그 외 기타 조정해주기

.card-content h1 {
  margin-bottom: 2px;
}

card-content 부분의 코드를 보면,

<div class="card-content">
  <h1> 그랜드캐년+앤텔롭+홀슈밴드 자유일정 </h1>
  <span> 프렌치트래블 </span>

  <strong>
    <span> 1인 </span>
    180,000원
  </strong>
</div>

'프렌치 트래블'과 나머지들이 span / strong으로 되어 있는데 얘네들은 display: inline이 된다. 그래서 strong을 display: block을 주면 나머지 애들이 아래로 떨어지게 된다.

.card-content strong {
  display: block;
}

가급적 margin-top과 margin-bottom 둘 중 하나만을 통일성있게 사용하는 것이 좋으나, strong 태그에만 display: block; 속성을 주었으므로, 이번에는 예외적으로 margin-top 속성을 주도록 하자.

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

그리고 아직 배우진 않았지만, text-align 속성을 사용하면, 글자나 inline 요소들을 한 쪽으로 밀 수 있다!

.card-content {
  padding: 12px 16px;
}

Author And Source

이 문제에 관하여(CSS - (3) Position - 1 : Position-02 연습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@frenchkebab/CSS-3-Position-1-Position-02-연습

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

CSS - (3) Position - 1 : Position-02 연습