1. 웹을 이루는 기본 뼈대, HTML
1. HTML과 마크업
- HTML 문서 : HTML 태그로 작성된 문서
- 확장자 :
.html - HTML : Hyper Text Markup Language
- 마크업 언어
- 마크업 : 보기 쉽게끔 마크를 남겨두는 작업
- 요소의 계층 관계 파악이 쉬움 (태그들의 구조와 관계를 쉽고 명확하게 파악할 수 있음)
- 자식 : 요소에 포함된 또 다른 요소 (요소를 포함 시킨 요소는 ‘부모’가 됨)
- 형제 : 서로 동등한 위치의 요소
- Wrapper(래퍼) 태그 : 같은 맥락의 많은 태그들이 있을 떄 이를 감싸주는 태그
- CSS로 내용물들을 꾸미거나 이 태그가 어떻게 구성되어 있는지 쉽게 파악하기 위해 사용
- 마크업 언어
2. 블록 태그와 인라인 태그
- 블록 태그
- 너비의 100%를 다 차지하는 태그 : 화면 구조를 나누기 위한 컨테이너 역할 소화
- wrapper 태그로 많이 쓰임
- div 태그 : 단순히 내용물을 담아 주는 요소의 역할
- 인라인 태그
- 내용물의 너비가 곧 태그의 너비가 되는 태그
- 굳이 너비를 다 차지하지 않아도 되는 내용물들에 많이 사용
- span 태그 : 단순히 내용물을 담아 주는 요소의 역할
- button 태그 : 버튼 모양의 텍스트가 생성되며 마우스를 올려 두면 마우스 포인터가 클릭할 수 있게끔 변경됨
- a 태그 : 하이퍼링크 (주소와 주소 사이를 쉽게 이동할 수 있도록 되어 있는 것)를 걸 수 있는 태그
- 모든 태그는 블록 태그 혹은 인라인 태그 둘 중 하나
- 인라인 태그는 자식으로 블록 태그를 가질 수 없음
3. HTML 태그의 속성
- 태그마다 가질 수 있는 속성의 종류가 다름
- 같은 태그여도 속성이 다를 수 있음
- ex_최대 입력 값을 지정하는 maxLength(최대 입력 가능한 글자 수), 글자를 입력하면 사라지는 placeholder(‘아이디를 입력하세요’ > 아이디 입력 시 글자 사라짐)
- 속성
id: 식별을 해 주는 값으로 사용 (이름 지정)- 대부분의 태그는 id를 속성으로 가질 수 있음
- CSS나 자바스크립트를 다룰 때 용이
4. HTML 문서의 구조
- 머리(haed)와 몸(body)로 나눌 수 있음
<!DOCTYPE html>: 현재 문서가 HTML 문서 타입임을 명시- head 태그
- 웹 브라우저 탭에서 보이는 title, 스크립트, 스타일 시트 등
- title 속성을 제외하고는 사용자에게 직접적으로 보여 지는 것은 없음
- meta 태그 : 기계가 식별할 수 있는 정보인 메타데이터를 담음
- head 태그에 존재
- body 태그
- 사용자(웹 클라이언트)들이 보는 모든 요소