HTML 그리고 관련내용
태그https://beautifier.io/ 한 줄로 된 HTML, CSS, javascript 코드를 가독성있게 정리해줌.
코딩에 대한 내용을 위주로 적지 않은 지식들을 무료로 강의해주는 생활코딩 사이트를 비롯한 많은 곳에서 HTML에 대한 내용을 얼마든지 찾을 수 있을 것이다.
HTML : Hyper Text Markup Language 웹페이지를 위한 지배적인 마크업 언어[태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어]이다.
HTML은 '< >' 꺽쇠괄호로 둘러싸인 태그로 되어있는 HTML 요소 형태를 띤다.
웹브라우저와 같이 HTML 처리 장치의 행동에 영향을 주는 javascript, 본문이나 기타 항목의 외관과 배치를 정의하는 CSS와 같은 스크립트를 포함할 수 있고 불러 올 수도 있다.
HTML5는 HTML의 5번째 버전인데 비디오, 오디오등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 ActiveX 없이 쉽게 볼 수 있게 하는 것을 목적으로 한다.
W3C(World Wide Web, www, 또는 W3)는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 팀 버너스 리 Tim Berners-Lee를 중심으로 1994년 10월에 설립되었다. W3C는 회원기구, 정직원 공공기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄이다. W3C가 제정한 WWW 관련 표준 목록을 한 번 보자.
CSS: Cascading Style Sheets 종속형 시트 또는 캐스케이딩 스타일 시트. 마크업 언어가 실제 표시되는 방법을 기술하는 언어.
CGI: Common Gateway Interface 웹 서버 상에서 사용자 프로그램을 동작시키기 위한 조합
DOM: Document Object Model 문서 객체 모델. 객체 지향 모델로써 구조화된 문서를 표현하는 형식
HTML: 이 글에서 다룰 내용
RDF: Resource Description Framework 자원 기술 프레임워크. 웹상의 자원의 정보를 표현하기 위한 규격
SVG: Scalable Vector Graphics 스케일러블 벡터 그래픽스. 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식
SOAP: Simple Object Access Protocol 일반적으로 널리 알려진 HTTP, HTTPS, SMTP 등을 통해 XML 기반의 메세지를 컴퓨터 네트워크 상에서 교환하는 프로토콜
SMIL: Synchronized Multimedia Integration Language 멀티미디어 데이터를 XML을 이용하여 시•공간적으로 배치•제어하기 위한 프레젠테이션 언어
WSDL: Web Services Description Language 웹서비스 기술언어 또는 기술된 정의 파일의 총칭으로 XML로 기술됨
XHTML: Extensible Hypertext Markup Language HTML과 동등한 표현 능력을 지닌 마크업 언어. HTML보다 엄격한 문법을 가짐
XML: Extensible Markup Language 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어, SGML의 단순한 부분집합
XPath: XML Path Language 확장 생성 언어 문서의 구조를 통해 경로 위에 지정한 구문을 사용하여 항목을 배치하고 처리하는 방법을 기술하는 언어
XQuery: XML Query 일반적으로 XML, 텍스트, 벤더 특정 확장 데이터 포맷(JSON, 바이너리 등)으로 되어 있는, 정형, 비정형 데이터를 질의하고 변환하는 질의, 함수 형 프로그래밍 언어
XSLT: Extensible Stylesheet Language Transformations XML 문서를 다른 XML 문서로 변환하는데 사용하는 XML 기반 언어
HTML 요소
HTML 요소의 일반적인 형태는 이렇다. 꺽쇠괄호안의 태그이름으로 시작하고 같은 방법으로 종료태크를 마지막에 쓰는데 종료태그에서는 태그이름앞에 슬래시(/)를 붙인다.
<tab>내용</tag>
시작태그에서는 꺽쇠괄호안 태그이름 뒤에 속성="속성값" 의 형태로 속성값을 설정해줄 수 있다. 가장 보편적인 형태는 이렇다.
<tag attribute1="value1" attribute2="value2"> 내용 </tag>
HTML파일의 일반적인 모양새는 <head> 태그로 된 머리글과 <body> 태그로 된 바디가 있고 그 전체가 <html>태그로 둘러싸여 있다.
머리글의 내용은 웹페이지에 보여지지는 않으며 title, meta, link, script 태그로 이루어진다. <!DOCTYPE html> 은 문서의 버전에 관한 정보이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>문서의 제목</title>
</head>
<body>
실제 보여지는 내용
</body>
</html>
<title>태그의 내용은 웹페이지 창의 상단에 노출되고, 검색 엔진도 참고하는 내용이기 때문에 페이지의 성격에 맞게 잘 선정하는 것이 좋다.
여기서 710만개의 인덱스 페이지에 대해 분석한 구글데이터를 확인 할 수 있는데 가장 빈도수가 높은 28개의 HTML 요소 element는 다음과 같다. [2019.1.11 현재]
<html> <head> <body> <title> <meta>
<div> <a> <script> <link> <img> <span> <p> <li> <ul> <style>
<br> <h1> <h2> <input> <form> <h3> <nav> <header> <footer> <iframe>
<strong> <button> <i>
태그https://html.com/tags/ 이 사이트에서 HTML 태그에 대해 원하는 내용들을 얻을 수 있다. 태그는 워낙 그 내용이 방대하기 때문에 여기서는 자주 쓰이는 것들만 몇가지 정리하고자 한다.
<meta> <div&span> <a> <script> <link> <image> <p> 주석&특수문자 <list> <style> <input> <form> <iframe> 기울기, 강조, 밑줄
<meta>: 인코딩 정보와 해당 문서에 대한 요약 정보를 담을 수 있다. 특이하게 닫는 태그가 없다. 이런 식이다.
<meta charset="UTF-8"> 한글이 깨지지 않고 나타난다
<meta name="정보이름" content="정보의 내용">
<meta name="birthday" content="1943-12-13"><div>: 내용이 놓이게 되는 블록을 원하는 대로 정의하고 스타일링 되는 단위이기도 하다.
<span>: <div>와 매우 유사해보이지만 <div>는 순수하게 스타일하기 위한 목적이지만 <span> 은 내용을 묶어주는 역할을 한다.
div 는 가로폭을 전부 차지하죠
span 은 태그안의 내용에만 영향을 주죠 |
<div>는 필연적으로 줄바꿈이 동반되고, <span>은 줄바꿈이 없고 문장의 중간에도 들어간다.
<a>: anchor 요소, 다른 웹페이지로 연결하는 하이퍼링크를 생성한다.
<a href="링크주소"> 표시할 내용 </a>링크로 사용할 텍스트나 이미지를 <a>태그 안에 넣고 href(hypertext reference)속성에 링크주소를 지정한다.
href="#"은 null link 널 링크이며 실제 링크값이 없다는 의미.
target 속성을 이용하여 새로 열리는 페이지가 어디서 열릴지를 지정할 수 있다.
| _blank | 새로운 탭 or 창 |
| _self | 현재 탭 or 창 |
| _parent | 현재 화면을 불러낸 부모 탭 or 창, 없으면 현재 탭 or 창 |
| _top | 최상위 탭 or 창, 없으면 현재 탭 or 창 |
title : 링크의 툴팁 내용(커서를 올렸을 때 나오는 설명)
예시 <a href="youtube.com" title="유튜브로 이동" target="_top">name: 같은 페이지 안에서 이동할 때 사용
페이지내에서 이동하고 싶은 위치마다 id 속성을 이용하여 앵커를 만든다(각각 다른 이름으로 지정해야 함.)
<a name="앵커이름"></a>
이름 붙여놓은 앵커들을 다시 <a>의 href 속성으로 연결.
<a href="#앵커이름">내용</a>
다른 페이지의 특정위치로 갈때
<a href="링크주소#앵커이름">내용</a>
맨 위로 올라가게 해주는 링크
<a name="처음"></a> 맨 처음에 써주고
<p align="right"><a href="#처음">TOP</a></p> 필요한 위치마다 삽입한다
<script>: javascript코드를 넣을 때 사용.
<script>태그안에 직접 javascript 코들를 작성할 수 도 있고, 외부의 스크립트 파일을 불러올 수도 있다.
<script type="text/javascript">
//코드내용
</script>
<script type="text/javascript" src="링크주소"></script>
HTML5에서는 type="text/javascript"를 생략해도 된다.
또한 스크립트의 배치는 문서의 어디든 상관이 없다.
스크립트가 매우 간단하거나, 해당 문서에만 해당된다거나, 초기화 등의 경우에 직접 코드를 써준다.
반복 사용되는 코드들을 파일별로 저장해두고 필요에 따라 링크에 따라 사용할 수 있는데 이런 방식은
코드의 가독성이 좋고 실행순서, 의존성들을 확인하기가 수월하여 추천되는 방식이다.<link>: 외부파일 연결 시 사용한다. 주로 CSS파일 같은 스타일시트 파일을 연결하거나, 웹폰트를 사용할 때 폰트가 있는 주소로 연결 시킬 수 도 있다. <meta> 태그처럼 닫는 태그가 없다. <head>태그사이에 위치하며 여러개 올 수도 있다.
<link rel="stylesheet" type="text/css" href="sample.css" />
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' />
<link rel="stylesheet" type="text/css" href="sample.css">
rel 의 속성값
stlyesheet: 스타일시트로 연결할 때
alternate: 문서의 대안 버전(프린트나 번역 사이트)으로 연결 시
author: 저작자와 연결 시
help: 도움말로 연결 시
license: 문서의 저작권 정보로 연결할 때
search: 검색 도구로 연결할 때
CSS 사용할 때 <link>와 함께 <style> 태그도 쓴다
<link>는 외부 css파일을 연결하지만, <style>태그는 CSS 설정을 같은 웹페이지 안에서 정의할 때 사용한다.
참고 https://aboooks.tistory.com/147
<img>: 웹페이지 안에 이미지를 삽입한다.
<img src="이미지 경로">* img의 속성
| width | 너비 |
| height | 높이 |
| alt | 이미지를 설명해 주는 대체 텍스트 추가 |
| title | 툴팁(커서를 올렸을 때 나오는 팁) |
| usemap | 이미지 맵(하나의 이미지에 여러 개의 링크를 만들 수 있음) |
<p>: paragraph 단락이 생긴다.
<p>단락1</p>
<p>단락2</p>
<br> 줄 바꿈. 단순 줄바꿈이지만 <p>는 단락으로 페이지를 구분한다.
<code><p>이것은 <br /> 줄바꿈을 <br /> 포함하는 <br /> 단락이다. </p></code>
주석사용
주석사용: 웹페이지에는 표시되지 않는다
<!-- 설명 --> html에서
/* 설명 */ css에서
특수문자: HTML에서 공백은 코딩시에 여러 개 넣어주더라도 하나만 표시 되는데 공백을 여러 개 표시해주려면 문자엔터티 character entity를 사용해야 한다. 문자 엔터티는 2가지 방법으로 사용하는데 다음과 같다: &엔터티이름; 또는 &엔터티번호;
| 표시 | 설명 | 엔터티이름 | 엔터티번호 |
| 공백(space) | |   | |
| < | 보다 작은 | < | < |
| = | 등호 | = | |
| > | 보다 큰 | > | > |
| & | 앰퍼샌드 | & | & |
| ¢ | 센트 | ¢ | ¢ |
| £ | 파운드 | £ | £ |
| ¥ | 엔 | ¥ | ¥ |
| € | 유로 | € | € |
| © | 저작권 | © | © |
| ® | 등록상표 | ® | ® |
HTML이 지원하는 UTF-8 수학기호들 https://www.w3schools.com/charsets/ref_utf_math.asp
HTML이 지원하는 UTF-8 그리스어알파벳 https://www.w3schools.com/charsets/ref_utf_greek.asp
HTML이 지원하는 UTF-8 화살표기호들 https://www.w3schools.com/charsets/ref_utf_arrows.asp
HTML이 지원하는 UTF-8 화폐기호들 https://www.w3schools.com/charsets/ref_utf_currency.asp
<li><ol><ul>: <li>태그는 <ul>과 <ol>안에서 목록을 나열할 때 사용.
| <ul> | <ol> |
|
<ul> <li> 내용 </li> <li> 내용 </li> </ul> |
<ol [속성="속성 값"]> <li> 내용 </li> <li> 내용 </li> </ol> |
<ul>: unordered list, 순서가 없는 목록
<ol>: olordered list, 순서가 있는 목록
<ul>과 달리 사용할 수 있는 속성들이 몇 가지 있다.
• type
| 키워드 | 설명 |
| 1 | 숫자(default) |
| a | 영어 소문자 |
| A | 영어 대문자 |
| i | 로마숫자 소문자 |
| I | 로마숫자 대문자 |
• start : 중간부터 시작해야 할 때 이 속성을 사용한다.
• reversed : 역순으로 할 때 사용한다.
disc
circle
square
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none
dash
|
<style>: 웹문서의 디자인을 변경한다.
스타일을 적용코자 하는 태그를 선택자라고 하면 <style>태그에 들어갈 스타일의 형식은 이렇다.
선택자{속성:값;}
예시
p{color:black;}
p, h1{color:blue;} 여러 개의 선택자도 적용 가능함
클래스{속성: 값;} 클래스에 적용할 수도
#아이디이름{속성: 값;} id 이름에 스타일을 적용할 수도
스타일은 <head> 태그 사이에 넣어도 되고 CSS 파일을 따로 만들어 적용하거나 태그에 직접 할 수 도 있다.
<input>: 사용자가 데이터를 입력할 수 있는 input 필드를 규정하는데, <form> 태그와 함께 쓴다.
https://www.w3schools.com/tags/tag_input.asp
|
위의 예시는 2 개의 텍스트 입력필드와 1 개의 제줄 submit 버튼을 가지고 있다. type 속성의 값이 "text"와 "submit"이다.
type 속성은 데이터를 받는 형식을 지정하는데 위의 2가지[text, submit] 외에도 다음과 같은 것들이 있다.
buttoen, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week
여러 가지 속성이 있으며 속성값은 다음과 같이 지정한다.
<input 속성1="속성값1" 속성1="속성값1">| 속성 | 가질 수 있는 속성 값 | 설명 |
| accept | file_extension audio/* video/* image/* media_type |
type="file" 인 경우에만 해당되는데 파일 입력 대화상자에서 사용자가 어떤 형식의 파일을 고를 수 있는 지를 지정 |
| align | left right top middle bottom |
HTML5에서는 지원하지 않음. type="image"인 경우에만 해당되며, 이미지의 정렬을 지정 |
| alt | text | type="image"인 경우에만 해당되며 이미지를 대체할 텍스트 |
| autocomplete | on off |
<input>요소가 자동완성이 가능한지를 지정 |
| autofocus | autofocus | 페이지가 로딩되었을 때 <input> 요소가 자동으로 커서를 갖게 되는지를 지정 |
| checked | checked | type="checkbox" 혹은 type="radio" 일 때에 해당. 페이지 로딩 시 <input>요소가 사전에 선택됨 |
| dirname | name속성값.dir | 입력필드의 텍스트 방향을 저장할 이름을 명시 |
| disabled | disabled | <input> 요소 사용불가 |
| form | form_id | <input> 요소가 속한 폼을 지정 |
| formaction | URL | 폼이 제출될 때 입력제어를 처리하게 될 파일의 URL(type="submit" 과 type="image" 일 때 해당됨) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
폼 데이터를 서버에 제출할 때 어떻게 인코딩하는지를 지정(type="submit" 과 type="image"에 해당됨) |
| formmethod | get post |
action URL로 데이터를 전송하기 위한 HTTP 메소드를 정의함(type="submit" 과 type="image"에 해당됨) |
| formnovalidate | formnavalidate | 폼 요소가 제출될 때 유효하지 않다는 것을 정의함 |
| formtarget | _blank _self _parent _top framename |
폼을 제출한 후에 받게 되는 응답을 어디에 표시할 지를 지정(type="submit"과 type="image"에 해당됨) |
| height | pixels | <input> 요소의 높이를 지정(type="image"일 때에만) |
| list | datalist_id | <datalist> 요소에서 참조할 수 있도록 미리 정의해줌 |
| max | number date |
<input> 요소에 대한 최대값 |
| maxlength | number | <input> 요소에서 허용되는 문자들의 최대 수 |
| min | number date |
<input> 요소에 대한 최소값 |
| multiple | multiple | <input> 요소에 1 개 이상의 값이 들어갈 수 있음 |
| name | text | <input> 요소의 이름 |
| pattern | regexp | input 요소 값을 확인하는 정규식[javascript 정규식] |
| placeholder | text | input 값으로 어떤 내용을 입력할지를 알려주는 짧은 힌트 내용. 예를 들어 "좋아하는 음악을 입력하세요" |
| readonly | readonly | 읽기 전용 필드 |
| required | required | 필수 입력 필드 |
| size | number | <input> 요소의 문자너비 |
| src | URL | 제출 버튼으로 사용할 이미지의 URL(type="image"일 때) |
| step | number any |
필드에 입력할 수값의 간격. 에을 들어 4이면 0, 4, 8 등 4의 배수만 유효함 |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
<input> 요소의 형식 color: 색상표 file: 파일을 첨부할 수 있는 버튼 hidden: 사용자에게는 보이지 않는 서버로 보내는 값 image: submit 버튼의 이미지 number: 숫자를 조절할 수 있는 화살표 radio: 라디오 버튼(1 개만 선택가능) range: 숫자를 조절할 수 있는 막대 search: 검색상자 submit: 서버전송버튼 text: 텍스트를 입력할 수 있는 상자 |
| value | text | <input> 요소의 값 |
| width | pixels | (type="image"일 때) input 요소의 너비 |
<form>: 사용자 입력을 위한 폼을 생성 https://www.w3schools.com/tags/tag_form.asp
<form> 요소는 다음의 폼 요소들을 1 개 이상 가질 수 있다:
form의 요소(<input>등..)가 여러 개일 경우 <ul>을 이용해서 묶어주기도 한다.
<fieldset>을 사용해서 form 요소들을 보기 쉽게 그룹으로 묶어줄 수도 있다.
<legend>는 <fieldset>으로 나누어진 구역에 제목을 붙일 때 사용한다.(필수옵션은 아니다)
* Form 태그의 속성
| method | 전송 방식 선택 1) get : 256~4096 byte까지만 전송 가능 2) post : 입력 내용의 길이에 제한 X |
| name | form을 식별하기 위한 이름 |
| action | form을 전송할 서버 쪽의 script 파일을 지정 (action 속성을 이용하지 않고 onsubmit 이벤트를 이용해서 script로 처리할 수도 O) |
| target | action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정 |
<iframe>: 외부페이지 삽입 https://www.w3schools.com/tags/tag_iframe.asp
<iframe src="삽입할 주소" [속성="속성값"]> </iframe>
속성
width: 너비(픽셀)
height: 높이(픽셀)
name: 프레임의 이름
seamless: 테두리 없애기(값은 쓰지 않음)
src : 삽입할 주소