【CSS】 이미지 넣는 2가지 방법

이미지 넣는 2가지 방법

[CSS 목차]

이미지를 넣는 방법은 크게 img 태그로 넣는 방법과 CSS의 background 속성을 넣는 방법으로 나뉩니다. 이 두가지 방법은 모두 이미지를 출력한다는 점에 동일한 기능을 수행하지만, 이 둘에는 약간의 차이점이 존재하기 때문에, 사용 시 주의할 점이 존재합니다. 이번 포스트에서는 [1] 각각의 사용법을 먼저 알아보고, [2] img 태그 사용 시 주의할 점과 [3] CSS background 속성을 사용할 때 주의할 점에 대해서 알아보겠습니다.

[1] 이미지를 넣는 2가지 방법
　　[1.1] img 태그 사용 방법
　　[1.2] CSS로 이미지 올리는 방법
[2] img 태그 작성 시 주의할 점
　　[2.1] alt 속성을 사용
　　[2.2] width와 height 속성을 사용
[3] CSS background 속성을 사용할 때 주의할 점

[1] 이미지를 넣는 2가지 방법

서론에서 말한 것처럼 이미지를 넣는 방법에는 태그를 이용하는 방법과 CSS를 이용하는 2가지 방법이 있습니다. 여기서는 군더더기를 빼고 핵심적인 부분을 어떻게 작성하는지를 먼저 보겠습니다.

[1.1] img 태그 사용방법

• 예제 목표
  • img 태그의 사용방법을 간단히 알아봅니다.
• 코드 분석
  • ■ <img src=”…” alt=”여행” width=”355″ height=”200″> 이미지를 넣기 위해 img 태그를 생성합니다. src 속성은 이미지의 주소를 나타냅니다. alt 속성에는 어떠한 여러가지 이유로 이미지가 로딩이 되지 않을 때 대신 출력할 글자를 적습니다. 인터넷 상태의 문제로 이미지가 로딩되지 않았을 때, 해당 이미지 영역에 글자가 출력되는 것을 보고, 방문자는 이미지가 존재한다는 것을 알 수 있습니다. 또한 구글과 같은 검색 엔진이 이미지를 분석할 때 alt 속성값을 기반으로 이미지를 이해하기 때문에, SEO 관점에서 alt 속성을 반드시 작성해주는 것이 좋습니다. 여기서는 여행에 관한 사진이라서 alt = “여행”이라고 넣겠습니다. width와 height 속성은 이미지의 너비와 높이를 설정할 때 사용하는데, 참고로 단위를 따로 적어주지 않을 땐 px이 됩니다. 따라서 이미지의 크기가 355 x 200px로 설정됩니다. 참고로 img 태그를 사용할 때는 width와 height 속성을 넣어주는 것이 좋은데, 그 이유는 섹션 2에서 예제와 함께 설명하겠습니다.

[1.2] CSS로 이미지 올리는 방법

• 예제 목표
  • CSS background 속성을 이용하여 이미지를 표시하는 방법에 대해서 알아봅니다.
• 코드 분석
  • HTML 파트
    • 먼저 코드 아래에 있는 HTML 파트부터 보겠습니다.
    • ■ <div class=”image”></div> 이미지를 넣을 div 요소를 만들어 줍니다. 이 div 요소는 그림을 넣을 도화지 같은 역할을 합니다. 무슨 말인가 하면, div.image의 크기가 이미지의 크기와 항상 같은건 아니라는 것입니다. CSS의 설정에 따라서 div.image의 정해진 크기 안에 이미지를 크게 넣을 수도, 작게 넣을 수도, 또는 패턴처럼 반복해서 넣을 수도 있습니다. 또한 이미지의 위치도 지정할 수 있습니다.
  • CSS 파트
    • .image의 CSS
      • ■ width: 355px; height: 200px; div.image의 크기를 이미지의 크기와 같이 355px x 200px로 설정해줍니다. div.image 요소의 크기를 설정하는 이유는 <div class=”image”></div> 안에 아무런 내용물이 들어가 있지 않기 때문입니다. 내용물이 비어 있는 요소는 높이가 0으로 설정되어지기 때문에, 배경 이미지를 지정하더라도 보이지 않게 됩니다.
      • ■ background: url(주소) no-repeat; div.image 요소의 배경을 이미지로 설정합니다. 이미지 주소는 url(주소) 형태로 적어주시면 됩니다. 주소는 큰 따옴표로 묶어도 되고, 묶지 않아도 됩니다. 뒤에 no-repeat은 배경 이미지를 반복해서 출력하지 않겠다는 의미입니다. 예를 들어 no-repeat을 적지 않는 경우(아래 출력 결과)를 보면, div.image의 크기가 이미지의 크기보다 클 경우에 빈 공간이 남게 되는데, 이 공간을 배경 이미지가 반복해서 메우게 됩니다.

