2022-08-10
계정을 바꿔서 다른 곳에 있던 글 옮겨왔다.
이미지를 넣는 방법엔 두 가지가 있다.
- 먼저 잘 아는, html의
img src를 사용하여 넣는 방법. Figma로 치면 따로 Frame 없이 쌩 이미지만 삽입하는 느낌.<img src="img/예제.jpg" alt="예제 샘플">같은 식으로 넣는다. - 그리고 html에서 div를 만든 후 CSS에서
background-image배경 이미지 속성으로 삽입할 수도 있는데, Frame 안에 이미지를 삽입한다는 느낌이다. 이 경우 frame이 아니라div가 되는 것이겠지.
#2의 방법으로 이미지를 삽입하고 나면, 기본적으로 이미지의 기준 위치가 좌측 상단으로 고정이 된다.(대부분 컴포넌트들이 그러하듯.) Figma의 constraints, Illustrater의 참조점이라고 보면 이해가 쉬울 듯 하다.
따라서 뷰포트의 크기가 달라졌을 때의 모양이 맘에 들지 않을 수 있다. 그 때엔 background-position과 background-size 속성으로 위치와 크기를 맞춰준다.
(여기서 혼동하지 말 것! '크기'는 div안에 들어있는 이미지의 크기를 말하는 것이지, div의 크기를 말하는 것이 아니다! div의 크기는 width와 height으로 알아서 맞추고!)
background-position:
값은100px 100px처럼 숫자가 들어갈 수도 있고,center가 들어갈 수도 있다. 숫자가 들어간 경우엔 이미지의 왼쪽 위 모서리(참조점)이 시작되는 부분을 지정해주는 것.center는 이미지가 항상div의 중앙에 위치하게끔 하는 것이다.
background-size:
이 값 또한50%,px같은 정량적 값 또는cover(가운데 고정, 프레임 꽉 채움),contain(높이 또는 너비 중 맞는 것 채움, 남은 여백은 반복)같은 속성을 넣어줄 수 있다.
center에cover조합을 가장 많이 쓰지 않을까?
이미지 size를 contain으로 하고 no-repeat으로 하면 뒤에 여백이 남으니, 배경에 한번 색을 더 입혀보자. 그렇게 하면 이러한 코드가 만들어진다.
흠... 매우 길다! 그런데 이걸 한 줄로 줄일 수 있다고 한다!!
**가장 배경색, 이미지, 반복안함, 가운데 정렬, 꽉채우기 모두 적용된 한 줄의 background 속성!**
세상에... 아주 좋구만요. 각 값들이 위 명령어들에 대한 값이란 것만 알고 있으면 되겠다ㅎ
그럼 이 두 가지 방법을 어떻게 나누어서 쓰면 좋을까?
- HTML의
img는 카드 UI 컴포넌트를 만들 때 같은, 그러니까 같은 class를 갖고 있지만 각각 다른 img를 적용해야 할 때! 이 때는img자체에 또 css속성을 입혀야 할 수도 있다. - CSS의
background는 말 그대로 배경으로 깔 때. 특별히 속성을 입힐 필요가 없을 때에 쓰면 좋을 듯 하다.
물론 두 가지 방법이 완전히 내 것이 된 게 아니므로, 여러번 연습을 통해 손에 익혀보는 것이 가장 중요할 것 같다.
