1. HTML 문서해부
HTML (Hyper Text Markup Language): 모든 사람들이 똑같은 문서를 어디서나 볼 수 있도록 하기위해 만들어진 형식
Hyper Text : 링크 (텍스트와 텍스트 사이를 클릭으로 이동 가능)
구성요소
- <!DOCTYPE html>
- DTD(Document type Definition)라고 부르며 문서의 타입에 대한 정보를 제공
- 해당 코드를 통해 어떤 모드로 페이지를 렌더링할지 결정
- 작성하지 않으면 쿼크모드로 html을 렌더링하는데, 브라우저마다 구성방식이 다르므로 문서 최상단에 DTD를 작성해주는 것이 좋다.
- <html lang=””>
- 페이지의 주 언어가 무엇인지를 설정
- 검색엔진, 스크린 리더, 번역기능 제공 등에 도움이 된다.
- head
- 기계가 식별할 수 있는 문서정보(metadata)를 담는다
- 검색엔진을 위한 다양한 정보들이 담기는 곳
- 종류
- meta : 어떤 목적을 위해 만들어진 데이터
- title
- 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목
- 60자가 넘어가면 축소되어 보일 수 있다.
- link : 현재 문서와 외부 리소스의 관계를 명시
- 스타일시트, 폰트, 파비콘 등
- 보통 폰트는 하나의 문서에 2개이상 사용하지 않음 (폰트이미지의 용량이 상당히 크다!)
- 최적화를 위해 새로운 폰트를 추가하기보단 이미지로 처리하는 방법도 있다!
- void 태그 (여는 부분만 존재)
- rel : 대상 파일의 속성을 나타낸다
- href : 연결 시 참조할 파일의 위치를 나타낸다
- 스타일시트, 폰트, 파비콘 등
- body : 사용자에게 보이는 영역
2. 블록 레벨 요소 VS 인라인 요소
- Block : div, p, form,…
- 부모 요소의 전체 공간을 차지하여 블록을 만든다
- 언제나 새로운 줄에서 시작하며, 가능한 모든 너비를 차지한다
- 페이지의 구조적 요소(Layout)를 나타낼 때 사용
- 블록 요소는 인라인 요소 안에 중첩될 수 없지만, 인라인 요소는 블록 요소 안에 중첩될 수 있다. but a 태그의 경우, 안에 블록 요소 중첩 가능
- weight, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있다.
- Inline : a, label, input,…
- 항상 블록 레벨 요소 내에 포함
- 컨텐츠에 따라 할당된 공간만 차지
- 문장, 단어 같은 작은 부분에 대해서 적용
- weight, height 크기를 지정할 수 없고, padding,border,margin 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없다.
3. 다양한 태그들
- div & span : css로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지않는다
- div : 구획을 나눌때 사용하지만 특별한 의미가 없는 경우
- 콘텐츠 분할 요소
- 블록 요소
- 특별한 필요가 없는 한 사용하지 않는다.
- 가능하면 sementic한(의미가 담긴) 태그를 대신 사용하는 것이 좋다
- 하지만 레거시 브라우저를 지원하기위해 div태그를 일부러 사용하는 경우도 있다(네이버 메인페이지)
- span :
- 인라인 요소
- div : 구획을 나눌때 사용하지만 특별한 의미가 없는 경우
- Sections :
- header :
- 소개 및 탐색에 도움을 준다.
- 회사명, 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함될 수 있다.
- header을 중첩 사용하거나 header안에 footer을 사용할 수 없다.
- nav :
- navigation bar
- 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여준다
- 메뉴, 목차, breadcrumb(사용자가 어떤 카테고리에 있는지)로 사용된다.
Breadcrumb 예시
- 하나의 페이지에 여러개의 nav가 있을 수 있다.
- footer : 페이지의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다
- main :
- body의 주요 컨텐츠를 나타낸다
- 한페이지에 한 번만 사용할 수 있다.
- 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함해서는 안된다. (단 검색 폼이 주요 기능이라면 예외)
- article :
- 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
- 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행
- 아티클 영역을 제거해도 페이지는 정상적으로 돌아간다.
- 아티클이 대표적으로 사용되는곳 : 뉴스 홈페이지
- 다양한 기사들이 한 페이지에 담겨있지만, 각각 독립적으로 사용된다
- 시간마다 노출되는 기사가 달라져도 홈페이지는 정상적으로 운영된다.
- 게시판, 블로그 글, 메거진, 뉴스 기사, 위젯, 실시간 채팅창 등
- 제목 요소를 자식으로 포함하여야 한다.
- 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
- section : 구획을 나눌 때 사용하지만, 의미가 있는 구역을 나눌 때 사용
- 제목 요소를 자식으로 포함해야한다
- article vs section vs div
- 내용이 독립적이고 스스로 설 수 있는 내용이라면 article
- 내용이 서로 관계가 있다면 section
- 의미적으로 관계가 없다면 div를 사용
- 제목으로 묶을 수 있는 하나의 구역이라고 생각하면 편하다
- aside :
- 문서의 주요 내용과 간접적으로 연관된 부분
- 문서의 주요 흐름을 따라가지 않고, 보조적인 역할만 하는 공간
- 각주, 광고 배너등에 사용
- header :
4. 오늘의 소감 / 떠오르는 생각 :
- 이전에는 프론트엔드가 픽셀단위로 조작하는 단순 반복 작업이라고만 생각했었는데, 생각보다 고려해야 하는 부분들이 많고, 태그마다 Sementic한 의미가 담겨있고, 그 의미에 맞게 사용하는게 중요하다는 걸 알게되어 좋았다.
5. 출처
'Dev > ESTsoft 오르미' 카테고리의 다른 글
| CSS2 (Position & Flex) (0) | 2024.02.22 |
|---|---|
| CSS1 (기초 & CSS Box Model) (0) | 2024.02.22 |
| HTML_2 (form, table) (1) | 2024.02.22 |
| GIT & GITHUB (0) | 2024.02.22 |
| 네트워크 기초 (0) | 2024.02.22 |