728x90
1. HTML이란?
HyperText Markup Language, 웹페이지의 토대가 되는 언어로 태그를 이용하여 원하는 컨텐츠를 표현해준다.
2. 기본적인 작성법
<a href="main.html"> 홈 </a>
태그는 시작태그 <>와 종료태그 </>가 항상 쌍으로 있어야한다.
중첩문 <p><strong>중첩문 태그 종료</strong></p> 의 경우 바로 앞에 있는 태그부터 종료한다.
a는 태그명, href는 a태그의 속성, ""안에 들어가 있는 main.html은 값이라고 한다.
3. 태그 리스트(알파벳 순)
| 태그 | 설명 |
| <!--...--> | 주석달기, 동료와 의사소통할 때, 혹은 본인 스스로 각인시킬 작업에 대한 코멘트를 달아줄 때 사용. |
| <!DOCTYPE> | 문서 타입을 알려준다. HTML 파일이 어떤 버전으로 만들어졌는지 나타냄 HTML5 버전에서 <!doctype html>로 표현하고 종료 태그는 없다. |
| <a> | 이동하고 싶은 주소를 링크할 때 사용. |
| <abbr> | 약어나 두문자를 정의해준다. 해당 태그가 있는 문자에 마우스 오버하면 설명해주는 문구가 뜸. |
| <acronym> | * HTML5에서는 지원 안됨 <abbr> 를 사용하자. 같은 기능이다. |
| <address> | 문서의 저작자에 대한 컨택 정보를 적어준다. |
| <applet> | * HTML5에서는 지원 안됨 <embed>나 <object> 를 사용하자. 같은 기능이다. |
| <area> | 이미지맵 안에서 영역을 정해준다. |
| <article> | 어떤 것에 대한 종류 등을 기술해 줄 때 활용. |
| <aside> | 문서의 중심 내용 변두리에 붙은 내용을 나타낼 때, 주로 사이드바를 나타낼 때 활용된다 |
| <audio> | 사운드를 넣어줄 때 |
| <b> | 텍스트 볼드 표시 |
| <base> | 문서 안에서 사용하는 모든 url의 상대 경로에서 기준 url을 설정해주는 것 |
| <basefont> | * HTML5에서는 지원 안됨 CSS를 활용해주자 |
| <bdi> | 아랍어와 관련 있는 태그, 방향성을 맞춰준다. |
| <bdo> | 글자의 방향을 설정해주는 태그 |
| <big> | * HTML5에서는 지원 안됨 CSS를 활용해주자, 글자를 크게 만들어 주는 것 |
| <blockquote> | 인용할 때 활용하는 태그, 일반 줄보다 띄어서 써 준다. |
| <body> | 문서의 몸체 태그, 실제 브라우저에 표시되는 내용이다. |
| <br> | 텍스트 라인을 내려주는 역할 태그 |
| <button> | 폼에서 클릭했을 때 액션을 만들어 주는 버튼 태그 |
| <canvas> | 자바스크립트와 함께 사용해서 그래픽 요소를 만들어 주는 태그 |
| <caption> | 테이블 위에 써지는 표제 |
| <center> | * HTML5에서는 지원 안됨 텍스트 가운데 정렬 |
| <cite> | 작품에 대한 제목, 기울어진 텍스트로 강조된다 |
| <code> | 컴퓨터 코드를 정의할 때 사용함, 글자가 조금 작게 나옴. |
| <col> | colgroup 안의 요소, 가로의 한 칸. |
| <colgroup> | 테이블 안에서 가로 칸들의 그룹, 가로 칸들의 속성을 정해줄 때 사용한다. |
| <data> | 기계가 읽을 수 있게 해당 항목을 기계어로 넣어준 것. 표시는 안됨 |
| <datalist> | input 태그에서 데이터를 선택할 수 있게 리스트로 보여주는 태그 |
| <dd> | <dl>태그 내에서 <dt>태그의 항목을 설명해주는 태그, 약간 띄어져서 쓰여진다. |
| <del> | 텍스트에 가운데 줄 그어지게 |
| <details> | 사용자가 숨기거나 볼 수 있게 설명을 넣을 때 사용 |
| <dfn> | 현재 컨텐츠 안에서 정의하고 있는 용어를 가르킨다 |
| <dialog> | 박스 모양으로 창처럼 보여지는 태그 |
| <dir> | * HTML5에서는 지원 안됨 <ul> 를 대신 활용하자 |
| <div> | 문서의 구역을 만들어 줄 때 |
| <dl> | 리스트 만들 때 |
| <dt> | 리스트의 중 큰 타이틀 |
| <em> | 강조하기 위해 약간 기울어진 텍스트 만들어줌 |
| <embed> | 외부 어플리케이션을 삽입하기 위한 태그 |
| <fieldset> | 폼안에서 서로 관련된 요소들의 그룹 |
| <figcaption> | <figure> 태그 안에서 컨텐츠의 표제를 넣기 위한 태그 |
| <figure> | 컨텐츠를 포함하는 태그, 보통 이미지, 다이어그램 등이 넣어진다. |
| <font> | * HTML5에서는 지원 안됨 CSS를 활용하자 |
| <footer> | 문서의 하단 섹션 |
| <form> | 사용자에게 입력 받는 폼을 만드는 태그 |
| <frame> | * HTML5에서는 지원 안됨 문서를 나누는 틀 |
| <frameset> | * HTML5에서는 지원 안됨 문서를 나누는 틀들을 정의해 주는 것 |
| <h1> to <h6> | 문단의 헤드라인 글자 크기 지정 |
| <head> | 문서의 메타 정보들을 알려주는 태그, 페이지의 제목, 설명, 외부에서 불러오는 파일 링크 등 페이지 정보를 적는다. <head> 태그 안 정보는 브라우저에 표시되지 않는다. |
| <header> | 문서나 섹션의 문두, 소개성 부분을 알려주는 것 |
| <hr> | 컨텐츠를 나누어 주는 줄 |
| <html> | HTML 문서 정의, doctype 선언 후 <html>태그로 코드 전체를 감싼다. |
| <i> | 약간 기울어진 문자 표시 |
| <iframe> | 삽입하는 프레임 |
| <img> | 이미지를 삽입할 때. 속성 : src(이미지 파일 경로), alt(어떤 이미지인지 설명) <img src="img/cat.jpg" alt="고양이이미지"> |
| <input> | 폼에 항목들을 넣어줄 때 활용. 속성 : type(폼 형태), value(입력 칸에 있는 값), placeholder(input 태그가 빈 값일 때 표시되는 텍스트 설정) <input type="checkbox" value="checked" placeholder="체크해주세요"> |
| <ins> | 텍스트에 밑줄 그어지게 해줌. |
| <kbd> | 키보드 입력값을 보여주는 것 |
| <label> | <input> 태그의 항목을 표현해주는 태그 |
| <legend> | <fieldset> 태그의 표제, 범위를 나타내는 외각선이 그어진다. |
| <li> | 리스트 아이템 태그, <ol>순서로 숫자가 메겨지는 리스트, <ul> 순서 없이 dot 모양 앞에 있는 리스트의 항목이다. |
| <link> | 이 문서와 바깥 소스와의 연결을 알려주는 태그 보통 <head>태그 안에서 CSS 문서를 표시할 때 활용된다. |
| <main> | 말그대로 이 문서에서 메인이 되는 컨텐츠를 의미한다 |
| <map> | 이미지맵을 정의하기 위한 태그 |
| <mark> | 하이라이트 표시 되는 태그 |
| <meta> | HTML 문서에 대한 메타 데이터를 알려주는 태그, 태그의 이름 속성에 description을 적고, content 속성에 페이지 설명을 설정할 수 있다. 페이지 제목과 마찬가지로 검색엔진이나 sns에 공유할 때 설정한 설명이 표시된다. <meta charset="UTF-8">은 문자 인코딩 방식을 설정한 것임. 지정하지 않으면 글자가 깨지는 현상이 발생할 수 있다. |
| <meter> | 범위 안에서 측정값을 보여주는 태그 |
| <nav> | 네비게이션 링크를 알려주는 태그 |
| <noframes> | * HTML5에서는 지원 안됨 <frame>이 지원되지 않는 브라우저에서 이 태그를 이용하여 지원되지 않는다는 문구를 넣어주면, 아무것도 나오지 않는 화면 대신 사용자에게 친절하게 설명할 수 있도록 하는 태그 |
| <noscript> | 자바스크립트가 적용되지 않는 브라우저 사용자를 위한 친절한 설명을 붙일 수 있는 태그 |
| <object> | 외부 어플리케이션을 적용할 수 있도록 하는 태그 |
| <ol> | 순서가 정해져 있는 리스트, <li> 태그를 써서 리스트 항목을 보여주고 앞에 숫자가 붙는다. |
| <optgroup> | 드롭다운 리스트에서 연관된 것끼리 그룹을 만들어 주는 것 |
| <option> | 드롭다운 리스트에서 선택 항목 |
| <output> | 계산의 결과를 보여주는 태그 |
| <p> | 단락 태그 |
| <param> | <object> 태그에서 여러 파라미터들을 정의해주는 태그 |
| <picture> | 여러 이미지 소스들을 담아두는 태그 |
| <pre> | 이 태그 안에 넣은 텍스트는 포맷이 고정되서 보여질 수 있다. |
| <progress> | 일의 진행상황을 바로 보여주는 태그 |
| <q> | 인용 문구에 따옴표를 쳐준다 |
| <rp> | 한자나 일본어에 위에 그려지는 특수 문자가 안보여질 때 보여줄 것을 넣은 태그 |
| <rt> | 한자나 일본어의 발음이나 설명을 위에 올려지는 문자 등으로 표현할 때 활용 태그 |
| <ruby> | 한자나 일본어에 위에 그려지는 특수 문자 |
| <s> | 텍스트에 가운데 줄 그어짐 |
| <samp> | 컴퓨터의 샘플 폰트 등을 보여줄 때 |
| <script> | 자바스크립트를 넣어줄 때 활용하는 태그 |
| <section> | 문서의 섹션을 정의하는 태그 |
| <select> | 폼에서 드롭다운 리스트를 만들기 위한 태그 |
| <small> | 텍스트를 좀 더 작게 보여준다. |
| <source> | <video> 나 <audio> 태그에서 보여지는 소스를 정의해 주는 태그 |
| <span> | 문서 안에서의 섹션(가로로 쭈욱 연결된다) |
| <strike> | * HTML5에서는 지원 안됨 <del> 나 <s> 태그를 활용하자. 문자의 중간 라인 긋기 |
| <strong> | 문자를 굻게 강조해주는 태그 |
| <style> | 스타일에 대한 정의를 해주는 태그 |
| <sub> | 텍스트를 아래로 내려 쓰기 (아래첨자) |
| <summary> | <details> 안에서 요약 태그, 이 요약만 보여지고 더 상세한 내용을 사용자가 숨기거나 볼 수 있다. |
| <sup> | 텍스트를 위로 올려 쓰기(위첨자) |
| <svg> | 여러 그래픽들을 포함하고 있는 태그 |
| <table> | 테이블 |
| <tbody> | 테이블 안에서 컨텐츠의 덩어리 |
| <td> | 테이블의 하나의 셀 표현 |
| <template> | 페이지가 열렸을 때 바로 보이지 않도록 숨겨놓은 컨텐츠를 담고 있다. |
| <textarea> | 폼에서 여러 줄의 텍스트 박스 |
| <tfoot> | 테이블 안에서 컨텐츠의 하단. |
| <th> | 테이블 안에서 헤더 |
| <thead> | 테이블의 헤더 내용. |
| <time> | 기계가 읽을 수 있도록 이 내용은 시간을 나타낸다는 것을 알려주는 태그 |
| <title> | 문서의 제목을 나타내 주는 태그 |
| <tr> | 테이블에서 줄의 단위 태그 |
| <track> | <video>와 <audio>에서 VTT 확장자 파일을 담는 태그 |
| <tt> | * HTML5에서는 지원 안됨 CSS를 활용하자. 타자기 텍스트를 정의해준다. 간격이 일관적인 글꼴 정의 |
| <u> | 밑줄 긋기 |
| <ul> | 순서가 없는 리스트 |
| <var> | 변수를 정의해주는 태그 |
| <video> | 비디오 컨텐츠를 구현해주는 태그 |
| <wbr> | 라인을 나누어 준다(단어가 너무 길었을 때 엉뚱한 곳에서 라인이 나눠지는 것을 방지하기 위해) |
'Studying IT' 카테고리의 다른 글
| 포토샵 가격택 만들기 (0) | 2020.08.22 |
|---|---|
| 포토샵 빈티지 우표 만들기 (0) | 2020.08.21 |
| windows 10 드라이브 최적화(드라이브 조각모음) (0) | 2020.07.27 |
| HTML form 태그 html5 (0) | 2020.07.27 |
| HTML 폴리필(ployfill)이란? (0) | 2020.07.24 |
댓글