자동완성 기능
! + 엔터 입력 시
<!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>
사용 하는 언어 지정하기
<html lang="en"> // 영어 사용시
<html lang="ko"> // 한국어 사용시vs code에서 html 주석 처리하기
<!-- -->head 태그 및 body 태그
head 태그 사이에는 문자 세트와 문서 제목을 입력해야만 한다
즉 meta 태그와 title 태그를 입력해야만 한다
body 태그 사이에는 주로 본문 내용이 들어가고 대표적으로 h태그 가 존재한다
라이브 서버 설치
vs code에서 작성한 코드를 브라우저 에서 바로 보기 위해서는 라이브 서버를 설치해야만 한다.
시맨틱 태그
header, main, footer 이렇게 3개가 주 로 이루어져 있음
태그 정리
내비게이션 영역: nav 태그
독립적인 콘텐츠: article 태그
콘텐츠 영역: section 태그
사이드 바 : aside 태그
여러 소스를 묶는 div 태그
인용할때 쓰는 blockquote 태그
텍스트를 굵게 표시할때 쓰는 strong, b 태그
목록
순서있는 목록
<ol> <li>naver</li> <li>kakao</li> </ol>순서 없는 목록
<ul> <li>naver</li> <li>kakao</li> </ul>설명 목록
<dl> <dt>네이버</dt> <dd>직원수: 300명</dd> </dl> <dl> <dt>카카오</dt> <dd>직원수: 500명</dd> </dl>
표
표를 만드는 table, caption 태그
행을 만드는 tr태그 와 셀을 만드는 td태그
강조 표시하는 th태그<h2>상품 구성</h2> <table> <caption>선물용과 가정용 상품 구성</caption> <tr> <th>용도</th> <th>중량</th> <th>개수</th> <th>가격</th> </tr> <tr> <td>선물용</td> <td>3kg</td> <td>11~16과</td> <td>35,000원</td> </tr> <tr> <td>선물용</td> <td>5kg</td> <td>18~26과</td> <td>30,000원</td> </tr> </table>행을 합치는 rowspan 속성 부여
열을 합치는 colspan 속성 부여<tr> <td colspan="2">선물용</td> <td>3kg</td> <td>11~16과</td> <td>35,000원</td> </tr> <tr> <td rowspan="2">선물용</td> <td>5kg</td> <td>18~26과</td> <td>30,000원</td> </tr>
이미지
<img src="이미지 파일 경로" alt="대체용 텍스트">
<img src="images/image.jpg">// 하위 폴더에 있는 이미지 파일 경로 넣기
<img src="image.jpg" width="50%" height="50%">// 이미지 크기 조절오디오와 비디오
object태그는 오디오 파일뿐만 아니라 비디오, pdf등 다양한 멀티미디어 파일을 삽입할때 사용
<object width="너비" height="높이" data="파일"></object> <object width="900" height="800" data="file.pdf"></object>// pdf파일 삽입하기 <embed src="medias/music.mp3">// embed 태그를 사용해 오디오 파일 삽입하기 <audio src="medias/music.mp3"></audio> 오디오 파일 삽입하기 <video src="medias/salad.mp4"></video> 비디오 파일 삽입하기
하이퍼링크
<a href="링크할 주소">텍스트 또는 이미지</a>폼
폼 요소를 그룹으로 묶는 fieldset, legend 태그
legend 태그는 fieldset 태그로 묶은 그룹에 제목을 붙일 수 있다.<form> <fieldset> <legend>게임</legend> </fieldset> <fieldset> <legend>음악</legend> </form>텍스트와 비밀번호를 나타내는 type="text"와 type="password" ``` <input type="text"> // 텍스트 <input type="password"> // 비밀번호체크 박스와 라디오 버튼을 나타내는 type="checkbox" type="radio" ``` <input type="checkbox"> // 2개 이상 선택하는 checkbox <input type="radio"> // 1개만 선택하는 radiobox숫자 입력 필드를 나타내는 type="number" type="range"
<input type="number">회원수 //스핀 박스 이용해 숫자 입력 <input type="range">회원수 // 슬라이드 막대를 사용해 숫자 입력날짜 입력을 나타내는 type="data", type="month", type="week"
단, chrome에서는 이 3개가 모두 구현 가능하지만 safari에서는 type="data" 밖에 구현을 할 수 없다.<h3>날짜 지정하기</h3> <input type="date"> <h3>날짜 지정하기</h3> <input type="month"> <h3>날짜 지정하기</h3> <input type="week">기본 버튼을 나타내는 type="button"
<input type="button" value="버튼에 표시할 내용">파일 첨부 할 때 사용하는 type="file"
<input type="file">히든 필드 만들때 사용하는 type="hidden"
<input type="hidden" name="이름" value="서버로 남길 값"> ``` 히든 필드는 화면의 폼에서 보이지는 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송 힌트를 표시해 주는 placeholder 속성 ``` <input type="text" placeholder="생년월일">읽기 전용 필드를 만들어 주는 readonly 속성 ``` <input type="텍스트-입력-필드" readonly>필수 입력 필드를 지정하는 required 속성 ``` <input type="text" required>여러 줄을 입력하는 텍스트 영역 textarea태그 ``` <textarea>내용</textarea>드롭다운 목록을 만들어 주는 select, option 태그 ``` <label>직무 선택</label> <select> <option selected>프론트 엔드</option> <option>백 엔드</option> <option>인공지능 </option> </select>
