[HTML] HTML 기초

HTML, CSS, JS의 간단한 개념

---

HTML: 구조, CSS: 스타일, JS: 상호작용

HTML이란?

---

웹사이트의 모습을 기술하기 위한 마크업 언어.

프로그래밍 언어 ❌ 마크업 정보를 표현하는 마크업 언어입니다.

HTML은 Tag들의 집합이며 트리 구조입니다.

Tag

---

부등호로 묶인 HTML의 기본 구성 요소

• <태그> </태그> - 반드시 닫아주어야 합니다.
• <태그 /> - SELF-CLOSING TAG, 태그 내부에 내용이 없다면 사용 가능합니다.

div와 span의 차이

• div는 한 줄을 차지합니다.
• span은 컨텐츠 크기만큼 공간을 차지합니다.

img

• 이미지 삽입, 닫는 태그가 필요 없습니다.

a

• 링크를 삽입할 수 있는 태그, 요소 href

ul, oi

• 리스트, 자식 요소로 li 태그가 올 수 있습니다.
• ul: li들을 감싸는 태그, 번호가 없습니다.
  ol: ul과 같지만 번호가 있습니다.

input, textarea

• 다양한 입력 폼
• input에는 type속성이 있는데 텍스트, 체크박스, 라디오 버튼 등의 다양한 기능이 있습니다.
• textarea는 줄바꿈이 되는 입력 폼입니다.

button

• 버튼

시맨틱 요소란?

---

• 의미가 있는 요소, 예를 들어 h1은 최상위 제목을 표현할 때 사용하는데, h1은 큰 폰트 사이즈와 위아래로 간격을 자동으로 주어 제목처럼 보이게 합니다.
• div나 span 요소에 css 속성을 추가하여 h1처럼 보이게 할 수 있지만 h1이 가지는 의미는 없습니다.

시맨틱 요소를 사용해야 하는 이유

---

• 검색 엔진이 시맨틱 요소를 중요한 키워드로 고려하기 때문에 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출 될 수 있습니다.
• 개발자들은 함께 작업을 하기 때문에 div보다 시맨틱 요소를 찾는 것이 훨씬 더 편리하기 때문입니다.
• 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.

시맨틱 요소의 종류

---

• article: 독립적이고 자체 포함된 콘텐츠를 지정합니다.
• aside: 본문의 주요 부분을 표시하고 남은 부분을 설명합니다. 사이드바나 광고창 같은 것에 사용합니다.
• footer: 페이지나 해당 파트의 가장 아랫 부분에 위치하며 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
• header: 페이지나 해당 파트의 가장 윗 부분에 위치하며 사이트의 제목이 들어가는데 선택적으로 상단바나 검색창 등이 들어갈 수도 있습니다.
• nav: 상단 바 등 사이트를 안내하는 요소에 사용하며 보통 안에 ul을 넣어 목록 형태로 사용합니다.
• main: 문서의 주된 콘텐츠를 표시합니다.
• form: 사용자가 입력한 값을 다른 페이지로 전송하는 역할입니다.
  input이나 button 등의 요소들을 감싸는 경우에 자주 사용하며, 값을 전송한다는 목적이 명확하므로 div보다 시맨틱합니다.
  다만 페이지 전환 액션이 발생하므로 주의가 필요합니다.

HTML로 웹 페이지 구조 잡기

---

1. 큰 틀에서 영역 나누기
2. 각 영역을 태그로 표현하기

id: 고유한 이름을 붙일 때 사용합니다. - 중복을 허용하지 않습니다.
class: 반복되는 영역을 유형별로 분류할 때 사용합니다.