[2021.12.30]카드 형식 UI 제작. (카드에 사진 넣기 해상도 문제)

toss 팀 페이지

 

위의 toss 웹 페이지의 카드 UI 방식을 구현하고자 합니다.

 

일단 저희의 경우도 부서별 이름과

슬로건 혹은 목표를 적고

(+) 아이콘을 누르면 내용이 나오면서 파란색 글자로 링크 추가!!!!

똑같이 만들고자 합니다!

 

그래서 디자인의 경우는

제작한 Web 디자인

아직은 초라하지만...

글씨도 넣어야 하고 이미지도 크기에 맞춰야 하고

그라데네이션도 넣어서 위에 글이 들어갈 배경색도 맞춰줘야 합니다...

 

사실 이렇게 되면 디자인에 시간이... 뺏겨서 구현이 늦어지는 단점...

 

오늘 제가 카드 UI를 구현하는 게 목표입니다!!!

 

바로 코드로 보겠습니다.

 

 

참고 영상은 아래 영상입니다.

너무 친절하니 꼭 보시기 바랍니다.

 

https://www.youtube.com/watch?v=i72xG6ukehk&list=TLPQMjkxMjIwMjFESejqWLJsWw&index=1 

---

<div class="card-box">
        <img src="설계팀.jpg" alt="설계팀 아바쿠스 작업">               <!--이미지 첨부 src="상대주소" alt="설명(?)" -->
        <div class="test">
            <p style="font-size:13px;" >I.K 설계팀</p>   
            <p style="font-size:33px;" >우리는 기체 개발을 하고 있습니다.</p>
        </div>
    </div>

여기서 처음 보는 문법은

 

                                                               <img src="" alt="">  

 입니다.

 

주석에도 나와 있듯이

 

이미지를 넣어주는 구문이고 src에는 상대 주소를 alt에는 설명을 넣으면 됩니다.

 

 

여기서 중요한 게 나옵니다.

 

이게 중요한 개념입니다.

 

THML CSS 차이

어디에도 찾기 힘들었던 내용입니다...

 

.css는 class를 css 파일에서 저장하기 위한 것입니다.

 

그러니 class 이름을 css파일 안에서는 class명 앞에 '.'을 붙입니다.

 

뇌피셜로는 div, a, p, span, h1, h2... 이런 이미 정해진 태그는. 을 안 붙이는 걸로 알고 있습니다.

---

먼저 사진을 보셔도 아시겠지만

class="card-box"

 

.card-box에서 

왼쪽은 class="card-box"에서

.card-box w h값이 body가 되었고

 

오른쪽은 img src=" "에 들어간 사진 원본 크기가 잡혔습니다.

.card-box w h값 보다 커도 그냥 넘어가네요

 

 

---

<해결법>

 

해결법은 .card-box의 크기에 맞추기 위해서

<img src="이미지 경로" alt="대체텍스트" width="너비" height="높이">

사진이 만약 자신이 정했던 카드 크기보다 크다면 이미지에 너비와 높이를 정해줘야 합니다.

그러면 해결되는데 문제는 해상도 문제가 있어서 이미지가

대칭이 맞지 않습니다...

 

그래서 근본적인 해결법은 모르지만

자신이 사용하고자 하는 이미지 자체의 해상도를 맞춰서 와야 할 것 같습니다.

이렇게 박스 안에서 사진을 자유자재로 바꿀수는 있지만 이를 퍼블리싱 할 때에는 해상도를

어떻게 해야할지 아직 모르겠다...

 

background-size: cover; 로 하면 비율 맞춰서 넣어주는 것 같습니다.

 

url 부분에서 애먹었네요...

 

근데 아직도 사진이 풀로 안들어가고 부분만 들어간걸 어떻게 해야할지

해답!!!

배경 이미지 크기 조정하기 - CSS: Cascading Style Sheets | MDN

background-size를 맞췄습니다.

그림 자체를 div 카드에 맞춘 느낌 입니다.

 

위는 contain

 

아래는 cover 입니다.

 

 

차이점은...

정확히는 아직 이해하지 못했습니다.

토스는 cover을 쓰던데 사진 자체가 1:1로 되더라고요...

해상도 비율을 맞춰서 찍은 사진인건지 뭔지...

 

48%(정상) 28%(비정상)

SkyDrive의 경우는 애초에 왼쪽 오른쪽 사진을 합쳐서 하나의 레이아웃으로 구성하고 사진에 맞추어 w를 설정했습니다

 

이는 사진에 맞추어 퍼블리싱을 했다고 볼 수 있습니다.

 

왼쪽의 사진을 토스 카드 UI에 넣어보니

---

결론

유인드론 원본 사진 크기는 600x600 px 

 

SkyDrive 웹 페이지 카드 크기는 556.8 x580 px

 

toss 카드 UI 크기는 458x523 px

 

해상도를 맞추려면 background-size 에서 맞춰야 하고

그게 아니면 cover로 하는게 좋다

 

만약 사진 원본 해상도와 카드 크기가 맞지 않는다면 사진이 짤려서 나온다

 

그러니 디자인에서 사진 크기를 신경써서 제작해야 한다!