728x90
Visual Code 태그 생성 간단 단축키
body + tap키 -> <body>
li*20 -> li 20개 생성
li>a*20 -> li속에 a 태그 20개 생성
(li>a)*20 -> li에 a 가 포함
nav#navId -> 아이디 생성
nav.navClass -> 클래스 생성
li.item$3*5 -> 클래스명 3부터 5개
공간태그
div block
span (줄안)inline 일렬로
글자형태
<h1><b> text </b></h1> h1 h2 h3 h4 h5 제목글자
b 굵은 글자 <strong> 강조 <mark> 글자 노랑색 배경
i 기울어진 글자
small 작은 글자
sub 아래 달라붙
sup 위에 달라붙
ins 밑줄 글자
del 가운데에 줄
p
<p> 본문 글자(텍스트 단락) </p
<br> 줄 바꿈
<hr> 수평줄 / <blockquote> 인용문 넣기 / <q>인용 내용 표시
앵커태그 a{text} [링크]
<a href=http://hanb.co.kr>hanbit</a> 지정한 웹 페이지로 이동
<a href=”#alpha”>Move to alpha</a> 페이지 내부 이동 / 한 페이지 안에서 점프하기
id가 alpha 인곳으로 이동
이미지 링크
<img src=” 이미지 경로 “ usemap = “#mapping”> //여러 개의 주소 넣기 위해
<map name = “mapping”>
<area shape=”rect” coords=” (좌표) 281, 0 , 555 , 400” href=” url “ alt=”” target=””>
</map>
target : 링크를 표시할 대상 지정 rel : 현재 문서와 링크 문서 사이의 관계 지정코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
오디오
src
preload 음악을 재생하기 전에 모두 불러올지
autoplay
loop 음악을 반복할지
controls 음악 재생 도구 출력
XHTML5
<audio src=”asdf.mp3” controls=”controls” autoplay=”autoplay”></audio>
HTML5
<audio src=asdf.mp3” controls autoplay></audio>
예제
<audio src="media/ukulele.mp3" controls>우쿠렐레</audio>
이미지 태그
src 이미지 경로
alt 이미지 없을 때 나오는 글자 지정
<figure>
<img src=” img.jpg” alt=”펭귄” width=”200px” height=”auto”/>
<img src=”Nothing” alt =”그림이 존재하지 않습니다. />
<figcaption> 그림 설명 </figcaption>
<figure>placehold.it
<img src=http://placehold.it/300x200 />
비디오 태그
src
poster 비디오 준비 중일 때의 이미지 파일 경로 지정 poster=”http://placehold.it/640x360”
preload 재생하기 전에 모두 불러올지 지정
autoplay
loop
controls
width/height
예제
<video controls>
<source src="media/example.mp4" type="video/mp4">
</video>
벡터이미지(svg)
<img src="images/moon.svg" height="100px" alt="">
예제
<h1>My favorite color is..</h1>
<p>I like yellow color</p>
<hr>
<a href="index.html" target="_blank">index</a> <!-- target="_blank" : 새창 -->
<hr>
<img src="images/pic1.jpg" alt="사진 없을 떄" height="100px">
<hr>
<audio src="media/ukulele.mp3" controls>우쿠렐레</audio>
<hr>
<video controls>
<source src="media/example.mp4" type="video/mp4">
</video>
<hr>
<img src="images/moon.svg" height="100px" alt="">
<hr>
<h1>제목 레벨</h1>
<h2>제목 레벨</h2>
<h3>제목 레벨</h3>
<h4>제목 레벨</h4>
<h5>제목 레벨</h5>
<h6>제목 레벨</h6>
목록 태그 (리스트)
샘플
목록 태그
ul 순서없음 (unordered list)
ol 순서있음 1. 2. 3. <ol type = “1” (start= “ …” ) (reversed) >
li 목록요소
<ul>
<li>
<ol>
<li> text </li>
</ol>
</li>
</ul>
예제
<!-- 순서 없는 리스트 -->
<ul>
<li>우유</li>
<li>빵</li>
<li>치즈</li>
</ul>
<!-- 순서 있는 리스트 -->
<ol>
<li>일어나기</li>
<li>샤워하기</li>
<li>아침먹기</li>
<li>등교하기</li>
</ol>
<!-- 정의 설명 -->
<dl>
<dt>제목:</dt>
<dd>매우 재미있을 책</dd>
<dt>작가:</dt>
<dd>홍길동</dd>
<dt>페이지:</dt>
<dd>500</dd>
</dl>
<!-- 특수문자 -->
<ul>
<li>오른쪽 한 따옴표: ’</li>
<li>왼쪽 한 따옴표: ‘</li>
<li>오른쪽 쌍 따옴표: ”</li>
<li>왼쪽 쌍 따옴표: “</li>
<li>앰퍼샌드(and): &</li>
<li>더 크다: ></li>
<li>더 작다: <</li>
<li>카피라이트: ©</li>
<li> ' " </li>
</ul>
ul{
/* 리스트 앞의 점 없애기 • */
list-style-type: none;
}
폼 (FORM)
form 태그 속성 : 서버에 데이터를 전달
action : 내용들을 처리해 줄 서버 상의 프로그램을 지정
method : get, post
get : url이 변경, 주소에 데이터 입력해서 보내는 방식(요청) <form method=”get”>
post : 주소변경 x / 데이터를 전송하는 방식, 데이터 용량 제한x(전달) <form method=”post”>
<input type= < type에 따라 종류 결정 >
button
file
hidden
image
text
password 속성 : name, size, value, maxlength
radio
checkbox
reset : 입력 전부 삭제
submit : 입력을 서버로 이동, value 버튼 표시 내용 지정
/>
autofocus 페이지 불러오자마자 마우스 커서 표시
placeholder 입력란에 표시하는 힌트
readonly 읽기만
required 필수 필드 체크
샘플
<form>
<!-- Text -->
<div>
<label for="name">이름</label><br>
<input type="text" id="name" name="name" value="길동" required>
<!--필수 조건 required-->
</div>
<!-- Email -->
<div>
<label for="email">이메일</label><br>
<input type="email" name="email" id="email" placeholder="Enter an email">
</div>
<!-- Textarea -->
<div>
<label for="message">메세지</label><br>
<textarea name="message" id="message" cols="50" rows="5"></textarea>
</div>
<!-- Select -->
<div>
<label for="gender">성별</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female" selected>Female</option>
<option value="other">Other</option>
</select>
</div>
<!-- Number -->
<div>
<label for="age">나이</label><br>
<input type="number" name="age" id="age">
</div>
<!-- Date -->
<div>
<label for="bithdate">생년월일</label><br>
<input type="date" name="birthdate" id="birthdate">
</div>
<!-- Radio name이 같음 -->
<div>
<label>멤버쉽</label>
<!-- name 속성은 서버로 보내질 값 앞에 붙음 -->
<input type="radio" name="membership" value="simple" id="simple">심플
<input type="radio" name="membership" value="standard" id="standard">스탠다드
<input type="radio" name="membership" value="super" id="super" checked>슈퍼
</div>
<!-- Checkbox 다중 선택 가능 -->
<div>
<label>I Like</label>
<!-- name 속성은 서버로 보내질 값 앞에 붙음 -->
<input type="checkbox" name="like1" value="bike" id="bike">오토바이
<input type="checkbox" name="like2" value="car" id="car">자동차
<input type="checkbox" name="like3" value="boat" id="boat">보트
</div>
<!-- Input submit -->
<input type="submit" value="제출">
<!-- Button submit -->
<!-- <button type="submit">Submit</button> -->
<button type="reset">리셋</button>
</form>
label 태그
<body>
<form>
<label for="name">이름 <input id="name" type="Text" /></label><br/>
</form>
<input type='text' id="user-id">
<label for="user-id">아이디 </label> <!-- 라벨 [아이디]를 눌러도 커서이동-->
</body>
<p>성별 <label>남 <input type="radio" name="sex" value="1"></label>
<label> 녀 <input type="radio" name="sex" value="2"></label> </p>
//라디오성별
//라디오
HTML5입력 양식
<input type=”..”
color 색상
date 일
datetimedatetime-local 날짜
email
month
number
range 범위
search
tel
time
url
week 주
textarea
cols / rows / name
<textarea id="" cols="" rows=""> </textarea>
select 태그
select 선택 양식 생성
optgroup 옵션 그룹화
option 옵션 생성 // value : 서버에 전송할 값
<select> <!-- 또는 <select multiple=”multiple”>//열려있음-->
<option value=”choice1” selected>선택1</option>
<option value=”chocie2”>선택2</option>
</select>
<select>
<optgroup label=”group1”> <!—항목 그룹화>
<option> 아이템1 </option>
<option> 아이템2 </option>
</optgroup>
<optgroup label=”group2”> <!—항목 그룹화>
<option> 아이1 </option>
<option> 아이2 </option>
</optgroup>
</select>
fiedset
하나의 폼 (form) 안에서 여러 구역을 나누고 싶을 때
<fieldset> <!-- 하나의 폼 (form) 안에서 여러 구역을 나누고 싶을 때 -->
<legend style="color: black; font-weight:bold";>로그인 정보</legend>
<!-- 그룹으로 묶는 구역에 제목을 붙이는 태그 -->
<table>
<tr>
<td><label for=”name”>이름</label></td>
<td><input id=”name” type=”text” /></td>
<tr>
</table>
<input type=”submit” />
</fieldset>
테이블 (TABLE)
샘플
<tr> 표 내부 행 , 행 처리
<th> 행 내부 제목
<td> 데이터 셀
//thead , tbody, tfoot 제목 본문 요약 으로 구분 / 코드 가독성이 높아짐
<table border=”1”> 두께
<thead>
<tr>
<th rowspan =”3”> header </th>
<th colspan =”3> </th>
</tr>
</thead>
<tbody>
<tr>
<td> data </td>
</tr>
</tbody>
</table>
<th rowspan=”3”> 셀 너비
<th colspan=”3”> 셀 높이| header | |
|---|---|
| data |
예제
<table border="1">
<caption>A Caption</caption>
<thead>
<tr>
<th>Countries</th>
<th>Capitals</th>
<th>Population</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">USA</td>
<td>Washington, D.C.</td>
<td>309 million</td>
<td>English</td>
</tr>
<tr>
<td>Stockholm</td>
<td>9 million</td>
<td>Swedish</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"> </td>
<td>318 million</td>
<td> </td>
</tr>
</tfoot>
</table>
colspan : 열 병합
rowspan : 행 병합
Semantic 구조
HTML 문서에서 의미있는 부분을 의미에 맞는 태그를 사용하는 구조
1. 검색 엔진 최적화 (SEO)
검색 엔진이 자료를 검색하여 정보의 의미를 분석할 수 있게 도와줌.
2. 웹 접근성
시맨틱 태그를 사용하면 시각 장애인이 스크린리더기를 이용해 검색 엔진에서 웹 소스를 읽을때 어느 부분이 메뉴이고 본문인지 구분하기 수월해짐.
3. 유지보수 & 가독성
페이지의 구조를 쉽게 파악할 수 있어 코드 리뷰시 탐색이 용이.
코드 작성시 데이터 유형이 제한되어 편리.
<header>
<nav>
<section> <h1>~<h6>
<article>
<aside>
<footer>
'Back-end > 웹(web)' 카테고리의 다른 글
| CSS - Flexbox 플렉스 박스 (0) | 2022.03.31 |
|---|---|
| CSS - 기본 정리 (0) | 2022.03.30 |
| AMP : Accelerated Mobile Pages (0) | 2021.02.21 |
| express multer 파일 업로드 (0) | 2020.09.23 |
| express get방식 post방식 (0) | 2020.09.23 |
댓글