1. 메타데이터
[1] W3C 유효성 검사
: 작성한 Html 문서의 유효성을 검사하기 위한 페이지
- https://validator.w3.org
- URL : 웹 주소를 입력하여 유효성 검사
- Fuiel upload : 해당 파일을 업로드하여 검사
- Direct input : 작성한 html을 검사
[2] HTML5
1) <!DOCTYPE html>
: html5의 형식으로 문서가 작성되었음을 웹브라우저에게 알리기 위해 사용
2) 기본 지침
- 항상
<doctype>으로 시작
:<!DOCTYPE html>을 사용한다. <html>
: html 문서의 가장 상위 요소<head>와<body>
: 문서의 기본 설정 정보를 작성하는 영역, 문서의 내용을 작성하는 영역<head>에 문자 인코딩을 넣을 것
:<meta charset = "utf-8">을 포함시켜, 문자 인코딩에서 오류가 나지 않도록 할 것.
[3] Meta 태그 추가
1) 특징
- Meta : 현재 페이지에 대한 meta 정보 (기본 설정)를 브라우저에게 알리며, 주로 인코딩 정보를 포함시키는 역할을 한다.
- 위치 :
<head> </head>태그 안에 포함되어야 한다. - 예시 :
<meta charset = "utf-8">- charset : 문자 인코딩 방식 지정을 위한 속성
[4] Meta 데이터 삽입
1) 메타 데이터
: 데이터를 설명하는 데이터이다.
- 사진 데이터의 메타 데이터 : 사진 찍은 장소, 시간
- 오디오 데이터 : 재생 시간, 채널 수
- 이미지 데이터 : 이미지의 폭, 높이, 컬러 해상도
2) HTML 페이지에 대한 메타 데이터를 담기 위한 태그들
<base>, <link>, <script>, <style>, <title>, <meta>3) 메타 태그들은 <head> 태그 안에 작성한다.
<head>
<base href = "http://www.mystie.com/socre/">
</head><script>태그는<body>내에도 작성 가능하다.
[5] <base> 태그
: 웹 페이지들의 기본 URL과 페이지가 출력될 윈도우를 지정한다.
1) 예시
: math.html이나 science.html 웹페이지 모두 https://www.mysite.com/score/에 있는 경우
<a href = "http://www.mysite.com/score/math.html">수학</a>
<a href = "http://www.mysite.com/score/science.html">과학</a>->
<head>
<base href = "http://www.mystie.com/socre/">
</head>
<a href = "math.html">수학</a>
<a href = "science.html">과학</a>[6] <link> 태그와 <meta> 태그
1) <link>
: 외부 자원 연결에 사용한다.
<head>
<link type = "text/css" rel = "stylesheet" href = "mysthle.css">
</head>2) <meta>
: 다양한 메타 데이터를 표현한다. (웹 페이지의 저작자, 문자 인코딩 방식, 내용 등)
(1) 저작자
<meta name = "author" content = "홍길동">(2) 내용
<meta name = "description" content = "입학 요청에 대한 자세한 사항">(3) 키워드
<meta name = "keywords" content = "컴퓨터, 소프트웨어, 스마트폰">(4) 문자 코드
<meta charset = "UTF-8">2. HTML div & span
[1] Display 속성 : block vs inline
: 웹 페이지 tag를 어떤 방법으로 표현할 것인지 설정
1) Tag : block / inline 태그로 구분
- block tags :
<p>, <h1>, <div>,<ul> - inline tags :
<strong>, <a>, <img>, <span> - 더 다양한 태그 참조 : https://www.w3schools.com/html/html_blocks.asp
2) block tag
- 항상 새 라인에서 시작하여 출력
- 양 옆에 다른 콘텐츠 배치하지 않고 한 라인 독점 사용
- ex)
<div>
3) inline tag
- 블록 속에 삽입되어 블록의 일부로 출력
- ex)
<span>
[2] HTML span
: 웹 페이지의 일부분에 스타일을 적용하기 위해 사용
1) 특징
<div>, <p>태그와 함께 사용하는 것이 일반적이다.- span 태그는 inline 속성으로, span 태그 내부에 있는 객체 만큼의 공간을 할당하여 사용한다.
<span>태그로 컨텐츠를 감싸면 CSS나 javascript로 해당 부분을 변경 가능하다.
2) 속성
[3] HTMl div (Division)
: 웹 사이트의 전체적인 레이아웃을 만들 때 사용
1) 특징
- 논리적 구분을 정의하는 태그이다.
- Div 태그를 사용하여 각각의 영역을 설정한다.
- 각 영역에 CSS를 이용하여 스타일을 적용할 수 있다.
- HTML5에서는 section, articel, asdie, header, footer로 div 역할을 세분화하여 표현한다.
2) 속성
[4] HTML4 VS HTML5
: div 태그를 세분화하여 표현한다.
3. HTML 시맨틱 웹
4. 시맨틱 태그
1) <header>
- 페이지나 섹션의 머리말을 표현한다.
- 페이지 제목, 페이지를 소개하는 간단한 설명을 제공한다.
2) <nav>
- 하이퍼링크들을 모아 놓은 특별한 섹션
- 페이지 내 목차를 만드는 용도로도 사용할 수 있다.
3) <section>
- 문서의 장 (chapter section) 혹은 절을 구성하는 역할을 한다.
- 일반 문서에 여러 장이 있듯이, 웹 페이지에 여러 섹션을 구분할 수 있다.
- 해당 태그 h1~h6를 사용하여 절 혹은 섹션의 주제 기입할 수 있다.
4) <article>
- 본문과 연관 있지만, 독립적인 콘테츠를 담는 영역이다.
- 혹은 보조 기사, 블로그 포스트, 댓글 등 기타 독립적인 내용을 담는다..
- 아티클에 담는 내용이 많은 경우, 여러 섹션을 둘 수 있다.
5) <aside>
- 본문에서 약간 벗어난 노트나 팁을 담는 영역이다.
- 신문, 잡지에서 주요 시가 옆 관련 기사, 삽입 어구로 표시된 논평 등과 비슷하다.
- 페이지의 좌우에 주로 배치한다.
6) <footer>
- 꼬리말 영역이며, 주로 저자나 저작권 정보를 담는 영역이다.
5. HTML Responsive Web Degisn
[1] HTML Responsive Web Design
: 다양한 크기의 모바일 장치와 컴퓨터의 모니터 크기에 조정하는 웹 디자인이다.
1) 사용법
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">2) vw, vh
: Viewport width, Viewport height
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com