HTML
HTML이란 Hyper Text Markup Language를 줄여 놓은 것으로 웹사이트에 뼈대를 구축하는 것이다. Programming Language와는 달리 단순히 특정 형식과 문법대로 배치 해놓는 것이다.
Markup Language
Markup Language는 웹사이트에서 어떤게 제목이고 어떤게 소제목인지 어떤게 내용이고 뭐가 중요한지를 화면에 시각적으로 표시하는 역할을 한다.
그 뿐 아니라 검색 엔진이나 소프트웨어 시스템이 파일들을 제대로 분석해 사용자에게 좋은 서비스를 제공하기 위해서 사용하기도 한다.
Hyper Text
기존의 text, 순서대로만 읽어낼 수 있었던 전의 문서에서 발전해 중간에 링크를 통해 어디로든 이동할 수 있는 혁신적인 문서이다.
생성
파일을 작성 한 후 파일명.html 로 작성하면 파일을 html문서로 받아들이고 저장하게 된다.
과거와 현재
과거에는 잡지처럼 단순하게 적정한 형식으로 글과 링크들이 배치되는 형식이어서
위짓 (What You See What You Get)방식으로 많이 만들었다면,
현재는 반응형 웹 같은 크기 조절과 여러 동적 기능들이 많이 들어가있기 때문에 위짓 방식으로는 만들기 어렵고 코딩을 하는게 더 쉬울 수도 있다.
퀄리티도 코딩으로 만드는게 훨씬 높고 코딩 작업 환경도 많이 좋아졌기 때문에 요즘은 코딩으로 만든다.
구조
<html></html> // 이 안에 모든 html 태그들이 들어가있다. 꺽쇠와 꺽쇠 안의 태그로 이루어져있다.
<html>
<head> // 대부분 html문서는 head와 body로 나누어져 있다.
...
</head>
<body>
...
</body>
<html> // 이런식으로 태그안에 태그를 넣을 수도 있다.// html 파일에서 !를 치고 엔터를 누르면
<!DOCTYPE html>
<html lang="ko-KR">
<head> //head 부분은 눈에 보이지 않는 부분이다
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body> // body 부분은 눈에 보이는 부분이다
</body>
</html> // 이런 파일이 생기고 이걸 바탕으로 html 문서 작성을 시작한다.html 태그 부분
<html lang="ko-KR">
// 언어를 설정하는 부분이며 검색을 했을 때 우선순위의 언어라고 생각 할 수 있다.
// 단순히 읽는 것 뿐만이 아니라 읽기 어려운 사람들에게 소리로 제공할 수 있는 접근성과도 관련이 있다.<meta charset="UTF-8" />
// 전 세계 모든 나라 언어를 사용할 수 있는 세팅<meta name="viewport" content="width=device-width, initial-scale=1.0" />
// 반응형 웹인지 적응형 웹인지 설정<meta http-equiv="X-UA-Compatible" content="IE=edge" />
// 최신 버전의 익스플로러 형식으로 읽으라는 뜻태그
- 제목, 부제목 태그
<h1>~<h6>
번호별로 크기가 달라지며(높을수록 하위제목) 줄바꿈이 적용된다.
- 권장사항
1. h1은 페이지당 하나
2. 순서를 건너뛰지 말 것
3. 정보의 구조를 나타내는 용도로 사용할 것(시각적 효과는 CSS로)
- 줄바꿈 태그
<br>
- 닫는 태그 필요 없음, 위치 무관
- 여러번 사용 -> 여러 줄 옮김
- 단순 시각적인 줄 바꿈
<p>
- 정보 부여 = 한 문단, 정보 덩어리 임을 나타냄
- CSS가 적용될 단위로 사용
- 단순 줄 바꿈이 아닌, 문단 구분을 위한 태그 - 강조 태그
<b>
- 단순히 진하게
<strong>
- 정보적 강조(컴퓨터에게 중요한 정보임을 알림) - 기울임 태그
<i>
- 단순히 기울임
<em>
- 정보적 강조(컴퓨터에게 중요한 정보임을 알림) - 기타 태그
<small>
- 글씨를 작게
<cite>
- 저작물의 출처 표시(제목을 표시할 것) - 기타 텍스트 관련 태그
<mark>
- 검색 등 사용자의 행동과 연관 있는 단어
<sup>
- 위첨자(superscript) = 거듭제곱, th 등 관례적으로 위 첨자로 넣는 글자일 때
<sub>
- 아래첨자(subscript) = 화학 기호 등 관례적 아래 첨자
<s>
- strike(취소선) - 인용문 태그
<blockquote>
- 텍스트가 긴 인용문에 사용
cite 속성을 이용해 인용문의 출처 URL을 넣을 수 있다. - 목록 태그
ul
- unordered list 순서가 없는 리스트 = type으로 항목 앞의 표시 모양 변경 가능
ol
- ordered list 순서가 있는 리스트 = type으로 항목 앞 표시 변경 가능, start로 시작할 번호 변경 가능
li
- list item 목록의 요소 = 다른 태그들을 포함할 수 있음 - 테이블 태그
현재는 거의 CSS를 사용해 만든다
table
- 표
tr
- table row = 표의 한 열
th
- table header 각 열, 행의 머리 = scope로 무엇(행/열)의 머리인지 표시 ex) col,row
td
- table data 표의 각 칸 = colspan 가로로 n개 칸 병합 / rowspan 세로로 n개 칸 병합
caption
- 표의 제목
인라인 요소와 블럭 요소
- 인라인 요소
내용부의 크기가 요소의 크기를 결정 (자체적 크기 없음)
- 높이, 너비, 외부/내부 여백 설정 불가
- 내용부의 가로, 세로 정렬 설정 불가
줄바꿈을 강제하지 않음
보통은 다른 데이터와 인라인 요소만 포함(블록 레벨 요소 포함 불가)
<a>,<b>,<br>,<button>,<cite>,<em>,<i>,<img>,<input>,<label>,<script>,<select>,<small>,
<span>,<strong>,<sub>,<sup>,<textarea>- 블럭 요소
- 자체적인 크기와 여백을 가짐
- 부모 요소의 한 줄을 독점, 강제 줄바꿈(자기 너비와 관계없이)
- 일반적으로 타 인라인 요소와 블록 레벨 요소를 포함 가능
<article>,<aside>,<blockquote>,<div>,<footer>,<form>,<h1~h6>,<header>,
<hr>,<li>,<ol>,<ul>,<nav>,<p>,<section>- 인라인 블럭 요소
인라인 요소와 블럭 레벨의 특성을 적절히 혼합한 것이고 기본 크기는 내용에 맞추지만
자체적으로 여백을 가질수도, 크기와 높이를 가질 수도 있다.
HTML 구획과 시맨틱 요소
- 구획을 나누는 태그
<div>: division
- 순수 컨테이너 = 스스로는 아무것도 표현하지 않음
- 다른 요소들을 묶거나, 문서의 구획을 나누는 데 사용
- 전역(공통)속성만 가짐
*span과 달리 블럭 요소
- 의미가 부여된 태그 - Semantics
각 구획의 용도와 내용의 의미를 태그로써 알 수 있도록 함
검색엔진 등이 사이트를 분석하는데 도움을 줌
-<header>
페이지의 최상단에 위치
일반적으로 제목, 로고, 검색창 등의 내용 등 포함
페이지의 소개 및 탐색에 도움을 줌
-footer
페이지의 최하단에 위치
일반적으로 작성자, 저작권정보, 관련 문서 등 포함
-nav
링크들(현재 페이지 내 구획 또른 다른페이지로)을 포함
-aside
문서의 주 내용과 간접적으로 연관된 부분
주로 사이드바 등에 사용
-main
<body>의 주요 컨텐츠
메인 컨텐츠가 이 구획에 들어감
-section
컨텐츠 내 큰 단위의 독립적인 구획
다른 시맨틱 태그의 의미에 해당하지 않는 구획
-article
독립적으로 재사용되거나 반복적으로 나타나는 구획
게시판이나 뉴스, 갤러리의 목록상 각 항목 (카드뉴스 등)
HTML 폼
label
각 입력 양식의 레이블을 표시
예) input과 엮어서 레이블을 터치해도 input으로 가게 만들어 사용자들에게 편의를 제공하는 역할
<label for="ip-name">이름</label>
<input id="ip-name" type="text" /> // for과 id 를 일치시켜 엮기- input
type으로 전화번호가 오게 할지 일반 text가 오게 할지 password가 오게 할지 지정 가능
-placeholder로 입력값이 공백일 때 보여질 텍스트를 설정 가능
-maxlength로 최대 글자수 제한 가능
-radio로 선택하게 만들기 가능 (name으로 여러개 중 1개 선택하게 만들기)
<input id="input-dev" name="role" type="radio" checked />
<label for="input-dev">역할1</label>
<input id="input-dev2" name="role" type="radio" />
<label for="input-dev2">역할2</label>
<input id="input-dev3" name="role" type="radio" />
<label for="input-dev3">역할3</label> - flie로 파일 첨부 가능 (multiple로 여러개 첨부도 가능)
- radio로 표현하기 힘든 많은 종류가 있을 때
select,option으로 표현
<select id="sel-dep">
<option value="dpt">개발팀</option>
<option value="mkt">마케팅팀</option>
<option value="adm">운영팀</option>
<option value="frt">프엔팀</option>
<option value="bck">백엔팀</option>
</select> // value 값은 서버와 통신할 때 쓸 값 - textarea로 여러 줄의 텍스트 입력 가능
- button으로 제출이나 취소 등의 버튼 만들기
한 줄로 소개 할 수 없는 개발자