프로필 사진

Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 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>

Fundamentals의 모든 레슨

1HTML 기초

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

4레시피 카드

7개인 프로필 페이지

프로필 사진

10테이블

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

2텍스트와 서식

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

5콘텐츠 추가하기

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

8폼과 입력 요소 파트 1

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

11이벤트 등록 페이지

3리스트 다루기

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

6페이지 레이아웃

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

9폼과 입력 요소 파트 2

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

12최종 챌린지

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