[DAY1] HTML 기초(시멘틱 요소)

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

학교에서 진행하는 프로그램에 참가하여 Jsvascript(프론트엔드) 부트캠프를 진행함. 웹 페이지의 구조를 형성하는 HTML 마크업 언어와 시멘틱 태그의 중요성에 대해 정리했음.

 

🚀 HTML 기초

 

1) HTML (HyperText Markup Language)	웹 페이지의 구조를 정의하는 마크업 언어. JavaScript와 같은 프로그래밍 언어와는 다르게, HTML은 웹 페이지의 뼈대를 이루는 태그(tag)들로 구성.
2) Tag	HTML을 이루는 기본적인 구성 요소로, 부등호(<>)로 묶인 명령어. 이 태그들은 웹 브라우저에게 텍스트와 이미지 같은 콘텐츠를 어떻게 표시해야 하는지를 알려줌.
3) 시멘틱 요소	HTML5에서는 '의미를 가진' 다양한 시멘틱 요소가 도입됨. 이러한 요소들은 검색 엔진 최적화(SEO)와 웹 접근성을 향상시키는 데 중요한 역할을 함.

 

⭐웹 개발 이해

---

• HTML: 구조 / 마크업 언어
• CSS: 스타일 / 스타일시트 언어
• JavaScript: 상호작용 / 프로그래밍 언어

⭐HTML 기초

---

(1) HTML(HyperText Markup Language):

• JavaScript와 같은 프로그래밍 언어가 아닌, 웹 페이지의 뼈대를 구성하는 마크업 언어
• tag들의 집합

(2) Tag:

• 부등호(<>)로 묶인 HTML의 기본 구성 요소
• 자주 사용하는 태그 종류:
  • <img> : 이미지 삽입, 닫는 태그X
  • <a> : 링크 삽입
  • ul> - <li> :  순서X 리스트 
  • <ol> : 순서O 리스트
  • <input>: 다양한 입력 폼
    
    • checkbox(중복 선택), radio(단일 선택), text, password 등
  • <textarea> : 줄 바꿈이 가능한 입력 폼
  • <button> : 버튼

<h1>가장 큰 제목이며, 크기에 따라 h1부터 h6까지 있음</h1>
<div>블록 레벨 요소, 줄 바꿈 포함</div>
<span>인라인 요소, 줄 바꿈 없음</span>
<ul>
	<li>순서 없는 리스트</li>
   	<li>순서 없는 리스트</li>
</ul>
<ol>
	<li>순서 있는 리스트</li>
	<li>순서 있는 리스트</li>
</ol>

위 코드 출력 결과

1. 시멘틱 요소란?

• HTML의 최신 버전인 HTML5에서는 '의미를 가진' 시멘틱 요소(semantic element)가 도입됨.
• 시멘틱 요소 중 하나인 <h1> 의 예
  • 최상위 제목을 표현할 때 사용하는 <h1> 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라 위아래로 간격을 주어 제목처럼 보이도록 함.
  • <div> 요소, <span> 요소에 CSS 속성을 추가하여 <h1> 요소와 똑같은 효과를 보일 수 있음. 그러나 <h1> 요소를 사용할 때처럼 의미적 가치는 없음.

2. 시멘틱 요소의 종류

• <article> : 독립적이고 자체 포함된 콘텐츠를 지정함. 블로그 포스트나 뉴스 기사에 사용됨.
• <aside> : 본문 주요 부분을 표시 후 남은 부분을 설명하는 요소. 사이드바나 광고창 등 중요하지 않은 부분에 사용됨.
• <footer> : 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용함.
• <header> : 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어감. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있음.
• <nav> : 내비게이션(navigation)의 약자로, 상단바 등 사이트를 안내하는 요소에 사용됨. 안에 <ul>을 넣어 목록 형태로 사용함.
• <main> : 문서의 주된 콘텐츠를 표시함. 한 문서에 하나만 사용됨.

[사진] HTML 요소

⭐과제

---

[사진] 자기소개 페이지

• html과 css를 활용해 페이지를 구성함.
• html의 경우, 제목은 <h2> 태그를 사용하고, 소제목은 <h3> 태그를 사용하고, 각 내용들은 <li> 태그로 사용함.
• css의 경우, background-color로 헤더와 푸터의 배경색을 지정하고, font-size로 글자 크기를 조정함.
• text-align을 사용했을 때, 리스트가 기대하던 것처럼 정렬되지지 않아서 magin을 통해 가운데 정렬함.
• 제출 완료.

[사진] 다른 사람들의 자기소개 페이지

⭐후기

---

• 웹 개발의 기본이 되는 중요한 개념들을 다시 한번 공부할 수 있었음.
• 초기에는 HTML을 단순히 웹 페이지를 구성하는 태그들의 집합으로만 여겼음. 글을 작성하면서 시멘틱 태그의 의미를 이해하고, 이러한 요소들이 검색 엔진에 의해 콘텐츠가 어떻게 해석되고 인덱싱되는지에 큰 영향을 미친다는 사실을 알게 되었음.
• 다른 사람들과 자기소개 페이지를 공유하면서 저 사람은 어떻게 만들었는지, 어떤 내용을 추가하면 도움이 될 것 같은지 등을 알 수 있어 유익했음.

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.

 

https://swuniv.kangwon.ac.kr/index.php?mt=page&mp=5_1&mm=oxbbs&oxid=1&cpage=1&key=TITLE_CONTENT&val=Up&CAT_ID=0&BID=1082&cmd=view

강원대학교 SW중심대학사업단