Preface
헷갈리는 태그나 속성이 있을 때마다 매번 블로그 글이나 책을 찾다 보니 시간이 너무 오래 걸린다.
웹 언어들의 주요 태그나 속성들을 한 눈에 쉽게 보고자 글을 업로드한다.
1. HTML
○ 태그
| 종류 | 설명 |
| <!DOCTYPE html> | 문서 유형을 지정한다. |
| <html> | 웹 문서의 시작과 끝을 나타낸다. |
| <head> | 웹 브라우저가 문서를 해석하는 데 필요한 정보를 입력한다. |
| <meta> | 웹 문서와 관련된 정보를 지정할 때 사용한다. |
| <title> | 문서의 제목을 나타낸다. |
| <body> | 실제 웹 브라우저에 표시할 내용을 입력한다. |
| <header> | 헤더 영역을 의미한다. |
| <nav> | 같은 웹 문서 안에서 다른 위치로 연결하거나다른 웹 문서로 연결하는 링크를 만든다. |
| <main> | 웹 문서에서 핵심이 되는 내용을 넣는다. |
| <article> |
웹에서 실제로 보여주고 싶은 내용을 넣는다. |
| <section> |
웹 문서에서 콘텐츠 영역을 나타낸다. |
| <aside> |
사이드 바를 만든다. |
| <footer> |
웹 문서의 맨 아래쪽에 있는 푸터 영역을 만든다. |
| <div> | id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다. |
| <hn> |
제목을 나타내는 태그 |
| <p> |
텍스트 단락을 만든다. |
| <br> |
줄을 바꾸는 태그 |
| <blockquote> |
인용문을 표시한다. |
| <strong> |
텍스트를 굵게 표시하며, 강조한다. |
| <b> |
텍스트를 굵게 표시한다. |
| <em> |
이탤릭체로 표시하며, 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용 |
| <i> | 이탤릭체로 표시하며, 마음속의 생각이나 용어, 관용구 등에 사용 |
| <abbr> | 줄임말을 표시하고 title 속성을 함께 사용할 수 있다. |
| <cite> |
웹 문서나 포스트에서 참고 내용을 표시한다. |
| <code> |
컴퓨터 인식을 위한 소스 코드이다. |
| <small> |
부가 정보처럼 작게 표시해도 되는 텍스트이다. |
| <sub> |
아래 첨자를 표시한다. |
| <sup> |
위 첨자를 표시한다. |
| <s> |
취소선을 표시한다. |
| <u> |
밑줄을 표시한다. |
| <ins> |
공동 작업 문서에서 새로운 내용을 삽입한다. |
| <del> |
공동 작업 문서에서 기존 내용을 삭제한다. |
| <ol>, <li> | 순서 있는 목록을 만든다. |
| <ul>, <li> |
순서 없는 목록을 만든다. |
| <dl> |
설명 목록을 만든다. |
| <dt> |
이름(단어명) 부분을 지정한다. |
| <dd> |
값(설명) 부분을 지정한다. |
| <table> | 표를 만든다. |
| <caption> |
표의 제목을 나타낸다. (생략 가능) |
| <tr> |
행을 만든다. |
| <td> |
셀을 만든다. |
| <th> |
셀을 진하게 표시한다. (표의 제목 행) |
| <thead> |
제목 부분을 나타낸다. |
| <tbody> |
본문 부분을 나타낸다. |
| <tfoot> |
요약 부분을 나타낸다. |
| <col>, <colgroup> |
열을 묶어줄 때 사용한다. |
| <img> |
웹 문서에 이미지를 삽입할 때 사용 |
| <object> |
다양한 멀티미디어 파일을 삽입할 때 사용 |
| <embed> |
대부분 브라우저에서 사용할 수 있으며, src 속성을 사용해 삽입할 멀티미디어 파일을 지정 |
| <audio> |
배경 음악이나 효과음 등 오디오 파일을 삽입할 때 사용 |
| <video> |
비디오 파일을 삽입할 때 사용 |
| <a> |
링크를 삽입할 때 href 속성과 함께 사용 |
| <form> |
폼을 만들 때 사용한다. |
| <fieldset> |
하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용한다. |
| <legend> |
<fieldset> 태그로 묶은 그룹에 제목을 붙일 때 사용한다. |
| <label> | <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다. |
| <input> |
다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다. |
| <textarea> |
텍스트 영역을 만든다. |
| <select>, <option> |
드롭다운 목록을 만든다. |
| <datalist>, <option> |
데이터 목록을 만든다. |
| <button> |
폼을 전송하거나 리셋하는 버튼을 삽입한다. |
○ 속성
- <html> 태그: 웹 문서의 시작과 끝을 나타낸다.
→ lang 속성으로 사용할 언어를 지정할 수 있다. (검색 사이트에서 특정 언어로 제한해 검색할 때 필요)
- <ol> 태그에 type 속성을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다.
1) type="1": 숫자(기본값)
2) type="a": 영문 소문자
3) type="A": 영문 대문자
4) type="i": 로마 숫자 소문자
5) type="I": 로마 숫자 대문자
- 순서 목록은 기본적으로 1부터 시작하지만, start 속성을 사용해서 시작 번호를 바꿀 수 있다.
- 행이나 열을 합치는 속성: 실제로는 셀을 합치는 것이므로 <td> 혹은 <th> 태그에서 이루어진다.
1) rowspan 속성: 행을 합칠 때 사용
2) colspan 속성: 열을 합칠 때 사용
- 같은 스타일 속성을 사용하는 <col> 그룹이 있다면 span 속성을 사용해서 묶어줄 수 있다.
- <img> 태그: 웹 문서에 이미지를 삽입할 때 사용
1) src 속성: 이미지 파일의 경로를 지정
2) alt 속성: 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력 (대체 텍스트)
- alt 속성을 지정하면 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타난다.
1) alt 속성에 들어 갈 텍스트는 이미지를 정확히 설명하는 텍스트여야 한다.
2) 내용 전달이 아니라 화면을 꾸밀 때 사용한 이미지는 텍스트가 따로 필요 없다. (alt="" 만 입력해도 됨)
- width와 height 둘 중 한 개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타낸다.
1) %: 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정 (width="50%")
2) px: 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시 (width="150")
- audio와 video 태그의 속성
1) controls: 플레이어 화면에 컨트롤 바를 표시한다.
2) autoplay: 오디오나 비디오를 자동으로 실행한다.
→ 대부분의 웹 브라우저에서는 오디오나 소리가 있는 비디오 파일의 자동 재생을 금지한다.
3) loop: 오디오나 비디오를 반복 재생한다.
4) muted: 오디오나 비디오의 소리를 제거한다.
5) preload: 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다.
→ 사용할 수 있는 값: auto, metadata, none / 기본값: preload="auto"
6) width, height: 비디오 플레이어의 너비와 높이를 지정한다,
7) poster="파일 이름": <video> 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다.
※ 오디오나 비디오를 자동 재생하려면 autoplay와 muted를 함께 사용해야 한다.
- <a> 태그의 target 속성: 링크를 새 탭에서 열어준다.
→ target 속성에 _blank를 지정해야 한다.
- <form> 태그의 속성
1) method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다.
① get: 데이터를 256~4,096byte까지만 서버로 넘길 수 있으며, 주소 표시줄에 입력한 내용이 드러난다.
② post: 입력한 내용의 길이에 제한받지 않고, 입력한 내용도 드러나지 않는다.
2) name: 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다.
3) action: <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
4) target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 창에서 열도록 한다.
5) autocomplete: 예전에 입력한 내용을 자동으로 표시해 주며, 기본 속성값은 'on'이다.
- <input> 태그의 type 속성 종류
| 종류 | 설명 |
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣는다. |
| password | 비밀번호를 입력할 수 있는 필드를 넣는다. ('*'나 '●'로 표시된다.) |
| search | 검색할 때 입력하는 필드를 넣는다. |
| url | URL 주소를 입력할 수 있는 필드를 넣는다. |
| 이메일 주소를 입력할 수 있는 필드를 넣는다. | |
| tel | 전화번호를 입력할 수 있는 필드를 넣는다. |
| checkbox | 주어진 여러 항목에서 2개 이상 선택할 수 있는 박스를 넣는다. |
| radio | 주어진 여러 항목에서 1개만 선택할 수 있는 버튼을 넣는다. |
| number | 숫자를 조절할 수 있는 스핀 박스를 넣는다. |
| range | 숫자를 조절할 수 있는 슬라이드 막대를 넣는다. |
| date | 사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다. |
| month | 사용자 지역을 기준으로 날짜(연, 월)를 넣는다. |
| week | 사용자 지역을 기준으로 날짜(연, 주)를 넣는다. |
| time | 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣는다. |
| datetime | 국제 표준시로 설정된 날짜와 시간을 넣는다. |
| datetime-local | 사용자가 있는 지역을 기준으로 날짜와 시간을 넣는다. |
| submit | 전송 버튼을 넣는다. (value에 이름 입력) |
| reset | 리셋 버튼을 넣는다. (value에 이름 입력) |
| image | submit 버튼 대신 사용할 이미지를 넣는다. |
| button | 일반 버튼을 넣는다. |
| file | 파일을 첨부할 수 있는 버튼을 넣는다. |
| hidden | 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다. |
- 텍스트 필드와 비밀번호 필드에서 사용하는 주요 속성
1) size: 필드의 길이를 지정하는데, 화면에 몇 글자가 보이도록 할 것인지를 지정하는 것이다.
2) value: 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용이다.
→ 비밀번호 필드에선 사용하지 않는다.
3) maxlength: 필드에 입력할 수 있는 최대 문자 수를 지정한다.
- 여러 항목 중 1개만 선택하려면 라디오 버튼을, 2개 이상 선택하려면 체크 박스를 사용한다.
1) value: 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정한다.
→ 영문이거나 숫자여야 하며, 필수 속성이다. (라디오 버튼에선 yes or no로 사용하는 듯?)
2) checked: 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다.
- 라디오 버튼의 name 속성: PHP와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 주로 사용하며, 하나의 버튼만 선택할 수 있게 하려면 모든 라디오 버튼의 name 값을 똑같이 지정해야 한다.
- type의 number, range 필드에서 사용할 수 있는 속성
1) min: 필드에 입력할 수 있는 최솟값을 지정한다. (디폴트 값: 0)
2) max: 필드에 입력할 수 있는 최댓값을 지정한다. (디폴트 값: 100)
3) step: 숫자 간격을 지정할 수 있다. (디폴트 값: 1)
4) value: 필드에 표시할 초깃값
- 날짜나 시간의 범위 제한
1) min: 범위의 시작 날짜나 시간을 지정한다.
2) max: 범위의 마지막 날짜나 시간을 지정한다.
3) step: 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정한다.
4) value: 기본적으로 표시할 날짜나 시간을 지정한다.
- type="file"로 지정하면 폼에 파일을 첨부할 수 있다.
→ 웹 브라우저 화면에 '파일 선택'이나 '찾아보기' 버튼 등이 생기고, 해당 버튼을 클릭하고 파일을 선택하면 파일이 첨부된다.
- autofocus 속성: 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시한다.
- placeholder 속성: 사용자가 텍스트를 입력할 때 입력란에 힌트 내용을 표시하며, 그 필드를 클릭하면 내용이 사라진다.
- readonly 속성: 해당 필드를 읽기 전용으로 바꾼다.
- required 속성: 해당 필드를 비워놓고 제출할 경우 오류 메시지를 출력한다.
- <textarea> 태그: 텍스트 영역을 만든다.
1) cols: 텍스트 영역의 가로 너비를 문자 단위로 지정한다. (영문자 기준)
2) rows: 텍스트 영역의 세로 길이를 줄 단위로 지정한다.
- <select> 태그와 <option> 태그: 드롭다운 목록을 만든다.
1) <select> 태그의 속성
① size: 화면에 표시할 드롭다운 항목의 개수를 지정한다.
② multiple: 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용한다.
2) <option> 태그의 속성
① value: 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다.
② selected: 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정한다.
2. CSS
○ 태그
| 종류 | 설명 |
| <style> | 내부 스타일 시트를 만든다. |
| <link> | 외부 스타일 시트를 연결할 때 사용한다. |
| <span> |
특정 부분을 묶어주는 태그를 만든다. |
○ 속성: CSS는 대부분 속성값으로 스타일을 만드므로 따로 정리하지 않는다.
댓글