- 다음의 내용은 Doit HTML5 책 내용을 스터디 하면서 정리한 내용입니다.
- 제가 모르고 확인해야할 내용만 요약, 정리하였습니다. 즉, 중간중간 빠진내용이나 챕터가 상당히 많습니다.
- Doit HTML5 책은 웹 초보가 보기에 상당히 좋은 내용입니다.
- 정식으로 공부하실분은 정식으로 책을 구입하여 스터디 하시길 추천드립니다.
html 기초강좌 리스트 :
HTML 기본구조
태그, 이건 꼭 알아두세요.
HTML 태그는 대소문자를 구별하지 않지만 HTML5 표준 명세에서는 태그와 태그안에 사용하는 속성들은 모두 소문자로 사용할것을 권장한다.
<img src="xxx/xxx.jpg> -> o
<IMG src="xxx/xxx.jpg> -> x
태그는 속성과 함께 사용할 수 있다.
HTML 태그는 단순히 태그하나만 사용될 뿐 아니라 태그에 여러기능을 추가하는 속성과 함께사용된다.
<태그 속성="속성값" 속성="속성값" 속성="속성값" >
이때 각 태그에서 사용할 수 있는 속성들이 다르기 때문에 태그와 속성을 함께 익혀둬야 한다.
HTML 문서 기본 구조 살펴보기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>기본 HTML 문서</title>
</head>
<body>
<h1>시간이란..</h1>
<img src="images/watch.jpg">
<p>내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라.</p>
</body>
</html>
아무리 길더라도 html 은 다음의 네가지 태그를 이용해서 문서의 시작과 끝을 알린다.
아무리 길더라도 html 은 다음의 네가지 태그를 이용해서 문서의 시작과 끝을 알린다.
- <!doctype> - 문서유형을 지정하는 선언문
<html> ~ </html>- 웹문서의 시작과 끝을 나타냄<head> ~ </head>- 웹브라우저가 웹문서를 해석하기 위해 필요한 정보들을 입력, 여기에 있는 정보는 실제 문서 내용이 아니기 때문에 문서 제목만 브라우저 창에 표시되고 나머지는 웹브라우저 화면에 표시되지 않는다. 스타일 및 스크립트 등이 포함되기도 한다.<body> ~ </body>- 실제로 웹브라우저 화면에 나타낼 내용
<!doctype> - 문서유형지정
웹브라우저에게 이제부터 처리할 문서는 html 문서이고 어떤 유형을 사용했으니 그에 버젼에 맞는 방법으로 해석하라 라고 알려주는 것이다. 과거 html4 에서는 문서 유형이 여러가지 였고 문서유형을 지정하는 소스코드도 길었기 때문에 잘못 사용되거나 아예 문서유형을 사용하지 않는경우도 있었다. 하지만 html5 부터는 단 한줄로 문서 유형을 선언한다.
<!doctype html>
웹브라우저는 이 소스만 보고 html5에 맞춰서 문서 해석을 시작한다. html4 처럼 엄격모드(strict mode) 인지 호환모드(transitional mode) 인지 구분할 필요도 없다. html 5 에서는 현재 문서가 html 문서라는 점만 표기하는 것으로 문서 유형선언이 끝난다.
html4 / xhtml 의 문서 유형선언
- 엄격모드(strict mode) : html 4 표준문법을 정확히 따르는 문서를 작성한다면 엄격 모드로 지정한다. 이경우 html4 문법에 조금만 어긋나면 안되기 때문에 실수로 닫는 태그 하나라도 빠뜨리면 웹브라우저에서 오류를 일으킨다.
- 호환모드(transitional mode() : html4 표준문법을 조금 벗어나더라도 허용하는 모드다. 예를들면 닫는 태그를 빠뜨리더라도 웹 브라우저에서 오류를 일으키진 않는다.
- 프레임세트 모드(frameset mode) : 프레임세트란 웹 브라우저 화면을 분할해 한 화면에 여러문서를 동시에 표시하는 방법인데, 웹문서에서 프레임세트를 사용할경우 프레임세트 모드로 지정한다.
만약 위에서 설명한 형식에 맞게 문서 유형을 정의 하지 않았을 경우 어떤 브라우저에서도 문서를 표시할 수 있도록 하기 위해 매우 오래된 브라우저 버전(ie5.5) 에 맞게 기준을 내려 웹 문서를 인식한다. 이것을 관용모드(quirks mode) 라고 한다. 하지만 관용모드는 웹 표준이 고려되지 않은 유형이기 때문에 같은 소스코드라도 웹 브라우저 마다 다르게 해석되어 의도한것과 다른 결과를 낳는다.
웹문서 시작을 알리는 태그
문서 유형을 선언 한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
- 사용 언어 지정가능
- 두자리 국가별 언어코드는 ISO 63901 표준에 정해져있음
- 많이 쓰는 주요 국가별언어코드
- de (독일어) / en (영어) / fr (프랑스어) / ja (일본어) / ko (한국어) / zh (중국어)
언어를 명시하는 이유는?
- 검색 사이트에서 특정 언어로 제한해 검색할때 그 대상이 될수있다.
- 화면 낭독기에서 웹 문서를 소리내어 읽어줄때 언어가 명시되어있으면 그 언어에 맞게 tts를 다르게 설정할수있다.
html 태그 사이에는 문서 정보를 지정하는 head 태그와 실제 화면에 보이는 문서 내용을 입력하는 body 태그가 포함된다.
실제 브라우저에 표시될 내용
<head> - 브라우저에게 정보를 주는 태그
웹 브라우저 화면에는 보이지 않지만 웹브라우저가 알아야할 정보들은 모두 head 부분에 입력한다.
문서에서 사용할 외부 파일들도 이것에 링크한다.
head 내에서 사용하는 태그 : title
- head 태그 안에 쓰이는 대표적인 태그 :
<title> 문서제목 </title>- title 태그는 거의 모든 브라우저에서 제목으로 표시됨
- 즐겨찾기 시에도 title 내용으로
HEAD 내에서 사용하는 태그 : meta
meta 태그는 화면에 글자 표시인코딩 방법을 비롯해서 문서 키워드 등을 지정한다.
웹문서 정보를 검색엔진에게 전달해 주는데 매우 유용하게 사용된다.
<body> - 실제 브라우저에 표시될 내용
브라우저에 표시될 내용을 입력한다. h1 / p / br 태그 등 브라우저에서 실제 화면에 나타낼 내용을 작성한다.
특수기호 관련
기본적으로 공백이나 괄호같은 특수 문자들은 html 소스코드로 인식하게된다. 이때 소스코드로 인식하지 않고 화면에 그대로 표시하려고 할때 특수기호를 이용한다.