HTML
기본 문법
- 콘텐츠를 가지는 태그
<div>콘텐츠</div>- 콘텐츠를 가지지 않는 태그 (단일 태그)
<br />속성과 값
<div title="제목">Content</div>속성 : title
값 : "제목"
HTML 기본 문서
1. 문서 버전
2. HTML 문서 시작 선언 및 기본 언어 설정
3. 문서에 필요한 정보가 가입되는 곳 <head>
4. 문서의 제목 <title>
5. 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳 <body>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>문서제목</title>
</head>
<body>
문서내용
</body>
</html>- 주석
주석 안에 주석 X
<!-- 주석내용 -->< head >
사람 눈에 보이지 않는 "문서의 정보"가 담기는 영역
- 가질 수 있는 정보
- 타이틀
- 메타 데이터
-인코딩 정보
-문서 설명
-문서 작성자 - CSS, JavaScript
< style >, < link >, < script >
문서 내용의 외형에 영향을 주는 태그들
style
<style>
p {
color: blue;
}
</style>link
<link rel="stylesheet" href="style.css" />script
- 콘텐츠 방식
<script>
const hello = 'world';
console.log(hello);
</script>- 링크 방식
콘텐츠를 가지지는 않지만 종료태그를 꼭 넣어주어야함
<script src="script.js"></script>< body >
사람 눈에 실제로 보이는 콘텐츠 영역
- block(블록 레벨 요소)
쌓이고 화면 너비가 꽉 차는 요소
- 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타냄
- 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없음
<div>, <article>, <section>- inline(인라인 레벨 요소)
블록 요소 내에 포함되는 요소
- 주로 문장, 단어 같은 작은 부분에 사용되며 한줄에 나열됨
- 좌/우에 여백을 넣는 것만 허용
- inline은 block을 자식 요소로 가질 수 없음
<span>, <a>, <strong>- inline-block
글자처럼 취급되나, block태그의 성질을 가지는 요소
- block과 마찬가지로 크기와 내/외부 여백 지정 가능
- CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소
레이아웃
단순히 의미 구분자인 < div >를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미 있게 전달
-
< div >
가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그 -
< header >
블로그 글 제목, 작성일 등의 주요 정보를 담는 태그 -
< footer >
페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그 -
< main >
페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그
- 한번만 사용 가능 -
< section >
콘텐츠의 구역을 나누는 태그 -
< article >
블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그 -
< aside >
문서의 주요 내용에 간접적인 정보를 전달하는 태그
Contents
-
< h1 > ~ < h6 >
Heading태그로, 문서 구획 제목을 나타내는 태그
- h1 부터 h6까지 사용 가능
- h1 태그 : 페이지 내에 딱 한번만 사용 가능하고 구획의 순서 지켜야됨
-
< p >
문서에서 하나의 문단을 나타내는 태그 -
< b >, < strong >
글씨의 두께 조절, 두 태그는 시각적 효과는 같지만 의미가 다름
- < b >태그 : 의미를 가지지 않고 단순히 굵은 글씨로만 변경시킴
- < strong >태그 : 굵은 글씨로 변경 후 '강조'의 의미 부여 -
< i >, < em >
글씨의 기울기 조절
- < i >태그 : 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우에 사용
- < em >태그 : 기울임과 내용에 '강조'를 나타냄
-
< u >
글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타냄
- CSS로 스타일링 하여 빨간 밑줄을 넣는 것으로 '오타'를 나타내는 것처럼 사용 가능
- 단순하게 밑줄만 긋는 용도로 사용하면 X
-
< s >, < del >
글씨에 취소선 추가
- < s >태그 : 단순히 시각적인 취소선만 추가
- < del >태그 : 문서에서 제거된 텍스트를 나타내기
- < ins >태그 : 제거된 텍스트 옆에 추가된 텍스트 표현
-
< a >
클릭하면 페이지를 이동할 수 있는 링크 요소
- href속성 : 이동하고자 하는 파일 혹은 URL 작성
- target속성 : 이동해야 할 링크를 새 창(_blank), 현재 창(_self) 등 원하는 타겟 지정
<body>
<h1>제목</h1>
<p>문단태그</p>
<b>볼드</b>
<strong>볼드강조</strong>
<i>기울기</i>
<em>기울기강조</em>
<u>믿줄주석</u>
<s>취소선</s>
<del>제거된 텍스트</del>
<ins>추가된 텍스트</ins>
<a href="주소" target="_blank">링크</a>
</body>-
< img >
문서 내에 이미지를 넣을 수 있는 태그
- 가장 기본적인 이미지 넣는 방법
- src속성 : 이미지 출력
- alt속성 : 이미지 로딩에 문제가 발생했을때 대체 텍스트 띄우기 -
< figure>, < figcaption>
하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
- < figcaption >태그 : 콘텐츠의 설명 혹은 범례를 추가, 제일 처음이나 제일 아래에 추가해서 사용 가능
- 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있음 -
< video >
문서 내에 영상을 첨부할 수 있는 태그
- src속성 : 비디오를 문서 내에 첨부
- poster속성 : 비디오가 로드되기 전에 포스터를 보여줄 수 있음
- < source >태그 : 여러 타입의 비디오 제공
-
< audio >
문서 내에 소리를 첨부할 수 있는 태그
- src속성 : 소리를 문서 내에 첨부
- < source >태그 : 여러 타입의 비디오 제공 가능
- controls속성 : 재생/정지 버튼 등이 있는 컨트롤러 띄우기
-
< svg >
그래픽으로 만들어진 이미지
- 일반 이미지와 가르게 해상도의 영향을 받지 않아 확대/축소가 자유로움
- 주로 크기를 자주 바꾸어야 하는 작은 아이콘에 많이 사용
- < img >태그처럼 svg파일을 불러울 수도 있고 태그를 그대로 사용할 수도 있음
<body>
<img src="경로" alt="대체 텍스트" />
<video src="경로" type="비디오 타입"> </video>
<audio controls src="경로"> </audio>
<svg width="가로영역" height="세로영역"> </svg>
</body>리스트
- < ul >, < li >
정렬되지 않은 목록 태그
- 기본 불릿 형식으로 목록을 그림
- < li >태그 : 목록을 구성할 수 있고 다양한 태그를 포함할 수 있음
- < ul >태그의 자식 요소로는 < li >태그만 들어와야 함
하위 리스트를 만드려면 < li >태그 안에 < ul >, < ol >태그를 사용하면 됨
- < ol >, < li >
정렬된 목록 태그
- 기본 숫자 형식으로 목록을 그림
- < li >태그 : 목록을 구성할 수 있고 다양한 태그 포함 가능
- < ol >태그의 자식요소로는 < li >태그만 들어와야 함
하위 리스트를 만드려면 < li >태그 안에 < ol >, < ul >태그를 사용하면 됨
- < dl >, < dt >, < dd >
설명 목록 태그
- < dt >태그에 사용된 단어 혹은 내용의 설명을 < dd >태그에 작성 가능
- 주로 용어 사전이나 "키-값"이 있는 쌍의 목록을 나타낼 때 사용
- < dt >태그를 여러 개 작성하고 하나의 < dd >태그를 작성하는 것으로 여러 개의 용어 설명 가능
- 위와 반대로, < dt >태그 하나에 여러 개의 < dd >태그 가질 수 있음
<body>
<ul>
<li>리스트</li>
<li>
<ul>
<li>하위 리스트</li>
</ul>
</li>
</ul>
<ol>
<li>리스트</li>
<li>
<ol>
<li>하위 리스트</li>
</ol>
</li>
</ol>
<dl>
<dt>키</dt>
<dd>값</dd>
</dl>
</body>표
- < table >
표를 만드는 태그
- < tr >태그로 행 구분 → row
- < td >태그로 열 생성 → cell
- < th >
cell제목 태그
- 기본적으로 볼드 처리, 가운데 정렬 - < thead >
제목 그룹 태그
- < thead >태그 안에 "cell 제목의 행"을 넣음으로써 그룹을 지을 수 있음
- < tbody >
표 본문 요소 태그
- < tbody >태그 안에 여러 "cell의 행"을 넣음으로써 본문 요소를 그룹지을 수 있음
- 한번만 사용 가능
- < tfoot >
표 바닥글 요소 태그
- < tfoot >태그 안에 여러 "cell의 행"을 넣음으로써 표의 바닥글 요소를 넣을 수 있음
- < 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>
</tbody>
<tfoot>
<tr>
<td>마지막</td>
<td>마지막</td>
</tr>
</tfoot>
</table>
</body>아이프레임
< iframe >
현재 문서 안에 다른 HTML페이지를 삽입할 수 있는 태그
- src 속성 : HTML문서 또는 URL을 넣을 수 있음
- "name"속성을 지정하면, < a >태그의 "target"속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있음
<body>
<iframe src="경로">
브라우저가 아이프레임을 지원하지 않습니다.
</iframe>
<iframe name="sample" src="경로"> </iframe>
<a href="경로" target="sample"> </a>
</body>양식 태그
-
< form >
정보를 제출하기 위한 태그
- action속성 : 정보가 제출되었을 때 페이지 이동
- method속성 : 정보가 제출될 때 처리방식 결정
-
< label >
input, textarea, selectbox의 설명 작성
- for속성 : 태그와 연결
- id속성 : 중복 금지 -
< input >
사용자에게 데이터를 입력받을 수 있는 대화형 태그
- value속성 : 기본 내용 입력
- name속성 : input의 이름 지정
- type속성 : 데이터 유형 결정
1. checkbox : 체크박스 형태
2. radio : 라디오 버튼
3. file : 파일 첨부
4. button : value속성에 입력된 값을 이름으로 갖는 버튼
5. hidden : input을 시각적으로 숨김, 정보 제출 시 value속성에 입력된 값 전송 -
< select >
옵션 메뉴 제공
- < option > : 옵션 정의 → 첫번째 옵션은 이름이 됨
- value속성을 선언하지 않은 경우 < option >태그의 콘텐츠가 기본값
- placeholder속성 사용 불가
-
< textarea >
여러 줄을 입력할 수 있는 대화형 태그
- 콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 됨
- cols/rows속성 : 기본 너비와 높이 지정, 글자 크기 기준으로 정의
-
< button >
클릭 가능한 버튼, < form >태그 내애서 어디서든 사용 가능
- type="reset" : 버튼이 눌리면 양식 초기화
- type="submit" : form양식 제출 (기본 타입)
여러 속성들
- readonly : 읽기 전용
- required : 필수 입력 사항
- placeholder : input, textarea에 부가 설명 입력, < select >태그에선 사용 불가
- disabled : 요소 비활성화, 정보 제출X
<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>주의사항
- 대소문자 구분 필수 (대부분 소문자 사용)
- 종료 태그 필수
- id 고유성 주의
- tag 중첩 오류와 순서 주의
- 동일한 의미의 tag 동시 사용 금지
