# HTML - Hyper Text Markup Language
Markup Language는 프로그래밍언어와 다르게 배치하는 의미를 가진다
- Hyper text : 현재는 링크를 통해 페이지 이동 가능
1989년 영국의 컴퓨터과학자 팀 버너스리에 의한 탄생 http 프로토콜 및 url 등의 기원, 저작권없는 공개로 html의 기본화가 이루워짐.
( 파일명 ).html 파일형식
[팀 버너스리 경]
# WYSWYG 방식
What You See What You Get
GUI HTML : 드림위버, 나무에디터 - 코드로 작업하지않고, 마우스로 끌어다가 작업하여 결과물을 만드는것.
# HTML 구조
[ HTML 기본 구조 ]
# HTML 구조별 속성 - Attribute
<!DOCTYPE html>
<html lang="en"> <!-- lang='en' : Attribute -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
</body>
</html># [ <html></html> ] - Attribute
<html lang="en"> <!-- lang='ko' : 사용하는 국가에 따른 언어로 명시하여 사용 -->
<meta charset="UTF-8"> <!-- charset=' ASCII , euc-kr , UTF-8 , Unicode ' - Encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- user-scalable=no : 줌 기능 제거 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 무조건 최신 버전의 IE버전으로 맞춤 -->
<meta name="description" content="title의 소제목기능">
<meta propert="og:title" content="링크제목">
<meta propert="og:url" content="https://www.( 전송 링크 )">
<meta propert="og:image" content="https://( 전송시 보여줄 이미지 ).png">
<meta propert="og:description" content="링크제목의 소제목">
<title>Document</title>
</html># [ meta Tag ]
📌 Encoding
- ASCII : 영문알파벳
- euc-kr : 알파벳에 한글을 추가하여 사용 - 예전의 한국에서 사용
- Unicode : 정상적인 Encoding 형식이 아님. euc-kr에서 한글이외의 ( 각종 기호등 )
- UTF-8 : 어떤 문자던 표현 가능.
📌 name="viewport" : 모바일 시대에서의 가장 중요한 태그
- 반응형 & 적응형 웹사이트에 맞게 화면 비율에 따른 화면 구현에 필수
- viewport : '넓이는? 기기의 넓이에 맞게 알아서 맞춰'
initial-scale=1.0: 화면을 처음 들어왔을때 화면의 비율 설정 - 스마트폰의경우 확인 가능user-scalable=no: 스마트폰일경우 zoomin || zoomout 설정
📌 name="description : 사이트를 검색사이트에서 검색할때 title바로 아래의 소제목
📌 propert="og:" : 링크로 전송시 보여주는것 [ 페이스북, 카카오톡 등 ]
# HTML
[ 참고하기 좋은 사이트 ]
- [ w3schools ] : 내국인이 참고하기 좋은 영리사이트
- [ 공식문서 MDN ] : 파이어폭스 브라우저 제단
# HTML Tag
<mark> : 사용자가 관심을 가질 만한 정보 강조
<sup> : superscript (위첨자)
<sub> : subscript (아래첨자)
<s>: strike (취소선)
<hr> : 주제나 분위기의 전환 구분
<blockquote> :
텍스트가 긴 인용문에 사용
<nav> : 링크들 포함
<aside> : 주로 사이드바 등에 사용
<article> : 게시물의 같은 레이아웃의 형식의 반복적인 구획
📌 HTML - form
정보 제출에 사용되는 문서 구획, 입력된 정보들을 어떻게 서버에 전달할지 설정
📌 <label>
<label for="ip-name">하나의 세트</label>
<input id="ip-name" type="text"> <!-- type="tel" - 전화번호 키패드 -->📌 <input>
- placeholder="" : 미리보여주는 문구
- maxlength="" : 최대 입력자제한
- html & css의 기본 정의 및 Tags
HTML tags
- HTML의 분류
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>(site title name)</title>
(meta & css & javaScript & favicon ...)
</head>
<body>
(html의 tags 영역)
</body>
</html>- inline tags - width 값을 text 및 px영역으로 분류되어 한줄에 여러개의 tags들이 온다.
📌 a , img , input , span , padding ...
👉🏻 <a href="" ></a>
- href="url 연결페이지를 설정하여 페이징사용"
👉🏻 <img src="" alt="" />
- src="사용할 이미지 경로" alt="이미지 깨짐시 text표기-시각장애인의 읽기목적형태"
👉🏻 <input type="" name="" value="" />
- type="text & password... input으로 데이터를 전송하여 검색하기 위해 해당하는 type 적용하여 사용" name="javaScript 전송작업으로 용의" value="input 검색에 기본적인 요소" -
block tags
- 각 tags당 width 값 영역을 100% 가지고있어 한영역에 한가지의 tags 값만 들어온다.📌 h1 ~ h6 , p , div , table , ul , ol , li , button , margin ...
👉🏻<ul>&<ol>- menu 등 리스트로 작업하는 경우에 주로 많이 사용됨
<ul>
<li>1</li>
<li>2</li>
</ul>- inline-block tags - inline tags들의 경우 css 속성에 {dislay : block;} 값으로 변경시 block tags 과 동일하게 영역을 보유한다.
CSS tags
- CSS 3가지 종류
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>(site title name)</title>
> <link rel="stylesheet" href="style.css" /> - 외부 .CSS 파일을 가져와서 HTML에 적용
<style> - 외부 .CSS 파일과 동일함 외부냐, 내부냐의 차이
> a{font-size: 12px;}
</style>
</head>
<body>
> <a href="" style="tags에 직접적으로 css적용"></a>
</body>
</html>- Font style
- font에 스타일을 입힐때, 필요에따라 따로따로 CSS 속성을 부여하는 경우가 흔하지만,
font-family로 한번에 한줄 CSS로 하는 경우로 한번에 설명하기 쉽다.
.font{font-family: Georgia, "Times New Roman", Times, serif;}
- box-sizing , padding , margin , border
- css의 공통적인 요소로 html 태그의 최종부모 태그인 * { box-sizing: border-box;} 를 선언하여 text 및 img 등이 고유로 가지고있는 px값의 width & height에서 추가적으로 inline 요소 padding & block 요소 margin , border 태그에 값을 추가할경우 전체 레이아웃의 영역이탈(=무너짐)을 방지하기위하는 등 레이아웃 작업할시 아래 그림을 참고하여 작업한다.
- 이미지 적용
-<img src="" alt="" />- html & css 상에서 z-index 기본값에 이미지가 하나의 영역으로 포함된 이미지로 적용
{backgroung-image: url("/images/attach/earth.jpg");}- z-index값이 0으로 tags들의 backgroung에 위치하여 위에 다른 tags들이 겹쳐져서 이미지 위에 텍스트를 올려 사용할수있다.
Semantic Web, Semantic Tags
Semantic Web
Web에 존재하는 수많은 WebPage에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
Semantic Tags
HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 되며, '의미론적인 태그'의 뜻을 의미한다.
<div>만으로는 의미를 쉽게 유추하는데 어려움이있어,<hearder>등의 시멘틱 태그를 사용하여 의미를 빠르게 유추하여 작업소요 시간을 활용하기 위함을 가지고있다.
📌 header , body , footer , nav , article , figcaption , section ...
