자기소개 페이지, 배경으로 사진 넣는 두 가지 방법

자기소개 페이지를 만들며, 가장 크게 애먹었던 것이 있다. 첫번째는 첫번째 뜨는 화면에 이미지를 넣는 것이고, 두 번째는 만들어 놓은 grid안에 이미지를 넣는 것이다. 고로, 이번에 이미지 삽입 방법에 대해서 확실히 정리해두고 싶다.

'HTML img tag' VS 'CSS background-image'

이미지를 삽입하는 방법에는 이 두 가지가 있다. 언제 무엇을 사용해야하는지 많이 헷갈렸기에 두 가지 방식의 차이점에 대해서 먼저 짚어보고 넘어가자.

크게 의미적 차이와 기능적 차이로 나눌 수 있겠다. 의미적 차이라 하면, img 태그는 그 이미지가 꼭 컨텐츠에 포함되어야 하는 경우 사용하며, background-image는 단순히 스타일 요소로 쓰일 때에 사용하면 된다. 그 외에 기능적 차이는 다음과 같다.

Use an img tag :

1. 서치엔진에서 검색이 되도록 할 때 ➡️ alt attribute를 이용해서 이미지 다운로드가 실패하거나 깨질 때에도 여전히 유저에게 정보를 줄 수 있다.
2. HTML과 동시에 이미지가 보여져야 할 때 ➡️ HTML에 있는 순서대로 parsing이 되기 때문에 HTML 순서 상 다음 정보가 뜨기 전에 이미지가 뜬다.
3. 유저들이 페이지를 print 했을 시 꼭 이미지가 포함되어야 할 때 ➡️ default로 이미지가 함께 프린트 된다.

Use CSS background- image :

1. 반복되는 이미지일 때 ➡️ 블로그 아이콘, 날짜 아이콘 등 여러번 사용될 때
2. 유저들이 페이지를 print 했을 시 배경이 필요없을 때.

#결국 기능적 차이보다는 의미적 차이, 즉 이미지와 컨텐츠와의 연관성에 의해 결정하면 된다.

목표 : 내 사진을 반응형으로 첫번째 화면에 가득차게 넣기

img tag로 하는 방법

<이미지가 화면보다 클 때>
1) img를 넣을 박스의 높이를 100vh로 지정해준다.
2) 넘치는 부분은 안보이게 만들어준다.
3) 이미지의 넓이와 높이를 100%로 맞춰준다.
4) object-fit 속성을 사용하여 cover로 지정해준다. (이 속성을 적용해주지 않으면, 화면을 줄일때 사진의 비율이 깨진다.)

 <div class="test_img">
        <img class="test_img-img" src="img/main-resize1.png" />
    </div>

/* img태그로 넣기 */
.test_img{
    height: 100vh;
    overflow: hidden;
}

.test_img-img{
   width: 100%;
   height: 100%;
   object-fit: cover;

CSS background로 하는 방법

<사진이 화면보다 클 때>
1. 사진이 들어갈 박스 하나를 만들어준다.
2. 이미지를 CSS로 넣어준다.
3. 이미지 크기 자체를 100vh로 맞춰준다.
4. 반복(이 경우에는 이미지가 더 크기 때문에 반복이 일어나지 않는다)과, position을 지정해주고, backgroud-size를 cover로 지정해준다.

 <section id="minju-main-image-resize">
       
    </section>

#minju-main-image-resize{
    background-image: url(img/main-resize1.png);      
    height: 100vh; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

발견한 가장 큰 차이점
<이미지가 화면보다 작을 때>
object-fit 속성을 적용하면 반응형으로 줄지 않는다.
그러나, css 속성으로 이미지를 70vh를 줄여줘도 그대로 반응한다.