whatisthis?

CSS - Position prac.02 본문

PRACTICE/SELF

CSS - Position prac.02

thisisyjin 2022. 2. 11. 17:10

CSS - Position prac.02

CSS의 포지션 속성으로 아래와 같은

product card를 만드는 예제이다.

 

RESULT

 

index.html

<!DOCTYPE html>
<html lang="ko">
<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 href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,500,700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <title>product card</title>
</head>
<body>
    <div class="product-card">
        <div class="product-img">
            <img src="./assets/img-card.jpg" alt="grandCanyan"/>
            <button type="button" aria-label="이전" id="prev"></button>
            <button type="button" aria-label="다음" id="next"></button>
        </div>
        <div class="product-info">
            <h1>그랜드캐년+앤텔롭+홀슈밴드 자유일정</h1>
            <span>김버그트래블</span>
            <div class="product-cost">
                <strong> 
                    <span>1인</span>
                    180,000원
                </strong>
            </div>
        </div>
    </div>
</body>
</html>

 

 

-  처음에는 svg파일을 img태그>a태그로 하려고 했는데

그냥 어떤 기능을 할지 몰라 button으로 마크업한 후에

css로 백그라운드이미지를 입히기로 하였다.

 

 

style.css

* {
    box-sizing: border-box;
    margin: 0;
  }
  
body {
    font-family: "Noto Sans KR", sans-serif;
    letter-spacing: -0.02em;
    background-color: #7d858f;
}
  
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);
    position: absolute;
    top: 108.45px;
    left: 7.19px;
}
  
#next {
    background-image: url(./assets/icon-forward.svg);
    position: absolute;
    top: 108.45px;
    right: 7.19px;
}


.product-card{
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #fff;
}

.product-img {
    position: relative;
}


.product-img img {
      display: block;
      width: 400px;
      height: 240px;
}


.product-info {
    position: relative;
    padding: 12px 16px;
    height: 114px;
}

.product-cost {
    position: absolute;
    bottom: 12px;
    right: 16px;
}

내가 해본 결과

강의내용 🔻

 

 

1. 이미지 태그 크기 조절

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

width를 100%로 하면 부모요소의 크기에 알아서 맞추고,

*이 예제에서는 .product-card에 맞춰서 조절됨.

 

height는 원래 이미지 비율에 맞춰 조절하도록 함.

>> 이미지 사이즈 조절할때 100% / auto 많이 사용함!

 

- 기억해둘 것!

 

 

2 / position: absolute 의 값 설정시

#prev {
    background-image: url(./assets/icon-backward.svg);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
  
#next {
    background-image: url(./assets/icon-forward.svg);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

우리는 매번 pixel단위를 사용하기보다는

만약 수직상으로 가운데에 위치시킬땐,

top: 50%를 하면

버튼의 시작점이 50%인 지점이라

버튼의 위치가 실제로는 가운데보단 아래로 치우져있다. (자신의 height의 절반만큼)

따라서 transform: translateY( );로

Y값을 이동시킬 수 있다.

 

여기서, 

transform: translateY(-50%);

-50%는 자신의 Y값을 기준으로 한 퍼센트지이다.

 

 

지난 포스팅 참고 🔻

(여기서는 position: relative 상태에서 top:50%을 하고, transform: translate(-50%)를 해줌.)

더보기

💡 transform 속성

- 우선, position: relative 후에 top: 50%로 위에서 50%정도 아래로 내린다.

>> 여기까지 하면 해당 태그의 높이의 절반만큼 아래로 내려가있음. 

 

여기에 transform: translateY(-50%)를 해서

다시 child태그 본인의 높이의 절반만큼 다시 올려줌.

>> 위로 올리기 위해서 음수의 값 사용 (-50%)

 

#parent {
  background: yellow;
  height: 200px;
  width: 100%;
}

.child {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background: skyblue;
}

 

= 자기의 height의 50%만큼 내려온 상태를 다시 올리는 것.

 

 

 

최종 css 파일

* {
    box-sizing: border-box;
    margin: 0;
  }
  
body {
    font-family: "Noto Sans KR", sans-serif;
    letter-spacing: -0.02em;
    background-color: #7d858f;
}
  
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);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
  
#next {
    background-image: url(./assets/icon-forward.svg);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}


.product-card{
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #fff;
}

.product-img {
    position: relative;
}


.product-img img {
      display: block;
      width: 400px;
      height: 240px;
}


.product-info {
    padding: 12px 16px;
}


.product-info h1 {
    margin-bottom: 2px;
}

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

 

 

- 마지막에 product-cost 부분을 우측 정렬하려고

굳이 position-absolute를 이용했는데,

그냥 display: block으로 위 span과 띄어지게 하고,

text-align : right를 해준다.

 

(strong에 display: block을 해주면 옆에 애도 딸려옴)

 

 

- 그리고, 이미지상 하단 정보부분(product-info)을따로 height를 주지말고그냥  안에 요소들간에 margin을 주고, 마지막에 패딩을 줘서알아서 height는 조절되게 하자.

 

(height를 설정하면 나중에 정보가 추가되면 다시조절해야함)

 

 

 

 

 

 

ref lecture.

 

 

'PRACTICE > SELF' 카테고리의 다른 글

React) React JS - practice. 단위변환기 (Unit Conversion)  (0) 2022.02.15
CSS - Position prac.03  (0) 2022.02.12
CSS - Position prac.01  (0) 2022.02.11
html. <map>과 <area> 예제  (0) 2022.02.04
Painting App - (app.js) 해결중  (0) 2022.02.03
'PRACTICE/SELF' Related Articles more