(면접에 나올법한 부분들을 위주로 정리를 해보려고 한다.)
📁HTML
Hyper Text Markup Laungauge
📁HTML 문서 골격
DOCTYPE이란?
쉽게 말해, 문서의 타입을 지정
- 세가지 문서 유형: HTML5, XHTML, HTML
- 일관된 렌더링을 위해 DOCTYPE 명시하는 것이 중요
<head>의 meta 태그
- '데이터에 대한 데이터', '어떤 목적으로 만들어진 데이터'를 의미
- 인코딩 방식, 뷰포트 지정뿐만 아니라 더 많은 작업 수행
📁시맨틱 태그 (Semantic tag)
- 의미에 맞는 태그를 사용해 문서를 작성하는 것
- 특별한 의미가 없는
<div>태그 대신<section><article><nav><footer><aside>와 같은 태그를 상황에 따라 사용하는 것
| 태그 | 설명 |
|---|---|
| header | 페이지 제목, 소개 글, 로고 or 아이콘, 검색 양식 등 |
| nav | 메뉴, 목차 |
| aside | 간접적으로 문서와 관련된 내용 |
| main | 지배적인 콘텐츠 영역 나타냄 |
| section | 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역 |
| article | 독립적인 배포 또는 재사용되도록 의도된 문서 (게시글, 잡지, 블로그 작성글, 대화형 위젯 등 ) |
| footer | 섹션의 작성자에 대한 정보, 저작권 데이터, 문서링크 포함 |
| em, strong | em: 기울기체, strong: 볼드체 |
| p | HTML 문서의 단락 정의 |
<article> vs <section>
-
<article>: 요소 자체가 하나의 의미 있는 콘텐츠 블록 영역- 독립적으로 배포되거나 재사용
-
<section>: 페이지의 단일 부분을 그룹화하는데에 유용- 요소의 콘텐츠를 함께 묶는 것이 합리적일 때 사용
📁SEO (Search Engine Optimization)
사이트를 잘 찾기 쉽도록하는 검색 엔진 최적화
1. 시멘틱하게 HTML 작성
2. <title>을 놓치지 말고 적절하게 작성
3. <meta name="description"> 이용
4. <meta charset="UTF-8"> 이용
📁HTML 요소 분류
- 요소(3가지): Content(내용), Start Tag(시작 태그), End Tag(종료 태그)
인라인 vs 블록
- 인라인 요소 (inline)
- 텍스트나 이미지의 크기에 맞는 필요한 공간만을 차지
- 높이나 너비를 지정할 수 없으며, 줄 내부 어디서든 시작
- ex)
<span><button><img>
- 블록 요소 (block)
- 이전 요소와 상관없이 개행해 새로운 줄에서 시작
- 너비는 좌우 양쪽으로 부모의 100% 차지
- ex)
<div><article><form>
