[1주차 BS] 유채영

[ooyoo80]

✨ 과제 내용

시맨틱 태그를 이용하여 자기소개 페이지 만들기

📸 스크린샷(필수)

📚 새로 알게된 내용 혹은 궁금한 점

HTML 문서의 구조

• !DOCTYPE html : 문서 유형 선언, 해당 문서가 HTML5로 작성되었음 명시
• html : HTML 문서의 최상위 요소
• head : 메타데이터와 외부 리소스에 대한 정보 포함 영역, 브라우저에 보여지지 않음
• title : 문서의 제목 지정
• body : 문서 실제 내용 담고 있는 부분, 웹 페이지에 실제로 표시됨

시맨틱 태그

• header : 페이지 상단에 로고 혹은 메뉴바 등이 담겨 있는 영역
• nav : 메뉴바처럼 여러가지 링크들을 모아놓은 영역
• main : 페이지의 가장 중요한 영역
• footer : 카피라이트나 회사 정보 등이 담겨있는 페이지의 하단 영역
• aside : 본문과 별개의 내용을 포함하는 사이드에 위치한 영역
• article : 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역
• section : 문서, 애플리케이션의 일반적인 섹션을 나타내는 영역

추가 태그

• a : href 특성을 통해 다른 주소나 URL로 연결할 수 있는 하이퍼링크, 안의 콘텐츠는 링크 목적지의 설명 나타냄
• figure : 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡음
  • figcaption : figure에 삽입된 요소의 설명
• br : 텍스트 블록에서 줄을 바꾸는 용도
• p : 하나의 문단 나타냄
• ul : 순서가 없는 목록을 만들 때 사용됨
  • li : 목록의 항목 나타냄
• iframe : 현재 HTML 문서 안에 또 다른 HTML 문서(웹 페이지)를 삽입할 때 사용

궁금한 점

시맨틱 태그 중 section과 article의 실질적인 차이에 대한 설명과, 제 html 코드에서 올바르게 사용되었는지 피드백을 받고 싶습니다!
추가적으로, PPT 예시에 나온 것처럼 핵심 내용을 가로로 정렬하여 배치하려면 어떤 태그를 추가적으로 사용해야 되나요?