HTML Basic
HTML이란
HTML(HyperText Markup Language) : 웹에서 자유롭게 오갈 수 있는 웹문서를 만드는 언어.
웹표준 : 웹 사이트를 만들 때 지켜야 할 약속들을 정리한 것.
일반 사용자는 장소와 브라우저에 상관없이 쉽게 웹사이트를 볼 수 있음.
웹 개발자와 디자이너는 시간을 절약.
HTML5 & CSS3( 표준안명세 )
최신 웹 표준에 맞는 웹사이트 제작
앱 화면을 디자인을 위한 기초
인터랙티브한 사이트를 만들 수 있음. (사용자들의 동작에 곧바로 반응하는)
소스를 이해해 웹 사이트와 블로그 수정이 쉬움.
웹 브라우저와 웹 편집기
웹 브라우저 : 웹 사이트를 둘러볼 때 사용하는 프로그램, 웹 편집기로 작성한 웹 문서를 화면에 표시
| 브라우저 | 제조업체 | 특징 | |--------|--------| | 크롬 | 구글 | HTML5 표준에 가장 발 빠르게 대응하고 있어 최근에 가장 많이 사용| | 파이어폭스 | 모질라 | 개발자들이 자주 사용하는 웹 브라우저 , 개발 도구와 부가 기능이 뛰어남| | 인터넷 익스플로러 | 마이크로소프트 | 국내에서 많이 사용, HTML5에 대한 지원 취약, IE11이후 개발 되지 않고 있음.| | 엣지 | 마이크로소프트| IE대신 HTML5를 지원하기 위해 새로 개발. 윈도우 10에서 기본으로 사용하는 웹 브라우지|
[HTML5test.com] : 웹 브라우저가 HTML5를 얼마나 지원하는지 알 수 있음.
HTML 기본 문서 구조
태그(tag) : 마크업 할 때 사용하는 약속된 표기법
<
,>
을 이용해 구분 ex)<p>
,<img>
소문자로 쓴다.
<p>
여는 태그와</p>
닫는 태그를 정확히 입력 cf)<img>
,<br>
처럼 닫는 태그가 없는 경우도 있음.적당히 들여쓴다. (여러번 띄어쓰기를 해도 한 칸의 공백으로 인식)
속성과 함께 사용할 수 있다.
포함관계를 명확히 한다.(한 태그 안에 다른 태그를 포함 할 수 있음.)
HTML기본 구조
<!DOCTYPE>
: 문서 유형을 지정DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의한다.
웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석방식으로 구조화를 하면되는지 알려주며, HTML은 크기 1, 2, 3, 4, X-, 5 버전이 있다.
현재 표준 모드는 HTML5이다.
<html></html>
: 웹 문서 시작을 알림html 태그 내부의 내용만 브라우저에서 인식하고, 검색엔진에서 사용할 수 있다.
lang은 어떤 언어를 사용하는 것인지 명시할 수 있으며, 검색 사이트에서 특정 언어로 제한해 검색할 때 대상이된다.
<head></head>
: 브라우저에게 정보를 주는 태그 (화면에 보이지 않지만 웹 브라우저가 알아야 할 정보들을 모두 입력한다.)<title></title>
: 문서 제목 (즐겨찾기 추가시 title태그 안의 내용으로 추가되며, Tab상단에 타이틀로 노출된다.)<meta>
: 문자 인코딩 및 문서 키워드, 요약 정보charset : 문자 인코딩되는 방식 설정
EUC-KR : 완성형 ex) 정 다 혜
UTF-8: 조합형 ex) ㅈ ㅓ ㅇ ㄷ ㅏ ㅎ ㅖ
content :
http-equiv
와name
특성값을 담는다.
<link>
: 외부 문서 가져오는 태그href : 링크된 리소스의 절대/상대적 경로
hreflnag :링크된 리소스의 언어이며 언어가 다른 경우에만 사용하면 된다. 일반적으로는 생략
rel : 링크와 문서의 관계 ( stylesheet, icon 등)
<style>
: 내부 스타일 시트 정의 웹 문서 안에서 사용할 스타일body 태그 내부에도 작성해도 무관하나,
<head></head>
내부에서 정의하는 것이 좋다.
mime type : MDN MIME type 에서 명시적으로 type을 선언해줘야하는 경우에 종류를 확인할 수 있다.
<base>
: 문서 안의 모든 상대 URL이 사용할 기준을 정하며, 문서에 하나의<base>
요소만 존재한다.default값은 location.href이다.
<body></body>
: 실제 브라우저에 표시될 내용
특수 문자 및 특수 기호 사용하기
웹 문서 살펴 보기
서버컴퓨터에 웹 문서를 옮겨야 다른 사람이 볼 수 있다. 닷홈[무료 호스팅 서비스]
FTP(File Transfer Protocol) : 서버와 클라이언트간에 파일을 주고 받을 수 있게 해주는 파일 전송 프로토콜 [FileZilla]
위지위그 편집기(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다
참고
Last updated