프로필 사진

Coddy HTML 여정의 기초 섹션에 포함된 레슨. 60개 중 32번째.

챌린지

쉬움

좋아요, 이제 프로필 사진을 추가할 차례예요! 원하는 이미지를 사용할 수 있어요. 아래 예시의 링크를 사용해도 좋아요.

첫 번째 div(헤더 영역) 뒤에 다른 <div>를 만드세요. 그 안에 <img> 태그를 추가하세요.
src가 이미지로 연결되도록 설정하고, width 및 height 속성을 사용해 크기를 조절하세요.

예를 들면 다음과 같아요.

src - https://storage.googleapis.com/coddy-15505.appspot.com/public/avatars/avatar25.png
width - 200
height - 200"

직접 해보기

<!DOCTYPE html>
<html>
    <body>
        <!-- Header Section -->
        <div>
            <h1>John Doe</h1>
            <p>Web Developer | Creative Thinker</p>
        </div>
    </body>
</html>

기초의 모든 레슨

1HTML 기초

HTML이란 무엇인가요?HTML의 기본 구조 태그와 요소 중첩과 닫는 태그 HTML의 주석

4레시피 카드

7개인 프로필 페이지

프로필 사진

10테이블

테이블 기초 캡션 추가하기 행과 열 병합하기 테이블 요약

2텍스트와 서식

제목 단락 줄 바꿈 굵게 및 기울임꼴 텍스트 다시 보는 굵게 및 기울임꼴 요약 - 서식

5콘텐츠 추가하기

HTML 속성 링크 새 페이지 링크 이미지 이미지 속성

8폼과 입력 요소 파트 1

폼의 기초 텍스트 입력 요소 Input 속성 비밀번호 필드 Input을 위한 Label 요약 - 기본 폼

11이벤트 등록 페이지

3리스트 다루기

순서 없는 리스트 순서 있는 리스트 중첩 리스트 리스트 요약

6페이지 레이아웃

디비전 인라인 스팬 시맨틱 태그 섹션과 아티클 정리 - 레이아웃

9폼과 입력 요소 파트 2

라디오 버튼 체크박스 드롭다운 버튼 폼 내부의 버튼 요약 - 폼 #1 요약 - 폼 #2

12최종 챌린지

간단한 프로필 카드 이벤트 초대장 간단한 기사 페이지 좋아하는 도서 목록

직접 연습해 보세요: Web 플레이그라운드