5.html
원하는 태그를 일일히 <>를 타이핑 하지 않아도 원하는 태그를 입력하고 탭(tab)을 누르면 자동으로 입력이 된다..!
특정 태그를 다수 입력하는 emmet명령어
ex) <br>을 3번 입력하고 싶으면
br*3 tab
만약, ol태그 안에 li태그를 4번 넣고싶다. 그러면
ol>li*4 tab
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
가 출력이 된다.
주석 : 개발자에게만 보이는 텍스트
<!--""--> 코드는
윈도우 기준 ctrl+/ 단축키 입력으로 빠르게 입력할 수 있다.
<b> 글자를 굵게 표시.
<strong> 중요한 내용임을 명시.
<i> 글자를 기울여서 표시.
<em> 강조할 내용임을 명시.
첨자 태그
| <sup> | 위 첨자 | 지수, 서수 |
| <sub> | 아래 첨자 | 각주, 변수, 화학식 |
ex) x<sup>3</sup> 는
x3라는 결과를 출력한다.
ex) H<sub>2</sub>O 는
H2O라는 결과를 출력한다.
주의. 단순히 작은 작은 글자를 올리거나 내릴 때 사용해서는 안된다.
그런 경우에는 css사용.
밑줄 태그와 취소선 태그
| <u> | 철자 오류 표시 | 예전에는 밑줄 용도로 사용 |
| <s> | 더 이상 유효하지 않은 정보 표시 |
u태그는 과거에는 밑줄을 긋는 용도로 사용되었으나
현재에는 css와 함께 사용되어 철자 오류 등을 강조하는 용도로 사용된다.
s태그는 더 이상 유효하지 않은 정보를 취소선과 함께 나타낸다.
인용문 관련 태그
다른 사이트에서 그 내용을 인용하거나 그 출처를 남길 때 사용하는 태그.
| <blockquote> | 비교적 긴 인용문에 사용 | cite 속성으로 출처 표시 |
| <cite> | 저작물의 출처 표기 | 제목을 반드시 포함 |
| <q> | 비교적 짧은 인용문에 사용 | cite 속성으로 출처 표시 |
| <mark> | 인용문 중 하이라이트 또는 사용자 행동과 연관된 곳 표시 |
<blockquote cite> 태그 + cite 속성
ex) <blockquote cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
<cite> 태그
ex) <cite><blockquote>: 인용 블록 요소</cite> from MDN
인용 블록 요소 이 부분을 제목.
정리하면,
한 사이트에서 인용문을 사용했을 때,
긴 인용문이면 <blockquote> 태그 + cite 속성을 이용하여 인용문과 출처를 표시한다.
비교적 짧은 인용문이면 <q> 태그 + cite 속성을 사용하여 짧은 인용문과 출처를 표시한다.
추론 : 같은 사이트에서 긴 인용문과 짧은 인용문을 사용하여 출처를 표시하려고 하면.
태그만 다를 것이다.
ex) <blcokquote site:"https://blog.naver.com/testexample/534534354261">
<q site:"https://blog.naver.com/testexample/534534354261">
그리고, 인용문의 제목의 출처를 남길 때에는
<cite> 태그를 사용하여 제목과 출처를 표시한다.
<mark> 태그는 css와 병행하여 사용하고
사용자의 행동과 관련있는 부분이나 인용문에서 주시해야 할 부분을 표시한다.
<abbr> 태그는 준말/머릿글자 표시를 하기 위해 사용한다
ex)<abbr title="HyperText Markup Language">HTML</abbr>
HTML
---------------------------------------------------------------------------------------
이미지 삽입
앞에서 배운 <img> 태그 부가 속성 설명.
src : 원본 이미지 파일 경로를 뜻한다.
alt : 원본파일이 무효될 때 대체되는 텍스트이다.
title : 툴팁으로 alt 속성의 대체제나 반복 되어서는 안된다.
width : 너비(px)
height : 높이(px)
---------------------------------------------------------------------------------------
테이블(표) 태그
<table> 테이블을 생성하는 태그.
<caption> 표 제목 또는 설명을 하고 선택적으로 있어도 되고 없어도 된다.
<tr> 테이블의 행을 뜻한다.
<td> 테이블의 데이터 셀을 뜻한다.
<td> 태그에는 colspan(열 병합), rowspan(행 병합) 속성이 있다.
<thead> 테이블에서 헤더 콘텐츠들을 하나의 그룹으로 묶을 때 사용.
<tbody> 테이블에서 내용 콘텐츠들을 하나의 그룹으로 묶을 때 사용.- 본 내용을 담는다.
<tfoot> 테이블에서 푸터 콘텐츠들을 하나의 그룹으로 묶을 때 사용.
<th>테이블에서 제목이 되는 헤더 셀을 정의할 때 사용,
<thead> 태그는 <tbody> 앞에 와야한다.
<tfoot> 태그는 <tbody> 뒤에 와야한다.
<th> 태그에는 scope 속성으로 row(행을 위한 헤더 셀임을 명시),col(열을 위한 헤더 셀임을 명시.)
<colgroup> 태그는 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용.
<colgroup> 태그 내부에 <col> 태그 요소를 포함하여 열마다 각각 다른 스타일 적용 가능.
<colgroup> 요소는 <table> 요소의 자식 요소로,
모든 <caption> 요소보다 뒤에 위치해야 하며
모든 <thead>, <tbody>, <tfoot>, <tr> 요소보다는 앞에 위치해야 한다.
---------------------------------------------------------------------------------------
링크
<a> 태그 안의 target속성값들.
<a href="(연결할 주소)" target="(링크를 열 곳 옵션)">
target 속성값
1. _self 현재창에서 링크를 연다.(기본값임)
2. _blank 새 창에서 링크를 연다. (텍스트나 내부 이미지의 alt 등으로 명시해줄 필요가 있다.)
3. _parent 현재 프레임의 부모 프레임에서 새 웹페이지가 열린다.(iframe 사용시.)
4. _top 최상위 프레임에서 새 웹페이지가 열린다. (iframe 사용시.)
<address> 태그
주소 및 연락처 정보를 포함한다.
href 값 앞부분에는 mailto:-이메일 링크
tel: -전화번호 연결
ex)
<address>
<a href="tel:010-0000-0000">
<a href="mailto:ddddd@naver.com">
</address>
---------------------------------------------------------------------------------------
사용자로부터 입력 받기
| 태그 | 설명 | 비고 |
| <form> | 정보를 제출하기 위한 태그들 포함 | autocomplete 속성: 자동완성 여부(기본:on) |
| <input> | 입력을 받는 요소 | type 속성을 통해 다양화 |
| <label> | 인풋 요소마다의 라벨 | for 속성값을 인풋 요소의 id와 연결. 인풋의 클릭 영역 확장 |
| <button> | 버튼 | type속성에 submit(제출),reset(초기화),button(기본 동작 없음) |
label 태그의 for 속성값을 input 태그의 id와 연결하면 input의 클릭 영역이 확장된다.
ex) <form>
<label for="name">이름</label>
<input id="name" name="my-name" type="text">
</form>
결과:
가 나오는데, 이름을 눌러도 입력이 가능하게 된다.
폼 안의 요소들 그룹으로 묶기
| 태그 | 설명 | 비고 |
| <fieldset> | 폼 태그 내 입력요소와 라벨들을 그룹화 | disabled 속성 : 포함된 일력요소 비활성화 |
| <legend> | 필드셋 요소의 제목 또는 설명 |
인풋 태그
| 속성 | 설명 | 비고 |
| placeholder | 빈 칸에 보이는 안내문 | |
| maxlength | 최대 길이 | |
| minlength | 최속 길이 | 위반시 submit거부됨 |
만약 빈 칸에 보이는 안내문에 텍스트를 넣고 싶으면
<form>
<label>예시</label>
<input placeholder="예시"
maxlength="5">
</form>
| 속성 | 설명 | 비고 |
| min | 최소값 | date등 타입마다 형식 다름 |
| max | 최대값 | date등 타입마다 형식 다름 |
| step | 간격 |
체크 관련 인풋 속성들
| 속성 | 타입 | 설명 |
| checked | 체크박스,라디오 | 체크됨 여부 |
| name | 라디오 | 옵션들의 그룹으로 사용됨 |
| value | 라디오 | 각 옵션마다 실제로 넘겨질 값 |
라디오타입 : 하나를 누르고 다른 하나를 누르려고 하면 둘다 눌리는 게 아닌
나중에 누른 것만 체크되는 타입
파일 인풋 속성들
| 속성 | 설명 |
| accept | 받아들일 수 있는 파일 형식 |
| multiple | 여러 파일 업로드 가능 여부 |
인풋 요소 공통(대부분) 속성
| 속성 | 설명 |
| value | 기본적으로 입력되어있는 디폴트 값 설정 가능 |
| autofocus | 자동으로 선택되어서 포커스 되어있음. |
| readonly | 읽기만 가능하며,제출됨. |
| required | 필수적으로 입력되어야함. |
| disabled | 입력 불가, 제출 안됨. |
<textarea> 태그
textarea의 속성
| 속성 | 설명 | 비고 |
| cols | 글자수 단위의 너비 | 기본값20 |
| rows | 표시되는 줄 수 |
textarea 태그에서 기본 입력되어 있는 디폴트 값으로 설정하려면,
<textarea>내용</textatea>을 입력하면 된다.
빈칸에 보이는 안내문을 사용하려면 placeholder 속성을 입력하면 된다.
<textarea cols="20" rows="5"
placeholder="예시">
</textarea>
옵션들을 사용하는 태그
| 태그 | 속성 | 설명 |
| <select> | multiple | 다중 선택 가능. 드랍다운 대신 상자로 표시 |
| <option> | selected | 선택됨 |
| <option> | value | 실제로 전송될 값 |
| <input> | list | 연결할 <datalist>의 id |
<select>
<option>선택1</option>
<option>선택2</option>
<option>선택2</option>
</select>
라는 결과가 나온다.
정도를 표현하는 태그
<progress> 태그의 속성들
| 속성 | 설명 | 비고 |
| max | 최대값 | 기본:1 |
| value | 진행 수치 | 자바스크립트로 변경 |
<meter> 태그의 속성들
| 속성 | 설명 | 비고 |
| min,max | 최소값과 최대값 | |
| low,high | 전체 범위를 3등분하는 두 수치 | |
| optimum | 이상적인 값 | 3개의 구간 중 한 곳에 위치 |
| value | 실제 값 |
예시
<progress id="progressbar"
max="100">
</progress>
---------------------------------------------------------------------------------------
<pre> </pre> 태그.
pre태그는
미리 정의된 형식의 텍스트를 정의할 때 사용하며,
시스템에서 미리 지정된 고정폭 글꼴을 사용하여 표현되며,
텍스트에 사용된 여백과 줄바꿈이 모두 그대로 화면에 나타난다.
장점 : 컴퓨터 코드 등을 html 문서에 그대로 표현할 수 있다.