[HTML] 웹 퍼블리싱 끝장내기
모든 정보는 얄코 유튜브(새 창으로 열기)를 참고하였습니다.
1. 제목과 본문
Visual code로 작성
! 엔터 하면 기본 틀이 잡힌다.
html lang="en"에서 ko로 수정
<!DOCTYPE html>
<html lang="ko">
<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>
바디 안에 문장을 입력해도 띄어쓰기, 엔터가 반응 안 한다. 그래서 태그를 사용해야 된다.
태그 명령어
Emmet 명령어
<br>을 3번 입력 : br*3
물론 다른 것도 가능 이런 거 많음
주석 ctrl + /
2. 종류와 중요도에 따른 태그
<b> , <strong>은 글자를 굵게 한다.
<i>, <em>은 글자를 기울인다.
b, i는 레거시라 시각적으로만 효과를 주지 문법적으론 강조가 안된다.
html5부터 생겨난 strong과 em을 애용하자.
++ 근데 i태그로 css를 활용하기도 함..
<sup> : 위 첨자 - 지수, 서수에 사용
<sub> : 아래 첨자 - 각주, 변수, 화학식에 사용
용도에 맞게 사용할 것.
<u> : 밑줄선 현재는 css와 함께 철자오류를 강조하는 데 사용
<s> : 취소선
3. 인용된 컨텐츠
꺽쇠 괄호 <> 사용법
< >
HTML Standard
HTMLLiving Standard — Last Updated 20 March 2023 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are suppo
html.spec.whatwg.org
<blockquote> : 긴 인용문에 사용, 들여 쓰기 됨
<q> : 짧은 인용문에 사용, 따옴표로 묶이게 됨
<cite> : 저작물의 출처 제목을 넣는 용도, 기울어지게 됨
링크는 <blockquote cite="https://hello.com">
와 같이 표현
<mark> : 사용자의 행동과 관련 있는 부분 형광펜처럼 표시 (예: 검색결과)
<abba> : 준말/ 머릿글자 표시
4. 나열되는 요소들
<ul> : 순서가 상관없는 리스트
<ol> : 순서가 중요한 리스트
둘 다 자식에 <li>가 있어야 함
단축키 ul>li*4 <-- ul안에 li4개 생김
<dl> : 용어 리스트
<dt> : 용어 <dd> : 정의
★ 용어와 정의가 1:1, n:n 가능
dl>(dt+dd)*3 이런 명령어도 가능
5. 이미지 넣기
<img src="(이미지 파일 경로)" alt="(대체 텍스트)" title="(툴팁 텍스트)">
태그 안에 주석 달 때는 <!-- 주석내용 // 로 사용된다.
좀 이상한 듯
6. 표 사용하기
작성 예시
<table>
<caption>웹개발 공부 기록</caption>
<thead>
<tr>
<th scope="col">과목</th>
<th scope="col">월</th>
<th scope="col">화</th>
<th scope="col">수</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML</th>
<td>60분</td>
<td>60분</td>
<td>0분</td>
</tr>
<tr>
<th scope="row">CSS</th>
<td>0분</td>
<td>30분</td>
<td>60분</td>
</tr>
<tr>
<th scope="row">JS</th>
<td>0분</td>
<td>0분</td>
<td>60분</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">총 시간</th>
<td>60분</td>
<td>90분</td>
<td>120분</td>
</tr>
</tfoot>
</table>결과
table은 표 용도로만 사용할 것.
테이블 부분을 지정해서 효과를 주고 싶을 때 사용한다.
보통 캡션 아래에 지정함.
7. 다른 곳으로의 링크
<a href="(연결할 주소)" target="(링크를 열 곳 옵션)"> 형식으로 사용한다.
특정 부분에 id값을 넣으면 나중에 그 부분으로 링크 설정이 가능해지고, 스크롤 내릴 필요 없이 바로 보여주게 할 수 있다.
<address> : 주소, 번호, 이메일 등 묶을 때 사용된다.
href 앞부분에 mailto: 적으면 이메일 링크, tel: 적으면 전화번호 연결이 된다.
8. 사용자로부터 입력 받기 1
<form autocomplete="off">
<label for:name>이름</label>
<input id:"name" name ="my-age" type="text">
<br><br>
<label for:age>나이</label>
<input id:"age" name ="my-age" type="number">
<br><br>
<button type="submit">제출</button>
<button type="reset">초기화</button>
</form>
제출하면 폼 데이터가 url에 올라간다.
ex) my-name=shin&my-age=123
★label의 for과 id를 매칭시켜 주자
9. 사용자로부터 입력 받기 2
<input> 태그 입력 요소
<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN
HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입
developer.mozilla.org
type: text
placeholder : 비어있을 때 나타내는 내용
autofocus : 자동 포커스됨
value : 입력되어 있게 설정됨
maxlength, minlength
readonly : 읽기만 가능
required : 필수 입력
disable : 입력 불가, 전송도 안됨
type : number, range, date(전부 min~max, disable 설정 가능)
type : checkbox, radio (checked 설정 가능)
name 설정으로 라디오 그룹 묶기 가능
value 값으로 서버에 제출
type : file
accept로 파일 접근 제어 가능
multiple로 여러 개 제출 가능
type: hidden
굳이 안 보여줘도 되는 폼 데이터 저장할 때 사용
페이지 소스보기하면 다 보임
type : email
이메일 형식을 요구하지만 섬세하지는 않음
자바스크립트로 정밀하게 세팅해 줄 것
10. 사용자로부터 입력 받기 3
<textarea> : 큰 텍스트 상자이다. 태그 사이에 적으면 기본으로 입력됨
위에 서술한 placeholder 등등 사용 가능
<textarea> - HTML: Hypertext Markup Language | MDN
HTML <textarea> 요소는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.
developer.mozilla.org
<select> : 선택태그. 자식으로 <option> 설정해야 함 value값 넣어주기
기본값 지정하려면 selected 사용
multiple 사용이 가능 하지만 shift 누르고 골라야 해서 사용자 친화적이지 않음
차라리 checkbox 쓰는 게 낫다.
<label for="lang">언어</label> <br>
<select id="lang">
<option value="">-- 언어 선택 --</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">자바스크립트</option>
<option value="ts">타입스크립트</option>
</select>
optgroup으로 옵션들 묶기도 가능
<select id="shopping">
<optgroup label="과일">
<option value="f_apl">사과</option>
<option value="f_grp">포도</option>
<option value="f_org">오렌지</option>
</optgroup>
<optgroup label="채소">
<option value="v_crt">당근</option>
<option value="v_tmt">토마토</option>
<option value="v_ept">가지</option>
</optgroup>
<optgroup label="육류">
<option value="m_bef">소고기</option>
<option value="m_prk">돼지고기</option>
<option value="m_ckn">닭고기</option>
</optgroup>
</select>
<datalist> : input 타입에 list 값 주고 datalist id랑 같게 하면 리스트를 추천해 준다.
<label for="job">현재 직업</label> <br>
<input id="job" list="jobs">
<datalist id="jobs">
<option value="학생">
<option value="디자이너">
<option value="퍼블리셔">
<option value="개발자">
</datalist>
<progress> : 진행 상태바 (동적)
max 기본값 : 1
value 진행 수치 자바스크립트로 변경해 준다.
<progress
id="progressBar"
max="100">
0%
</progress>
<meter> : 상태바 (정적)
<meter
min="0" max="100"
low="33" high="67"
optimum="50" value="20">
20달러
</meter>
태그 사이에 단어(위에 20달러) 써도 바뀌는 게 없다...
가치 판단을 안 할 때는 low, high, optinum 지워도 좋다.
11. CSS로 넘어가기 전에
<pre> : 태그 내에 작성한 문단은 모두 띄어쓰기, tab, 줄 바꿈이 적용된다.
아스키 아트 같은 거에만 쓰지 잘 안 쓴다.
<pre>
,d888a ,d88888888888ba. ,88"I) d
a88']8i a88".8"8) `"8888:88 " _a8'
.d8P' PP .d8P'.8 d) "8:88:baad8P'
,d8P' ,ama, .aa, .ama.g ,mmm d8P' 8 .8' 88):888P'
,d88' d8[ "8..a8"88 ,8I"88[ I88' d88 ]IaI" d8[
a88' dP "bm8mP8'(8'.8I 8[ d88' `" .88
,88I ]8' .d'.8 88' ,8' I[ ,88P ,ama ,ama, d8[ .ama.g
[88' I8, .d' ]8, ,88B ,d8 aI (88',88"8) d8[ "8. 88 ,8I"88[
]88 `888P' `8888" "88P"8m" I88 88[ 8[ dP "bm8m88[.8I 8[
]88, _,,aaaaaa,_ I88 8" 8 ]P' .d' 88 88' ,8' I[
`888a,. ,aadd88888888888bma. )88, ,]I I8, .d' )88a8B ,d8 aI
"888888PP"' `8""""""8 "888PP' `888P' `88P"88P"8m"
</pre><iframe> : 화면 안에 페이지를 넣는다.
근데 권장하지 않음!
기타 태그들
<kbd> : Ctrl + C 와 같이 키보드 입력을 나타낼 때 사용된다.
<dfn> : 특정 맥락에서 정의, 설명하고 있는 용어를 나타낼 때 사용된다.
<small> : 텍스트를 작게 표시하는데 사용된다. css로 처리해도 되지만 정보성으로 괜찮다.
<span> : 빈 주머니 개념이다. 가로로 나열됨.
<div> : 빈 주머니 개념이다. 세로로 나열됨.
둘 다 css에서 많이 사용할 예정
