HTML 기초

• 웹 페이지의 틀을 만드는 마크업 언어
• HTMl은 tag들의 집합
• Tag: 부등호로 묶인 HTML의 기본 구성 요소
• Tree 구조

가장 많이 쓰이는 태그

•div태그: 한 줄을 차지함
•span태그: 컨텐츠 크기만큼 공간을 차지함
•img태그: 이미지 삽입
•a태그: 링크 삽입
•ul,li,ol : 리스트
•input, textarea = 다양한 입력 폼
•button: 버튼

실습1: 로그인 페이지 만들기

시멘틱 요소

시멘틱 요소를 사용하는 이유

• 검색 엔진이 시맨틱 요소를 더 좋아하기 때문
• 여러 개발자가 함께 작업할 때 div 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문

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

HTML 심화

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

•form 요소는 일반적으로 사용자가 입력한 값을 다른 페이지로 전송하는 역할을 함

id와 class 사용하기

• id : 고유한 이름을 붙일때
• class: 반복되는 영역을 유형별로 분류할 때