본문으로 건너뛰기
실습하기

템플릿 불러오기 → 프로필 사진 넣기

지금부터 나만의 개성을 담은 자기소개 홈페이지를 만들어 보겠습니다 🙂

왼쪽 아래 학습 도구(Tools)에서 템플릿을 클릭하고, 자기소개 홈페이지 템플릿을 선택하면 해당 템플릿을 불러올 수 있습니다.

템플릿을 불러온 후 가이드라인 버튼을 누르면, 단계별 코딩 가이드라인을 다시 확인할 수 있습니다.


img 태그로 프로필 사진 넣기​

HTML의 <img> 태그는 웹페이지에 사진이나 이미지를 넣을 때 사용합니다. <img> 태그는 다음과 같이 쓸 수 있습니다.

img 태그
<img src="이미지 파일 경로" alt="이미지 설명" />

img 태그의 가장 중요한 속성은 아래 2개입니다.

  • src: 이 속성에는 이미지 파일이 저장된 위치를 URL로 표시합니다.이 URL은 동일한 웹 사이트의 다른 이미지를 가리키거나, 외부 웹 사이트에 호스팅된 이미지를 가리킬 수 있습니다.

  • alt: 이미지 로딩에 실패한 경우를 대비하거나, 시각 장애인을 위한 음성 서비스를 제공하기 위한 "대체 텍스트(alternative text)"를 의미합니다. 필수적인 속성은 아니지만, 웹 접근성 향상에 중요한 요소로 SEO(검색 엔진 최적화)에 큰 도움이 됩니다.

예를 들어, 아래와 같은 코드는 "profile.jpg"라는 이미지 파일을 표시하고, 대체 텍스트로 "프로필 사진"을 표시합니다.

이미지 태그 예시
<img src="profile.jpg" alt="프로필 사진" />

이제 프로필 섹션을 업데이트 하겠습니다.

먼저 중앙의 코드 에디티에서 아래와 같은 코드를 찾아주시기 바랍니다.

Ctrl + F(mac의 경우 Command + F) 단축키를 눌러 검색창을 활성화 하고, header-container를 검색하면 해당 코드를 쉽게 찾을 수 있습니다.

프로필 사진 코드
<section class="header-container">
  <img
    class="profile-image"
    src="https://assets.codefriends.net/assets/images/bio-website/hero-image.png"
    alt="hero-image"
  />
<section>

이후 왼쪽 하단 업로드 도구로 이미지 파일을 업로드 해보겠습니다. 업로드 버튼을 누르고, 상단의 구름 아이콘을 클릭해 이미지 파일을 업로드할 수 있습니다.

파일을 업로드하면 하단에 업로드한 파일이 표시되고, 오른쪽의 복사 아이콘을 클릭해 이미지 URL을 복사할 수 있습니다.

이미지 URL은 https://assets.codefriends.net/ 로 시작합니다.

img 태그의 src 속성에 복사한 이미지 URL을 붙여넣고, alt 속성에는 아래와 같이 "프로필"과 같이 원하는 대체 텍스트를 넣을 수 있습니다.

프로필 사진 넣기
<section class="header-container">
  <img
    class="profile-image"
    src="https://assets.codefriends.net/assets/images/bio-website/hero-image.png"
    alt="hero-image"
  />
<section>

여러분의 프로필 사진이 웹사이트에 표시된 것을 확인할 수 있습니다 :)