[KDT]FCFE - 1주3일-1. HTML
Part02 웹 사이트 뼈대 만들기
01. HTML 마크업 언어란
Programing Language - 기계를 동작하게 지시하는 언어
Markup Language - 형식과 절차에 맞춰 필요에 맞게 작성하는 언어
What You See What You Get (WYSWYG)방식
- GUI 로 개발하는 방식
02. HTML 구조1
태그
<HTML></HTML>구조
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>03. HTML 구조2
태그안에 속성과 속성값을 넣을 수 있다.
<!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"
04. HTML 기본 태그1
참고 사이트
h1 ~ h6
1) h1은 페이지당 하나만!
2) 순서를 건너뛰지 말것!
3) 시각적 효과를 위해 사용하지 말것(디자인은 css로)
4) 정보의 구조를 나타내는 용도로 사용할 것 ( 그룹을 나눔 )
줄바꿈 태그
<br>: break
닫는 태그 필요 없음.
여러번 여러줄
<p>: paragraph
정보 부여 : 한 문단, 정보 덩어리임을 나타냄
css가 적용될 단위로 사용
문단 구분을 위한 태그
강조 태그
<b>:bold
단순히 진하게
<strong>:strong
정보적 강조(중요한 정보임을 알림)
기울임 태그
<small>글씨를 작게
<cite>: citation
저작물의 출처 표기 (제목을 표시할 것)
HTML 태그로 디자인 하지 말 것! 디자인은 CSS로!!
05. HTML 기본 태그 2
텍스트 관련 태그
<mark>: 사용자가 관심을 가질 만한 정보 강조
<sup>: superscript
거듭제곱, th 등 관례적으로 위 첨자로 넣는 글자
<sub>: subscript
화학기호 등 관례적 아래 첨자
<s>: strike
취소선
인용문 태그
<blockquote>: 텍스트가 긴 인용문에 사용
속성 - cite : 인용문 출처 URL
가로선 태그
<hr>: 주제나 분위기의 전환 구분
이미지 태그
<img>: image
- 속성
src : 이미지의 상대, 절대 경로
alt : 이미지 설명 텍스트
width : 이미지의 가로 길이
<a>:anchor
- 속성
href : URL
target : 링크의 페이지를 열 창 지정, _self(현재창), _blank(새탭)..
06. HTML 중첩되는 태그
<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
- 속성
type : 표시자모양, disc, square, circle...
<ol>:ordered list
- 속성
type : 표시자 형태, 1, A, a, I, i ...
start : 시작할 번호, 숫자
<li>: list item
목록의 요소
테이블 태그
table > tr > th, td
table > caption
<table>: 표
<tr>:table row
표의 한 열
<th>: table header
각 열, 행의 머리
- 속성
scope : 무엇(행/열)의 머리인지 표시 , col, row...
<td>: table data
표의 각 칸
- 속성
colspan : 가로로 n개 칸 병합, 칸 개수 숫자값
rowspan : 세로로 n개 칸 병합, 칸 개수 숫자값
<caption>: 표의 제목
07. HTML 인라인 요소와 블럭 요소
inline 요소
<a> <b> <br> <button> <cite> <em> <i> <img> <input> <label> <script>
<select> <small> <span> <strong> <sub> <sup> <textarea>- 내용의 크기가 요소의 크기를 결정한다. (자체 크기 없음)
- 높이, 너비, 외부/내부 여백 설정 불가
- 내용부의 가로, 세로 정렬 설정 불가
- 줄바꿈을 강제하지 않음
- 다른 데이터와 인라인 요소만 포함( 블록 레벨 요소 포함 불가 )
block 요소
<article> <aside> <blockquote> <div> <footer> <form> <h1>~<h6>
<header> <hr> <li> <nav> <ol> <p> <section> <ul>- 자체적인 크기와 여백을 가짐
- 부모요소의 한 줄을 독점, 강제 줄바꿈
- 일반적으로 타 인라인 요소와 블록 레벨 요소를 포함 가능
inline-block 요소
-
자체적인 크기와 여백을 갖는다.
-
줄바꿈을 강제하지 않는다.
08. HTML 구획과 시맨틱 요소
구획을 나누는 태그
<div>:division
순수 컨테이너 - 스스로는 아무것도 표현하지 않음
다른 요소들을 묶거나, 문서의 구획을 나누는데 사용
전역(공통) 속성만 가짐
Semantics - 의미가 부여도니 태그
<header>페이지의 최상단에 위치하고
일반적으로 제목, 로고, 검색창 등의 내용 등 포함
페이지의 소개 및 탐색에 도움을 줌.
<footer>페이지의 최하단에 위치
일반적으로 작성자, 저작권 정보, 관련 문소 등 포함
<nav>링크들을 포함(페이지 내 구획 또 다른 페이지로의 링크)
<aside>문서의 주 내용과 간접적으로 연관된 부분
<main>body의 주요 컨텐츠
메인 컨텐츠가 이 구획에 들어감
<section>컨텐츠 내 큰 단위의 독립적인 구획
다른 시맨틱 태그의 의미에 해당하지 않는 구호기
<article>독립적으로 재사용되거나 반복적으로 나타나는 구획
게시판이나 뉴스, 갤러리의 목록상 각 항목
09. HTML 폼 사용하기
<form>-
정보 제출에 사용되는 문서 구획
-
내부 입력 양식들의 부모, 컨테이너 역할
-
입력된 정보들을 어떻게 서버에 전달할지 설정
-
내부에 폼 관련 태그가 아닌 요소도 포함 가능
-
속성
id : 고유값(이전의 name을 대체)
method : 입력된 정보들의 전달 방식, get, post
action : 정보들을 처리할 서버상의 프로그램 지정
autocomplete : 이전 입력 내역 있을 시 자동완성, on, off
<label>입력 양식의 레이블을 표시
- 속성
for : 어떤 입력 양식의 레이블인지 지정 , 해당 입력 양식 요소의 id값
<input type:"text" placeholer>- 속성
id : 고유값, label과 연결
autocomplete : 자동완성 , boolean
autofocus : 페이지로 들어올 때 커서가 위치, boolean, 페이지에서 하나만 사용가능
disabled : 수정 불가, 값이 전송되지 않음, boolean
name : 서버로 전송될 항목명
readonly : 수정 불가, 입력된 값은 전송됨. - type에 따른 속성
type : "text", 일반 텍스트 입력
type : "password", 패스워드 입력
type : "tel", 전화번호 입력
- placeholder : 입력값이 공백일 시 보여질 텍스트
- maxlength : 최대 글자 수, 숫자
type : "number" - max : 최대 입력값, 숫자
- min : 최소 입력값, 숫자
- step : 입력 가능한 값의 간격(2:0, 2, 4, 8)
type : "checkbox", 체크박스 - checked : 체크로 초기화 여부, boolean
type : "radio", 라디오(같은 네임 갖으면 하나만 선택 된다.) - checked : 체크로 초기화 여부, boolean
- name : 속한 선택지의 구분자, text
type : "file", 파일 첨부 - multiple : 여러파일 가능 여부, boolean
<select>: 선택지
- 속성
id : 고유값, label과 연결
name : 서버로 전송될 항목명
<option>: 선택 항목
- 속성
value : 서버로 전송될 값
selected : 선택 여부, boolean, select당 하나의 option에만 가능
<textarea>: 여러줄의 텍스트를 입력할 수 있는 태그
- 속성
palceholder : 입력값이 공백일 시 보여질 텍스트
maxlength : 최대 글자 수
rows : 보이는 줄의 수
<button>- 속성
type : 버튼의 역할, submit, button
disabled : 비활성화, boolean
<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>