티스토리 뷰

배우는 여자

HTML5 공부 시작, HTML5의 기본내용 정리

날랄 2017. 9. 24. 14:30

작년인가부터 문득 HTML에 관심이 생겨서 공부해봐야겠다고 인터넷 강의를 신청했는데 한 달 과정을 꼭 반 정도밖에 못 듣고 끝나버려서 같은 강의를 세 번째 신청했다. 이번에도 하나도 기억이 안 나기 때문에 처음부터 듣고 있는데 추석 연휴가 겹쳐있기에 마음은 불안하지만 이번이 이 수업을 들을 수 있는 마지막 기회이기에 꼭 끝까지 듣고 싶다.

수업은 HTML5의 역사 이야기부터 시작되는데 내가 이해하기로는 웹 브라우저를 독점하려는 회사들의 이권 다툼 및 사용자 요구나 편의 따위는 생각하지 않은 개발방향에 의한 불만점들을 해결하고자 새롭게 탄생된 것 같다. 사용자의 편의를 고려하여 여러 문법들이 간단해지고 가독성도 높게 개발 되었다.

○ HTML - Hyper Text Markup Language

  - 웹용 콘텐츠의 구조를 지정하는 컴퓨터 언어. 웹서버에 저장되며 클라이언트 웹 브라우저에 읽혀지고 해석되어 화면에 보여진다.


○ 특징

  - 기존 HTML과의 호환성 유지

  - 실용적 설계: 느슨한 문법 (대소문자 구별 안함), 효율적인 추가 요소, 안전한 보안

  - 표현과 내용의 완벽한 분리

  - 플러그인 없이 각종 미디어 처리 및 동적인 작동 : 캔버스

  - 최신 웹 기술 수용: 지오로케이션, 웹소켓, 웹스토리지, 웹워커 등

마크업 언어라는 것이 중요한 의미가 있는 것 같은데 의미를 검색해서 읽어보아도 아직 이해가 잘 되지 않는다. 데이터의 구조 등을 나타내기 위해서 규칙 등을 정의한 언어라고 한다. 뭐 section을 나누고 제목이 무엇이고 등등을 표현하기 위해서 똑같이 약속한 명령어라는 의미일까?

특징도 모두 이해가 되지는 않지만 동적인 작동을 플러그인 없이 처리한다는 부분은 경험해본 적이 있다. 예전에는 인터넷으로 동영상 배너 등을 보려면 실버라이트나 어도비 플래시 플러그인 같은 것들을 설치해야 했는데 어느순간부터 그런 것들을 설치하지 않아도 원활하게 동영상을 볼 수 있었던 건 HTML5 덕분인가보다.


○ Doctype 지정하기

  - 여러 버전이 존재하므로 Doctype을 명시해야한다. (예시, <!DOCTYPE html>)


○ 작성규칙

  - 마크업 명령은 요소라 부른다.

  - 대소문자 구분 하지 않는다.

  - 콘텐츠와 구분을 위해서 꺽쇠로 둘러싼다. (태그, 예시 <p>, <a>, <div>)

  - 시작태그와 마침태그로 요소의 범위를 지정한다. (예시, <p> </p>)

  - 마침태그가 없이 단독으로 사용되는 요소도 있다. 빈요소 (empty elements). (예시, <br>, <img>, <meta> 등)

  - 요소의 속성은 속성명 = "속성값" 형식으로 기술한다.

블로그를 내 구미에 맞게 고쳐보겠다고 HTML/CSS 수정으로 들어가면 이러한 형식을 매우 많이 볼 수 있기 때문에 슥 듣고 지나갈 수 있었다. 역시 공부는 실제로 겪어보면서 해야 더 피부에 와닿고 흥미롭게 다가오는 것 같다. Doctype은 html5 라고 하지 않고 그냥 html 이라고 쓰면 된다.

가장 기본적인 구조는 아래와 같다.

<!Doctype html>

<html>

<head>

</head>

<body>

</body>

</html>


<html>은 HTML 코드 전체를 감싼다.

<head>와 <body> 부분으로 나뉜다.

<head>는 메타데이터와 스크립트, CSS등이 위치한다.

<body>부분은 콘텐츠가 담기는 곳으로 웹 브라우저에 표시된다.

보통 head 부분에는 웹 브라우저에 표시되지 않는 정보 등을 집어넣는다. 표시되는 내용을 넣어도 되지만 그럴 필요가 없다고 한다.



○ HEAD 설정

  - 타이틀 지정 (웹 브라우저 타이틀에 나타난다.) (예시, <tilte> </title>)

  - 문자 인코딩

사용하는 텍스트 에디터의 문자 인코딩과 HTML의 문자 인코딩과 동일해야 웹 브라우저에서 올바르게 표시된다.

유니코드인 UTF-8 로 지정한다. (예시, <meta charset="utf-8">)

  - 메타데이터

메타데이터를 기술 하면 웹 검색에 유리하다.

HTML에 대한 정보를 기록할 수 있다. (예시, <meta name="description" content="HTML5 학습콘텐츠">)

"author", "copyright", "reply-to", "date"

문자 인코딩을 명시하지 않으면 기본 설정과 내가 인코딩한 문자 형식이 다를경우 이상한 문자로 표시될 수 있다. 가끔 네모와 한자 및 이상한 문자들로 표시된 페이지를 볼 수 있는데 이게 문자 인코딩 방식이 다를 때 일어날 수 있는 일이다.


○ 외부파일 연결

  - HTML과 함께 사용되는 CSS와 자바스크립트는 다른 파일로 분리함이 원칙이다.

  - 외부 CSS 파일 연결

<link rel="stylesheet" href="css/style.css">

  - 외부 자바스크립트 파일 연결

<script src="js/script.js"></script>

웹 브라우저를 구성하는 것으로는 HTML 뿐 아니라 CSS와 자바스크립트도 있는데 이 두 파일은 다른 파일로 분리하는 것이 나중에 수정할 때에도 편리하다. 특히 자주 사용된 디자인이나 형식을 수정하고자 할 때, CSS를 분리해 놓으면 한 번만 수정하면 되므로 효율적이고 코드양이 길어지거나 수정할 부분을 빠트리는 일 등이 발생할 확률도 줄어들게 된다. 최악의 버그는 복사/붙여넣기에서 발생한다는 말이 있는 것을 보면 html에서 편리하고 똑똑하게 잘 분리해 놓은 것 같다.

이제 시작이다. 아자아자 화이팅!!


저작자표시

'배우는 여자' 카테고리의 다른 글

2016 연말정산 주요 개정사항  (0) 2017.01.18
아오 연말정산!! 뽀개버리겠다!  (2) 2017.01.18
댓글