• • • • 참고로, background는 여러 속성을 한번에 넣을 수 있는 단축 형태의 속성입니다. 만약 속성별로 나눠서 적고 싶으면 background-image: url(주소);와 background-repeat: no-repeat;의 형태로 나눠서 적을 수도 있습니다. backgroun-repeat의 속성값으로는 repeat, repeat-x, repeat-y, no-repeat, space, round, initial, inherit을 사용할 수 있습니다.
      • ■ background-size: 355px 200px; 배경 이미지의 크기를 설정합니다. 이미지의 너비와 높이를 각각 355px와 200px로 설정합니다.

[2] img 태그 작성 시 주의할 점

앞 섹션에서 img 태그 기본 사용법에 대해서 알아보았습니다. 이번 섹션에서는 img 태그를 사용할 때 주의할 점들에 대해서 설명하고자 합니다.

[2.1] img 태그 사용 할 땐 무조건 alt 속성을 사용합니다.

• 제목처럼 img 태그 사용 시에는 무조건 alt 속성을 넣도록 합니다. alt 속성을 넣지 않는다고 해서 기능적으로 문제가 생기는 것은 아니지만, alt 속성을 사용하면 이미지 로딩에 실패했을 때 해당 글자가 대신 출력될 수 있다는 장점이 있습니다. 그리고 검색 엔진이 웹사이트를 분석할 때 이미지를 alt 속성값으로 이미지를 이해하기 때문에, SEO 관점에서도 이득이 있습니다.
• 　여기서 이미지 로딩이 실패한 경우 어떻게 출력되는지를 확인하기 위해, img 태그의 src 속성에 없는 주소를 넣어보겠습니다. 출력 결과를 보면, 이미지가 없기 때문에 alt 속성값인 “여행”이라는 글자가 출력됩니다.

[2.2] img 태그 사용 할 땐 width와 height 속성을 넣어줍니다.

img 태그를 사용할 때 width와 height 속성을 같이 지정해주는 것이 방문자의 웹사이트 경험이 좋은 효과를 가져다 줍니다. 왜 그런지를 이해하기 위해 브라우저가 어떻게 웹사이트를 표시하는지 생각해봅시다. 브라우저는 다음과 같은 2가지 단계로 img 태그를 불러옵니다.

(1) HTML 태그들을 읽어와서 배치합니다.
(2) img 태그의 src 속성에 지정된 주소로부터 이미지를 실제로 불러와서 img 태그에 넣습니다.

자, 그럼 2가지 경우를 생각해봅시다. 먼저 width와 height 속성이 지정된 경우에는 HTML 태그들을 읽어봐서 배치할 때, 크기 속성이 있으므로 이미지가 들어갈 공간을 미리 확보합니다. 그리고 2번째 단계에서 실제로 이미지를 불러오게 되고, 공간이 확보된 img 태그에 들어가게 됩니다. 이와 대조적으로 width와 height 속성이 지정되지 않은 경우에는 HTML 태그들을 읽어와서 배치할 때, img 태그의 공간을 확보하지 않습니다. 2번째 단계에서 이미지가 로딩되게 되어 img 태그로 실제로 들어갈 때, 비로서 img 태그 크기를 변경시킵니다. 이미지 로딩에 시간이 걸리는 경우를 생각해 봅시다. 방문자들은 이미 웹사이트를 읽기 시작할 것이고, 읽고 있는 도중에 이미지가 실제로 로딩되서 img 태그를 포함한 여러 HTML 요소들의 크기를 변경시켜 버립니다. 즉, 방문자들이 읽던 글의 위치를 바꿔 버리게 되서 짜증을 유발 시키게 되는 것입니다. 무슨 말인지 글로 보면 이해가 쉽게 가지 않을 수 있으니, 아래에 예제를 통해서 두 가지 경우가 어떤식으로 작동하는지 확인해 봅시다.

• img 태그에 width와 height 속성을 넣지 않은 경우
  • 아래 결과창에서 버튼을 클릭하면 브라우저가 어떻게 동작하는지를 확인할 수 있습니다. 앞에서 설명드린 것처럼 브라우저는 2 단계에 걸쳐서 웹사이트를 불러옵니다. (1번째 단계) 먼저 HTML 태그들을 불러와서 배치시킵니다. img 태그에는 크기 속성이 들어가 있지 않기 때문에, 크기가 0으로 배치됩니다. (2번째 단계) 뒤늦게 이미지가 로딩되면, 이미지가 img 태그에 들어갈 때 HTML 요소들의 크기를 재조정하게 되고, 글자들의 위치가 바뀌게 됩니다. 이렇게 되면, 이미지의 로딩이 지연 될 때, 이미 글을 읽고 있던 방문자들의 가독성을 떨어뜨릴 뿐만 아니라, HTML 요소들의 크기를 다시 계산해야하기 때문에 성능면에서도 떨어지게 됩니다.

