HTML을 사용하여 웹 페이지에 스타일링된 개인 정보 이미지를 추가하는 방법

이 강좌에서 우리는 맨 위의 윤곽 이미지를 추가하고 그 스타일을 설정하는 절차를 소개할 것이다. demonstration website에서 보듯이.

저희가 시작하기 전에, 귀하는 웹 사이트에 포함할 수 있도록 개인 정보 사진을 선택해야 할 수도 있습니다.만약 당신이 개인 자료 사진이 없다면, 당신은 어떤 이미지로 프레젠테이션을 하거나, Getavataaars.com 같은 사이트를 통해 화신을 만들 수 있습니다.그렇지 않으면, 당신은 사진 here을 다운로드하여 우리 프레젠테이션 사이트의 사진을 사용할 수 있습니다.(HTML을 사용하여 웹 페이지에 이미지를 추가하는 방법에 대한 복습은 이 강좌 앞의 How To Add Images To Your Webpage Using HTML 강좌를 방문하십시오.)
이미지를 선택한 후 small-profile.jpg으로 저장하고 image 폴더에 저장합니다.
다음과 같이 강조 표시된 <img> 요소를 last tutorial에서 만든 열기 및 닫기 <div> 태그에 붙여넣습니다.

...
<div style="background-image: url('ImageLocation');background-size: cover; height:480px; padding-top:80px;">
  <img src="ImageFilePath" style="height:150px">
</div>
...

강조 표시된 src 주소와 프로필 이미지의 파일 경로를 전환해야 합니다.또한 style 속성을 사용하여 이미지 높이를 150픽셀로 지정합니다.<img> 요소는 마커를 끝낼 필요가 없습니다.
브라우저에 페이지를 저장하고 다시 로드하여 결과를 확인합니다.다음 메시지가 표시됩니다.
style 속성을 사용하여 지정한 높이를 감안하여 귀하의 개인 정보 이미지는 150픽셀 높이로 표시되어야 합니다.previous tutorial의 <div> 용기에 지정된 top-padding의 속성을 감안하면, <div> 용기의 맨 아래 80개의 픽셀에 위치해야 한다.다음은 style 속성에 속성을 추가합니다. 이 속성은 이미지에 원형과 노란색 테두리를 제공합니다.우리는 또한 alternative text을 추가하여 화면 판독기를 사용하는 사이트 방문자의 방문 능력을 향상시킬 것이다.
강조 표시된 속성을 <img> 요소에 추가합니다.

<img src="ImageFilePath" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;" alt="This is a small profile image of Digital Ocean’s mascot, a blue smiling shark.">

이미지의 파일 경로가 src 주소로 올바른지 확인합니다.파일을 저장하고 브라우저에서 다시 로드합니다.다음을 수신해야 합니다.

계속하기 전에, 우리는 잠시 멈추어 방금 한 코드 수정을 연구합시다.border-radius 값을 50%로 설정하면 이미지가 원형으로 표시됩니다.테두리 값을 10px solid #FEDE00으로 설정하면 이미지에 10픽셀 너비의 실심 테두리와 16진수 색상 값 #FEDE00.이 제공됩니다.
이제 HTML을 사용하여 웹 사이트에 프로필 이미지를 추가하고 스타일을 설정하는 방법을 알아야 합니다.우리는 현재 다음 강좌에서 웹 페이지에 제목과 부제목을 추가할 수 있다.