HTML과 CSS를 사용하여 웹 디자인에 이미지를 배치하는 방법을 살펴보세요.
웹 디자인 요소가 담긴 청록색, 산호색, 황갈색, 회색의 추상 아트

CSS와 HTML을 사용하여 이미지를 손쉽게 추가하는 방법을 살펴보았으므로 이번에는 자신의 프로젝트에서 직접 해보시기 바랍니다. 웹 디자인에서 이미지를 사용하여 작업하는 경우 이미지에 대한 저작권을 보유하고 있거나 소유자의 허가를 받아야 합니다. 또한 신뢰를 위해 소유자의 지침을 따라야 합니다.

전: 웹 페이지의 텍스트, 후: 웹 페이지에 추가된 이미지

이미지는 웹 페이지의 모양과 느낌을 더욱 살려주고 방문자에게 연관 관계를 추가적으로 제공할 수 있습니다. CSS 또는 HTML을 사용하여 페이지에 이미지를 배치할 수 있습니다.

콘텐츠 섹션에 하나의 배너 이미지와 두 개의 이미지를 추가해 봅니다.

시작하기 전에

프로젝트 파일을 다운로드하고 저장합니다. Dreamweaver에서 html-images.html을 열고 분할 뷰에서 style.css를 표시합니다.

참고: Dreamweaver에서 전체 웹 페이지를 볼 수 없는 경우 웹 페이지가 모두 표시될 때까지 코드 뷰와 라이브 뷰 창 사이에 있는 구분선을 드래그합니다.

Dreamweaver의 분할 뷰에 열린 CSS(Cascading Style Sheet)

CSS를 사용하여 머리글 이미지 추가

CSS를 사용하여 배경 이미지, 머리글 이미지 등의 스타일과 장식에 사용할 이미지를 설정합니다.

/* -- Step 1: Start Here -- */ 섹션을 찾아 background-image 속성을 #headerimg CSS 선택기에 추가합니다.

이미지 폴더에서 europa_header.jpg를 찾아 열기를 클릭합니다. 높이가 이미지 컨테이너에 맞게 설정될 때까지 이미지가 표시되지 않습니다. height: 속성을 추가하고 값을 500px로 설정합니다.

CSS에 추가된 배경과 머리글 이미지

CSS

#headerImg {
  ...
  background-image:url(images/europa_header.jpg);
  height:500px;
}

CSS에서 배경 이미지로 추가된 목성의 위성 중 하나인 유로파

HTML을 사용하여 이미지 추가

이미지가 콘텐츠의 일부이거나 액세스 가능성(장애가 있는 사용자 지원)을 위해 사용되는 경우 HTML에서 <img> 태그를 사용하여 이미지를 배치합니다.

소스 코드(Source Code)를 클릭하고 42행 부근에 있는 <!--- Add second image here ---> 섹션으로 스크롤합니다.

<img src=" 태그를 입력하고 이미지 폴더에서 jupiter_body.jpg 파일을 찾은 다음 열기를 클릭합니다.

보시는 바와 같이 이미지가 컨테이너에 비해 너무 크고 제대로 표시되지 않습니다. 이에 맞게 이미지 크기를 변경합니다.

참고: <img> 태그는 /> 앞에 추가하면 자동으로 닫힙니다.

액세스 가능성을 위해 <img> 태그로 페이지 콘텐츠에 이미지 추가

HTML

<img src="images/jupiter_body.jpg" />

웹 페이지 본문 사진을 위한 HTML 이미지 소스 태그

width, height, alt 속성 설정

HTML 이미지는 기본적으로 전체 크기로 추가됩니다. widthheight를 사용하여 이미지 크기를 조절할 수 있습니다.

다음 속성을 <img> 태그에 추가합니다.

width="500px" height="500px"

크기 사양이 추가된 HTML 이미지 소스 태그

alt 속성은 이미지가 사용자의 브라우저에 로드되지 않거나 장애가 있는 사용자가 화면 판독기로 읽을 때 이미지의 간단한 설명을 보여줍니다.

다음 속성을 <img> 태그에 추가합니다.

alt="Jupiter's Great Red Spot"

크기 사양과 alt-text가 추가된 HTML 이미지 소스 태그

다른 이미지 추가

56행 부근에 있는 <!--- Add third image here ---> 섹션을 찾습니다.

콘텐츠에 다른 이미지를 추가하려면 방금 학습한 내용을 반복합니다. <img src=" 태그를 입력하고 이미지 폴더에서 sunrise_body.jpg를 찾은 다음 열기를 클릭합니다.

다음 속성을 <img> 태그에 추가합니다.

<img src="images/sunrise_body.jpg" width="500px" height="500px" alt="Gale Crater" />

크기 사양과 alt-text가 추가된 HTML 이미지 소스 태그

브라우저에서 미리보기(Preview in Browser)를 클릭하여 원하는 브라우저를 선택하고 이미지를 확인합니다.

변경 내용을 확인하려면 파일을 저장합니다.

브라우저에서 미리보기 클릭 후 브라우저 선택, 이미지 확인
03/09/2022
이 페이지가 도움이 되었습니까?