• width와 height 속성을 넣은 경우
  • img 태그에 width와 height 속성을 이용하여 이미지 크기를 미리 잡아 둔다면, 앞선 문제들을 해결할 수 있습니다. 브라우저가 1번 단계에서 HTML을 불러와서 배치할 때, img 태그는 크기가 설정되어져 있기 때문에 공간을 미리 확보해 둡니다. 그리고 2번 단계에서 실제로 이미지가 로딩되어 img 태그에 들어가게 되더라도, 공간이 미리 확보되어져 있기 때문에 HTML 요소들의 크기를 변경시키지 않습니다. 이러한 이유로 img 태그를 이용할 땐, CSS로 크기를 설정하기 보단, img 태그의 width와 height 속성을 이용해서 넣는 것이 좋습니다.

[3] CSS background 속성을 사용할 때 주의할 점

img 태그의 경우에는 alt 속성이 있어서, 이미지 로딩에 실패 했을 때, 대신 글자들을 출력할 수 있다고 하였습니다. 하지만 CSS background로 이미지를 넣는 경우에는 이러한 대체 글자들을 설정할 수 없는 단점이 있습니다. 이를 보완하기 위해서 여러가지 이미지 대체 기법(Image Replacement Technique)들이 제안되었습니다. 여기에서는 그 중 한 가지 방법을 소개하고자 합니다.

• 예제 목표
  • CSS background 속성으로 이미지를 넣을 경우에, alt 속성을 어떻게 구현할 수 있는지 알아봅니다. 기본 아이디어는 글자 위에 이미지를 출력시키는 것입니다. 정상적으로 작동할 경우, 글자는 이미지에 가려서 보이지 않고 이미지만 출력된 것처럼 보입니다. 반대로, 만약 어떠한 이유로 이미지의 로딩이 실패되면, 이미지가 출력되지 않으므로 글자가 보이게 됨으로써, alt 속성을 지정한 것과 같은 효과를 가져올 수 있습니다.
