1. <head> 태그
head 요소는 <title>, <style>, <meta>, <link>, <script>, <base> 같은 메타데이터 요소를 담는 컨테이너입니다. <html> 태그와 <body> 태그 사이에 위치하며 그 내용은 화면에 표시되지 않습니다.
<head>
<title>페이지의 타이틀입니다</title>
</head>
<title> 태그의 경우 문서의 제목을 정의며 그렇기에 내용으로 텍스트만을 가질 수 있습니다. SEO에 굉장히 중요하기때문에 정확하고 의미있는 title을 부여하도록 해야합니다.
<meta charset="UTF-8">
<meta name="description" content="동동의 블로그">
<meta name="keywords" content="Frontend, Developer, Programming">
<meta name="author" content="동동">
<meta> 태그는 보통 character set이나 페이지 설명, 키워드, 문서의 저자, viewport 세팅을 위해 사용합니다. 브라우저가 내용을 어떻게 표시하고 리로드할지 알려주고 다른 웹서비스나 검색엔진에게 정보를 제공하는 역할입니다. HTML 작성시 뷰포트를 설정하여 모든 기기에서 웹사이트가 잘 보여지도록 해야합니다.
<head>
<base href="https://dong-x2.tistory.com/" target="_blank">
</head>
<base> 태그는 베이스 URL이나 페이지의 모든 상대 URL의 타겟을 설정합니다. 그렇기에 href속성이나 target속성 둘 중 하나 이상을 반드시 포함해야 하며, 한 문서엔 단 하나의 <base>태그만 존재해야합니다.
2. 뷰포트(Viewport)
뷰포트란 유저가 웹페이지를 볼 수 있는 영역입니다. 뷰포트는 기기에 따라 다릅니다. HTML <meta> 태그에 뷰포트를 설정함으로써 브라우저에게 페이지의 dimension과 scaling을 어떻게 제어할지에 대해서 가이드를 줄 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width : 디바이스의 너비만큼 페이지를 꽉 채워 보여줍니다.
- initial-scale=1.0 : 페이지가 브라우저에 의해 처음 열렸을 때, 최초의 줌 레벨을 설정합니다.
3. 레이아웃(Layout)
웹사이트는 보통 잡지나 신문처럼 콘텐츠를 여러개의 열로 보여줍니다. HTML에는 웹페이지의 다른 부분들을 정의하는 몇 개의 semantic 요소들이 존재합니다.
<header> : 문서나 섹션의 헤더를 정의
<nav> : 네비게이션 링크의 집합을 정의
<section> : 문서에서 섹션을 정의
<article> : 독립적인 콘텐츠를 정의
<aside> : 사이드바 처럼 콘텐츠 옆의 콘텐츠를 정의
<footer> : 문서나 섹션의 푸터를 정의
<details> : 필요에 따라 사용자가 열거나 닫거나 할 수 있는 추가적인 상세 내용을 정의
<summary> : <details> 요소의 헤딩을 정의
여러 열의 레이아웃을 구성하기 위해 다음 네 가지 다른 방법을 사용 가능합니다.
1. CSS 프레임워크 : bootstrap 등의 프레임워크
2. CSS float 속성 : 배우고 적용하기 쉬우나 유연성이 떨어짐
3. CSS flexbox : 다른 기기나 화면 크기에 따라 레이아웃이 예상 가능하게 배치되어 유연성이 좋음
4. CSS grid : grid 기반 레이아웃시스템을 이용
4. 반응형
반응형 웹 디자인이란 HTML과 CSS를 사용해 모든 디바이스에서 웹페이지가 적절히 표시되도록 웹사이트를 자동으로 사이즈 재조정/숨기기/줄이기/키우기 등이 이루어지도록 하는 것입니다. 반응형 웹사이트를 만들기 위해선 아래와 같은 meta 태그가 반드시 필요합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0”>
이를 통해 브라우저가 페이지의 dimension과 scaling을 조절할 수 있도록 웹사이트의 뷰포트를 설정할 수 있습니다.
기본적으로는 이미지에 max-width: 100%; 속성을 주면 원본 크기를 넘어서지 않으면서 적절히 이미지 크기를 반응형으로 컨트롤할 수 있습니다. <picture> 태그를 사용하면 브라우저 창 사이즈에 따라 다른 이미지를 보여줄 수 있습니다. 텍스트 사이즈는 vw(viewport width)단위로 설정이 가능하며, 1vw는 뷰포트의 1%를 의미합니다. 또 다른 방법으로는 미디어 쿼리를 통해 다른 브라우저 사이즈에 다른 스타일을 제공하는 방법이 있습니다.
5. Semantic 요소
시맨틱 요소는 브라우저와 개발자 모두에게 태그만으로도 그것의 의미를 명확하게 설명해줄 수 있습니다. 또한 스크린리더기는 태그를 토대로 웹페이지를 읽어주기 때문에 태그를 Semantic 요소로 작성하는 것은 중요합니다. 이를테면 <div>나 <span> 등은 non-semantic 요소로서 그것의 내용에 대해 알려줄 수 있는 것이 없습니다. 반면에 <form>, <table>, <article> 등은 semantic 요소로서 그것의 내용에 대해 명확히 알 수 있습니다.
이외에도 <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time> 등이 웹페이지의 서로 다른 부분을 정의하기 위해 semantic 요소로 사용될 수 있습니다.
6. HTML 작성 가이드
- 항상 아래와 같이 문서 타입 선언하기
<!DOCTYPE html>
- 태그는 소문자로 작성하기
- 닫는 태그 잊지 않기
- 속성명 또한 소문자로 작성하기
- 속성값은 항상 따옴표로 묶어주기
- 이미지에는 반드시 alt, width, height 속성 명시하기
- 속성명과 속성값 사이 = 표시에는 띄어쓰기 하지 않기
- 좌우로 긴 코드 쓰지 않기
- 탭키 들여쓰기는 하지않되 가독성을 위해 논리적인 코드 블록별로 한 줄 건너 뛰어 코드를 작성하거나 들여쓰기는 공백 2개 사용하기
- <title>태그 꼭 작성하기
- <head>태그와 <body>태그 생략하지 않기
- XML/XHTML 소프트웨어 접근을 위해서는 닫는 / 표시 사용하기
- <html> 태그에 lang 속성 명시하기
- <meta> 태그에 charset 속성 명시하기
- <meta> 태그에 viewport 설정하기
- 파일명을 쓸 때는 소문자의 파일명을 사용하기
'HTML' 카테고리의 다른 글
| HTML Best Practice (0) | 2023.03.20 |
|---|---|
| HTML Forms (0) | 2022.12.13 |
| Semantic HTML 작성하기 (0) | 2022.10.31 |
| HTML 기본 (中) (0) | 2022.10.19 |
| HTML 기본 (上) (0) | 2022.10.19 |
