Chapter 01 - HTML
기본 문법
- 태그(Tag)
- 시작 태그와 종료 태그 : <TagName> contents </TagName>
- 단일 태그 : <TagName />
- 속성(Attribute)
- 값(Value)
문서 구조
- 문서 버전
- HTML 문석 시작 선업 및 문서 기본 언어 설정
- 문서에 필요한 정보가 기입되는 곳 <head>
- 문서의 제목
- 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
<!DOCTYPE html>
<html lang="ko">
<head>
<title>문서 제목</title>
</head>
<body>
문서의 내용
</body>
</html>
부모요소와 자식 요소에 주의 하여 트리 형태를 갖추도록 코드를 작성해야 합니다.
주석(Comment)는 개발자가 코드 내에 입력한 메모 입니다.
<!-- 주석 내용 -->
Chapter 02 - HEAD
<head> 는 사람 눈에 보이지 않는 문서의 정보가 담기는 영역입니다.
종류
- 타이틀
- 메타 데이터
- 인코딩 정보 : "charset"(문서에서 허용하는 문자의 집합)에 선언된 문자의 집합 규칙에 따라 문서에서 사용할 수 있는 문자가 제한됩니다.
- 문서 설명
- 문서 작성자
- CSS, Script
- <style>, <link>, <script> : <head> 안에 있지만 문서 내용의 외형에 영향을 주는 태그
<!-- style tag -->
<style>
body {
color: blue;
}
</style>
<!-- link tag -->
<link rel="stylesheet" href="style.css" />
Chapter 03 - BODY
<body> 는 사람 눈에 실제로 보이는 컨텐츠 영역 입니다.
종류
- block (블록 레벨 요소)
- 쌓이고 너비가 꽉 차는 요소
- 크기와 여백 조정 가능한 페이지의 구조적 요소
- 인라인 요소 포함 가능
- ex) <div>, <article>, <section>
- inline (인라인 레벨 요소)
- 블록 내에 포함되는 요소
- 한 줄에 나열
- ex) <span>, <a>, <strong>
- inline-block
- 글자처럼 취급되나, block 태그의 성질을 가지는 요소
- 크기와 여백 조정 가능
- CSS로 성질을 바꾼 block, 의미상 inline
<body>
<span>인라인1</span> <span>인라인2</span>
<div>블록1</div>
<div>블록2</div>
</body>span {
padding-left: 10px;
padding-right: 10px;
}
div {
padding-top: 100px;
padding-top: 100px;
}
Chapter 04 - 레이아웃
종류
- <div> : 구역을 나누는 태그
- <header> : 주요 정보를 담는 태그
- <footer> : 부차적인 정보를 담는 태그
- <main> : 주요 컨텐츠를 담는 태그. 중복 불가
- <section> : 컨텐츠의 구역을 나누는 태그
- <article> : 독립적인 문서를 담는 태그
- <aside> : 문서의 간접적인 정보를 담는 태그
"Semantic" 태그를 이용하여 문서 구조를 작성하기 위해 레이아웃 태그를 알아야 합니다.
단순히 의미 구분자인 <div>를 남발하지 않고 적절한 태그를 사용하는 것이 중요합니다.
Chapter 05 - Contents
종류
- <h1> ~ <h6> : Heading tag
- 문서 구획 제목을 나타내는 태그
- 페이지 내에 한번만 사용
- 블록 레벨 요소
- <p> : 문단(Paragraph)
- <b>, <strong> : 글씨 두께 조절. <strong>은 강조 의미 포함. 인라인 레벨 요소.
- <i>, <em> : 기울기. <i>문단 구분 포함. <em>은 강조 의미 포함
- <u> : 밑줄을 통해 주석 처리
- <s>, <del> : 취소선 추가.
- <a> : 클릭으로 페이지 이동하는 요소 생성
<body>
<h1>제목1</h1>
<p>문단 태그</p>
<b>볼드</b>
<strong>볼드</strong>
<br><br><br>
<i>기울기</i>
<em>기울기</em>
<br><br><br>
<u>밑줄</u>
<br><br><br>
<s>취소선</s>
<del>삭제된 단어</del>
<ins>추가된 단어</ins>
<a href="http://naver.com" target="_blank">링크!</a>
</body>
- <img> : 이미지 첨부
- src 속성 : 이미지 출력
- alt 속성 : 대체 텍스트 출력
- <figure>, <figcaption> : 독립적인 컨텐츠로 분리하고 설명 첨부
- <video> : 영상 첨부
- src 속성 : 비디오 출력
- poster 속성 : 비디오 로드 전에 포스터 출력
- <source> : 여러 타입 비디오 제공 가능
- <audio> : 소리 첨부
- src 속성 : 소리 출력
- <source> : 여러 타입의 오디오 제공 가능
- controls 속성 : 재생/정지 버튼 컨트롤러 제공
- <svg> (Scalable Vector Graphics) : 그래픽으로 만들어진 이미지 첨부
<body>
<img src="경로" alt="대체 텍스트" />
<br><br><br>
<video src="경로" type="비디오 타입"></video>
<br><br><br>
<audio controls src="경로"></audio>
<br><br><br>
<svg baseProfile="" id version viewBox="시작x 시작y 종료x 종료y" height width>
<g><path>주소</path></g>
</svg>
</body>
- <ul> : 정렬되지 않은 목록 태그
- <ol> : 정렬된 목록 태그
- <li> : <ul>, <ol>의 자식 태그
- <dl>, <dt>, <dd> : 설명 목록 태그
<body>
<ul>
<li>리스트</li>
<li>리스트
<ul>
<li>하위 리스트</li>
</ul>
</li>
</ul>
<ol>
<li>리스트</li>
<li>리스트
<ol>
<li>하위 리스트</li>
</ol>
</li>
</ol>
</body>
- <table> : 표 생성
- <tr> : 행 구분
- <td> : 열 생성
- <th> : 열 제목. 볼드/가운데 정렬 기본
- <thead> : 주요 제목 그룹
- <tbody> : 표 본문 요소
- <tfoot> : 표 바닥글 요소
- <caption> : 표 설명
<body>
<table>
<thead>
<tr>
<th>셀 제목</th>
<th>셀 제목</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="">셀</td>
</tr>
<tr>
<td>셀</td>
<td>셀</td>
</tr>
<tr>
<td>셀</td>
<td>셀</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>마지막</td>
<td>마지막</td>
</tr>
</tfoot>
</table>
</body>
- <iframe> : 현재 문서 안에 다른 HTML 페이지 삽입
- src 속성 : URL 삽입
- name 속성 : <a>의 target 속성 사용 가능.
<body>
<iframe src="경로">
브라우저가 아이프레임을 지원하지 않습니다.
</iframe>
<iframe name="samle" src="http://example.com/"></iframe>
<a href="경로" target="sample">실습</a>
</body>
Chapter 06 - 양식 태그
종류
- <form> : 정보를 제출
- action 속성 : 정보가 제출되었을 때 페이지 이동
- method 속성 : 정보가 제출될 때 처리 방식 결정
- <label> : input, textarea, selectbox의 설명 작성
- for 속성 : 태그와 연결
- id 속성 : 중복 금지
- <input> : 사용자에게 데이터를 입력 받을 수 있는 대화형 태그
- type 속성 : 데이터 유형 결정
- checkbox : 체크박스 형태
- radio : 라디오 버튼
- file : 파일 첨부
- button : value 속성에 입력된 값을 이름으로 갖는 버튼
- hidden : input을 시작적으로 숨김. 정보 제출 시 value 속성에 입력된 값 전송
- value 속성 : 기본 내용 입력
- name 속성 : input의 이름 지정
- readonly : 읽기 전용
- required : 필수 입력 사항
- placeholder : 부가 설명 입력
- disabled : 요소 비활성화. 정보 제출 불가
- type 속성 : 데이터 유형 결정
- <select> : 옵션 메뉴 제공
- <option>
- value 속성 : 선언하지 않은 경우 <options>의 컨텐츠가 기본값
- placeholder 속성 사용 불가. 첫번째 옵션이 버튼
- <textarea> : 여러 줄을 입력할 수 있는 대화형 태그
- 컨텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값
- cols/rows 속성 : 기본 너비와 높이 지정. 글자 크기 기준으로 정의
- <button> : 클릭 가능한 버튼
- type 속성
- reset : 양식 초기화
- submit : 양식 제출
- disabled : 요소 비활성
- type 속성
<body>
<form action="경로" method="get">
<label for="username">아이디</label>
<label>
비밀번호
</label>
<input id="username" type="text" value="아이디">
<input name="password" type="password" placeholder="비밀번호를 입력하세요.">
<input type="tel" placeholder="010-0000-0000 형식">
<br>
<label for="option">옵션 선택</label>
<select id="option" name="opt" required>
<option value="">선택하세요.</option>
<option value="옵션2-값">옵션2</option>
<option>옵션3</option>
</select>
<input type="checkbox" value="checked" name="checkbox">
<label for="agree">약관에 동의합니다.</label>
<input type="radio" name="number" value="1">1
<input type="radio" name="number" value="2">2
<input type="radio" name="number" value="3">3
<br>
<input type="file">
<input type="button" value="버튼" disabled>
<input type="hidden" name="where" value="samplecode">
<textarea name="" id="" cols="30" rows="5">안녕하세요.</textarea>
<button>전송</button>
</form>
</body>
Chapter 07 - HTML 주의사항
- 대소문자 구분 필수! 대부분 소문자 사용!
- 종료 태그 필수 작성!
- 컨텐츠 외에는 항상 영어로 작성!
- id 고유성 주의!
- tag 중첩 오류 주의!
- tag 순서 주의!
- 동일한 의미 tag 동시 사용 금지!
'데브코스 TIL > HTML, CSS' 카테고리의 다른 글
| HTML/CSS Part 01 개요 (0) | 2023.10.23 |
|---|