• 코드 분석
  • HTML 파트
    • 먼저 코드 아래 부분에 위치한 HTML 파트부터 확인해 보겠습니다.
    • ■ <div class=”image”>유럽 여행 사진<div> CSS background 속성으로 이미지를 넣을 div 요소를 생성합니다. 그리고 그 안에 “유럽 여행 사진”이라는 글자를 넣는데, 이 글자가 alt 속성에 해당합니다. 이미지를 글자 위로 출력할 예정인데, 이미지가 출력되면 아래에 있는 글자는 보이지 않고 이미지만 보이게 됩니다. 만약 이미지 로딩이 실패하게 되면, 이미지는 출력되지 않기 때문에 그 아래에 있는 “유럽 여행 사진”이라는 글자가 보이게 됩니다.
    • ■ <p> 작년 이 맘쯤….</p> 이미지 다음에 따라오는 요소들이 어떻게 배치되는지를 확인하기 위해 p 태그를 넣었습니다. 이번 기능 구현에는 필수적인 부분은 아닙니다.
  • CSS 파트
    • .image의 CSS
      • ■ position: relative; 자식 요소를 position: absolute로 지정하여 위치를 지정할 예정인데, 이 경우에 부모 요소를 기준으로 삼기 위해서는 부모 요소의 position을 relative로 지정해줘야 합니다. 이 부분을 공식처럼 기억해두면 좋습니다. absolute 포지션을 사용할 때는 부모 요소를 relative 또는 absolute로 지정해줍니다.
      • ■ width: 284px; height: 160px; div.image의 크기를 284x160px로 지정합니다. div.image의 크기를 지정하지 않으면, 다음에 따라오는 요소(여기서는 p태그)가 이미지 밑으로 덮히게 됩니다. 따라서 이미지 크기와 동일한 크기로 설정해 줍니다.
      • ■ box-shadow: 0 0 0 1px black inset; 만약 이미지가 로딩 실패해서 이미지가 출력 되지 않을 때, 이미지가 출력될 부분을 시각화 시키기 위해서 div.image의 테두리선을 만들어 주겠습니다. 여기서 border 속성을 이용하지 않고, box-shadow를 이용한 이유는 inset으로 테두리선을 넣기 위해서입니다. 만약 border로 테두리를 넣게 되면, 이미지가 정상적으로 출력될 때에도 이미지의 외부에 테두리선이 보여지게 됩니다. 따라서 외부 테두리보다 안쪽에 선을 집어 넣어야 하는데, 이를 box-shadow로 구현할 수 있습니다. 속성값은 차례대로 x축 방향으로 이동(0px), y축 방향으로 이동(0px), 흐릿함 정도(0px), 두께(1px), 색깔(black)에 해당합니다. 그리고 박스 안쪽으로 설정하고자 하기 때문에 inset 키워드를 뒤에 넣어주면 됩니다.
    • .image:before의 CSS
      • 가상 요소(Pseudo-Element) 선택자를 이용하여, 요소를 생성하고 CSS background 속성을 이용하여 이미지를 넣어 보겠습니다. 여기서 :before라고 적힌 부분이 가상 요소에 해당합니다. before 외에도 after로 가상 요소를 넣을 수 있습니다. 가상 요소를 이용하면, 별도의 태그 없이 요소를 추가할 수 있어서, 태그 트리 구조를 복잡하게 만들지 않고도 추가적인 요소를 넣어 디자인을 할 수 있습니다. 따라서 디자인만을 위한 목적일 때는 가상 요소를 활용합니다.
      • ■ content: “”; 가상 요소안에 들어갈 내용에 해당하는데, 여기서는 이미지만을 넣을 것이므로 비어있는 큰따옴표 2개를 적어줍니다. 가상 요소를 만들 때, 안에 넣을 내용이 없을 지라도 content는 생략할 수 없기 때문에, content: “” 형태로 자주 적어주게 됩니다. 이 패턴에 익숙해지시기 바랍니다.
      • ■ position: absolute; 가상 요소의 위치를 absolute 지정합니다. 이렇게 지정하게 되면, 부모 요소인 div.image 보다 위에 위치시킬 수 있습니다. 여기서 한 가지 집고 넘어갈 내용은, 가상 요소가 div.image의 before로 지정되어 있어서, div.image 요소보다 앞에 위치할 것 같지만, div.imgae의 자식 요소로 들어간다는 것입니다. (참고로, :after 가상 요소도 자식 요소로 들어갑니다.) div.image:before에 이미지를 넣게 되면, div.image에 들어 있는 “유럽 여행 사진”이라는 글자 위에 이미지가 출력 될 것입니다. 위에서 설명 드렸지만, :before 가상 요소에 absolute로 지정하기 때문에, 좌표의 기준이 되는 부모 요소 div.image의 position을 relative로 설정합니다.
      • ■ width: 284px; height: 160px; div.image:before 가상 요소의 크기를 이미지의 크기와 동일한 284x160px로 지정해줍니다.
      • ■ background: url(https://oursmalljoy.com/wp-content/uploads/2021/10/woman-in-mountain.jpg) no-repeat; backgorund 속성을 이용하여 이미지를 넣어주겠습니다. 앞에서 설명한 것처럼 url 속성에는 이미지 주소를 넣어주면 되고, 이미지를 반복해서 출력하지 않을 것이므로 no-repeat을 넣어 줍니다.
      • ■ background-size: 284px 160px; 배경 이미지의 크기를 284x160px로 지정해줍니다. 이미지 파일의 실제 크기가 넣어주고자 하는 이미지 크기와 다를 경우가 많기 때문에, 출력 이미지 크기를 따로 지정해줘야 합니다. 여기서는 이미지 크기를 284x160px로 지정했습니다.
• 출력 결과
  • 출력 결과를 보면, 예상한 것과 마찬가지로 이미지가 출력되고, 이미지 아래에 “유럽 여행 사진”이라는 글자가 있을 것인데, 이미지에 덮혀서 보이지 않습니다. 아주 좋습니다!
  • 　이번에는 만약 어떠한 이유로 이미지 로딩에 문제가 생겨 이미지가 출력되지 않는 경우를 생각해 봅시다. 그런 경우에는 아래와 같이 출력됩니다. 먼저 이미지 출력 부분이 검은 테두리선으로 표시되므로 뭔가가 출력되어야 한다는 것을 이해할 수 있고, 이미지 대신 “유럽 여행 사진”이라는 글자가 나오기 때문에, 방문자들은 이 부분에 “유럽 여행”이라는 이미지가 들어간다는 것을 이해할 수 있습니다. 또한 검색 엔진이 웹 사이트를 분석할 때도, 해당 부분을 여행이라는 키워드로 분석할 수 있어서 SEO 관점에서도 이득이 있습니다.

• • 이렇게 CSS background로 이미지를 넣을 때도 alt 속성와 유사하게 대체 글자들을 넣을 수 있습니다. 단순히 웹사이트를 출력하고자만 한다면 background로 이미지만 넣으면 되겠지만, 조금 더 완벽한 웹사이트를 구축하고자 한다면, 웹사이트가 제대로 작동하지 않을 경우도 대비해야 합니다. 또한 방문자 수를 올리고자 한다면 SEO도 신경을 써야겠지요.