Programing Language - 기계를 동작하게 지시하는 언어
Markup Language - 형식과 절차에 맞춰 필요에 맞게 작성하는 언어
What You See What You Get (WYSWYG)방식
태그
<HTML></HTML>
구조
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
태그안에 속성과 속성값을 넣을 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>
</html>
meta 태그 속성!
세계의 여러 문자들을 표기위한 Unicode 표를 사용하여 URF-8 사용
charset = "UTF-8"
반응형 웹과 적응형 웹
기기크기에 맞게 변경되도록 설정
name = "viewport" content = "width=device-width"
처음 화면을 몇배 확대하여 보이는지 설정,
유저가 화면을 확대하지 못하도록 설정
initial-scale=1.0,
user-scalable=no
Internet Explorer에서 사용하기 위한 설정
http-equiv="X-UA-Compatible" content="IE=edge"
1) h1은 페이지당 하나만!
2) 순서를 건너뛰지 말것!
3) 시각적 효과를 위해 사용하지 말것(디자인은 css로)
4) 정보의 구조를 나타내는 용도로 사용할 것 ( 그룹을 나눔 )
<br>
: break
닫는 태그 필요 없음.
여러번 여러줄
<p>
: paragraph
정보 부여 : 한 문단, 정보 덩어리임을 나타냄
css가 적용될 단위로 사용
문단 구분을 위한 태그
<b>
:bold
단순히 진하게
<strong>
:strong
정보적 강조(중요한 정보임을 알림)
<small>
글씨를 작게
<cite>
: citation
저작물의 출처 표기 (제목을 표시할 것)
HTML 태그로 디자인 하지 말 것! 디자인은 CSS로!!
<mark>
: 사용자가 관심을 가질 만한 정보 강조
<sup>
: superscript
거듭제곱, th 등 관례적으로 위 첨자로 넣는 글자
<sub>
: subscript
화학기호 등 관례적 아래 첨자
<s>
: strike
취소선
<blockquote>
: 텍스트가 긴 인용문에 사용
속성 - cite : 인용문 출처 URL
<hr>
: 주제나 분위기의 전환 구분
<img>
: image
<a>
:anchor
<body>
<table>
<caption>오늘자 식단표</caption>
<tr>
<td></td>
<th scope="col">아침</th>
<th scope="col">점심</th>
<th scope="col">저녁</th>
</tr>
<tr>
<th scope="row">밥</td>
<td>현미밥</td>
<td rowspan="2">호박죽</td>
<td>흰쌀밥</td>
</tr>
<tr>
<th scope="row">국</td>
<td>콩나물국</td>
<td>갈비탕</td>
</tr>
<tr>
<th scope="row">반찬</td>
<td colspan="3">배추김치</td>
</tr>
</table>
</body>
<ul>
:unordered list
<ol>
:ordered list
<li>
: list item
목록의 요소
table > tr > th, td
table > caption
<table>
: 표
<tr>
:table row
표의 한 열
<th>
: table header
각 열, 행의 머리
<td>
: table data
표의 각 칸
<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> <nav> <ol> <p> <section> <ul>
자체적인 크기와 여백을 갖는다.
줄바꿈을 강제하지 않는다.
<div>
:division
순수 컨테이너 - 스스로는 아무것도 표현하지 않음
다른 요소들을 묶거나, 문서의 구획을 나누는데 사용
전역(공통) 속성만 가짐
<header>
페이지의 최상단에 위치하고
일반적으로 제목, 로고, 검색창 등의 내용 등 포함
페이지의 소개 및 탐색에 도움을 줌.
<footer>
페이지의 최하단에 위치
일반적으로 작성자, 저작권 정보, 관련 문소 등 포함
<nav>
링크들을 포함(페이지 내 구획 또 다른 페이지로의 링크)
<aside>
문서의 주 내용과 간접적으로 연관된 부분
<main>
body의 주요 컨텐츠
메인 컨텐츠가 이 구획에 들어감
<section>
컨텐츠 내 큰 단위의 독립적인 구획
다른 시맨틱 태그의 의미에 해당하지 않는 구호기
<article>
독립적으로 재사용되거나 반복적으로 나타나는 구획
게시판이나 뉴스, 갤러리의 목록상 각 항목
<form>
정보 제출에 사용되는 문서 구획
내부 입력 양식들의 부모, 컨테이너 역할
입력된 정보들을 어떻게 서버에 전달할지 설정
내부에 폼 관련 태그가 아닌 요소도 포함 가능
속성
id : 고유값(이전의 name을 대체)
method : 입력된 정보들의 전달 방식, get, post
action : 정보들을 처리할 서버상의 프로그램 지정
autocomplete : 이전 입력 내역 있을 시 자동완성, on, off
<label>
입력 양식의 레이블을 표시
<input type:"text" placeholer>
<select>
: 선택지
<option>
: 선택 항목
<textarea>
: 여러줄의 텍스트를 입력할 수 있는 태그
<button>
<body>
<form autocomplete="on">
<label for="input-name">이름</label>
<input id="input-name" type="text" placeholder="이름을 입력하세요." maxlength="4"/>
<br>
<label for="input-pw">비번</label>
<input id="input-pw" type="password" placeholder="영문 + 숫자"/>
<br>
<br>
<label for="input-age">나이</label>
<input id="input-age" type="number"/>
<br>
<br>
<label for="input-married">기혼</label>
<input id="input-married" type="checkbox"/>
<br>
<label>역할</label>
<input name="role" id="input-dev" type="radio" checked/>
<label for="input-dev">개발자</label>
<input name="role" id="input-design" type="radio"/>
<label for="input-design">디자이너</label>
<input name="role" id="input-pm" type="radio"/>
<label for="input-pm">매니저</label>
<br>
<br>
<label for="input-file">첨부</label>
<input id="input-file" type="file" multiple/>
<br>
<br>
<label for="select-dep">소속</label>
<select id="select-dep">
<option value="adm">운영팀</option>
<option value="mkt">마케팅팀</option>
<option value="frt">프론트엔드팀</option>
<option value="bck">백엔드팀</option>
<option value="tst">테스트팀</option>
<option value="mnt">유지보수팀</option>
</select>
<br>
<br>
<label for="ta-intro">소개</label>
<textarea id="ta-intro" rows="5"></textarea>
<br>
<br>
<button>제출</button>
<button type="button">취소</button>
</form>
</body>