ASAC 수업에서는 기초 문법을 가르치지는 않기 때문에 과제를 통해 기초 내용들을 복습할 수 있도록 돕습니다. 본 과제는 추후 프론트엔드 보충 멘토링 진행 시 다시 직접 빈 HTML 파일에서 스스로 처음부터 작성해볼것이기 때문에 HTML 문법이 익숙해질때까지 반복하여 작성해보시기 바랍니다.

과제 제출 방법 : 공유된 Github Repository 에 자신의 이름을 딴 브랜치를 만들어 Pull Request 만들기

• 여러분 이름을 딴 브랜치를 만들고, 작업후에 Commit 후 Push 를 하면 아래와 같이 확인이 가능합니다.

• 여러분이 만든 브랜치를 main 브랜치에 맞춰주면 됩니다 (의미 : 류충모 브랜치 코드를 main 브랜치에다가 합칩니다.)

• Merge pull request 버튼을 제발 누르시마시고, 이대로 두면 제가 과제 체크를 할 수 있습니다 :)

• 이렇게 여려분의 Pull requests 들이 리스트로 되어있어서 제가 과제 검사하기가 편합니다 :)

1. HTML 태그 기초

1.1. HTML 태그 작성 방식

• 여는 태그 <div> + 닫는 태그 </div>
• 스스로 닫는 태그 <input />

1.2. HTML 태그 명칭

• 출처 : HTML Elements: What They Are and How to Use Them - 실습가능 튜토리얼 및 설명이 잘되어있는 좋은 페이지

• Element 요소 : 태그

• Attribute 속성 : 태그 내 설정을 위한 값들

2. 자주 사용하는 HTML 태그

100+ Web Development Things you Should Know

• 각 HTML 태그별 어떤 역할을 하고, 어떻게 작성하는지 매우 간단하게 볼 수 있다.

2.1. 하이퍼링크 : 다른 페이지로 이동할 때

• <a> : 다른 페이지로 연결되는 하이퍼링크 표기
  • href : 이동할 링크
  • target : 링크한 URL 표시할 위치 = _self (현재 창, 기본값), _blank (새 창)

<a href="<https://www.naver.com>">이동</a>
<a href="<https://www.naver.com>" target="_blank" rel="noreferrer">새창열기</a>

2.2. 문단 및 영역 표기

• <p> : paragraph 문단 표기
• <section> : 영역 그룹으로 묶기

<section>
    <h2>프로젝트 목표</h2>
    <p>이 섹션은 프로젝트의 목표와 목표를 설명합니다.</p>
</section>
<section>
    <h2>진행 상황</h2>
    <p>이 섹션은 프로젝트의 현재 진행 상황에 대한 정보를 제공합니다.</p>
</section>
<section>
    <h2>결과 및 향후 계획</h2>
    <p>이 섹션은 프로젝트의 결과 및 향후 계획을 다룹니다.</p>
</section>

2.3. 컨텐츠 표기