HTML 책 보면서 정리하는 -
◈ 뉴서울(NewSeoul) HTML 5 강좌 1 ◈
- 노트입니다. ~~~정말 요점만 콕콕 집어 정리했습니다.
~~ 기존의 HTML 언어를 사용해 본 경험이 있는 분이라면 본 글만 대충 읽어보시것만으로 본인의 HTML 기술을 쉽게 업그레이드 하실 수 있습니다. ~~
~~ 그리고 요점 정리글이기는 하지만, 친근함과 좀 더 쏙쏙 이해가 될 수 있도록 이야기 서술 형태로 글을 작성했습니다. ~~
~~ 마치 소설 책을 읽는 기분으로 읽어 내려가시면 어느샌가 공부가 끝납니다. 우와! ~~
(짬이 날 때마다 정리를 하므로, 계속해서 내용이 추가될 예정입니다. 오타나 틀린 부분이 발견되면 댓글로 남겨주세요. 보는 즉시 수정하겠습니다.)
HTML5는 기존의 HTML에서 다양한 멀티미디어 컨텐츠를 쉽게 추가할 수 있고, 좀 더 구조화된 웹 페이지를 제작할 수 있도록 기능이 보강된 버전입니다. HTML5를 이용해서 웹 이라는 환경의 한계를 뛰어넘어 응용프로그램 수준의 프로그래밍을 할 수 있습니다.
웹의 역사
초창기에 정적인 HTML에 활력을 줄 수 있었던 최초의 시도가 JavaScript (JS) 언어였다.
JS는 최초의 브라우저 내장형 클라이언트 기반 스크립트 언어로서 Netscape사에서 개발했다.
JS가 본래 HTML 요소는 아니었지만, 이제는 웹페이지 작성에 필수가 되었다.
※ 브라우저 시장 선점 경쟁 (Navigator vs. InternetExplorer)
한때 MS사와 Netscape사 간에 브라우저 경쟁이 심했던 시절이 있었다.
서로 더 뛰어난 특수 기능으로 개발자들을 유인해 시장을 장악하려 했던 것이다.
그러나 그 기대와 달리, 웹 개발자들은 호환성있는 기능 위주로 프로그램을 했고, 유사기능을 위한 대안을 찾아갔다. 왜냐하면 개발자들은 모든 브라우저 사용자들에게 같은 기능을 제공해야 했기 때문이다. 이 과정은 꽤 힘들었고 아직까지도 브라우저 호환 문제가 존재하는 이유이기도 하다.
유료였던 Netscape의 네비게이터 브라우저를 잡기위해 MS는 자사의 IE 브라우저를 무료로 배포했었는데,
결국 대응이 허접했던 Netscape사는 망하고 MS는 독점금지법에 걸려 유죄 판결을 받으며 브라우저 전쟁이 끝났다.
최근에는 웹에 대한 표준이 정해져있고 오늘날의 브라우저들은 웹 표준을 얼마나 준수하는 지를 두고 경쟁중이다.
* 'HTML5 문서 규격을 준수하는' --> 'standards-compliant HTML5'로 표현함
※ Plug-in
플러그인은 웹 브라우저에 설치되는 보조 모듈로서 HTML로 구현할 수 없는 고급 특수 기능들을 제공할 수 있었기에 한 때 인기가 많았었다. 플러그인 설치가 가능한 웹 브라우저에 플러그인을 설치만 하면 온갖 고급 기능들을 사용할 수 있었는데, 이것이 점차 그 플러그인을 담은 브라우저와 HTML은 껍데기 신세로 전락하는 계기가 됐다. 급기야 플러그인으로만 웹 페이지를 작성하면서 플러그인 제작사들 마다의 방식들이 웹 환경에 난무하게 됐다. 결국 웹 표준의 취지를 흩뜨리게 되는 폐단이 생겨난 것이었다. 때문에 브라우저 제작사들은 플러그인을 멀리하려는 경향을 보이고 있는데, 그 대표적인 것이 플래시다. 이에 최신의 HTML5는 그간 플러그인들의 기능을 브라우저에 직접 내장하는 방향으로 진화하고 있다.
한편, 표준을 만드는 것은 대단히 힘들고 오랜 시간을 요한다. 많은 이해 당사자들이 있으므로 많은 협의가 이뤄져야 하고 또 바뀐 내용이 시장에 반영되기 까지는 적잖은 시간이 지나야 하기 때문에 표준을 만드는 활동은 혁신적인 내용을 창조하기보다는 플러그인 업체의 유용한 기술을 표준으로 추가하기에 급급해 온 측면도 있다.
HTML 표준화 위원회는 W3C다. (World Wid Web Consortium)
※ 의미적 HTML
웹 페이지 상에서 중요한 주제를 bold체로 표현하면 인간은 그것이 중요하다고 곧바로 인식하지만, 기계가 탐색을 할 때에는 구분하기가 어렵다. 그래서 최근에는 중요한 주제들을 HTML 엘리먼트로 구분해서 작성하도록 하는 의미적 HTML 작성을 유도하고 있고 그에맞는 HTML 요소들을 제공하고 있다.
그러나 과거 버전의 호환성을 위해 일부 과도기적 혼란은 감수해야 한다.
한 예로, <b>는 이전까지 디자인적 역할만 가지고 있었지만, HTML5에서는 컨텐츠의 어떤 범위를 나타내는 역할을 한다. 보여지는 모습은 호환성을 위해 과거와 같이 볼드체로 표시된다.
HTML5에서 확장된 기능들
Canvas 태그
포토샵이나 플래시는 이미지 처리 기등들을 갖추고 있습니다. 예를 들어, 이미지에 크기 변환, 회전, 효과 등을 가할 수 있습니다. 캔버스 태그를 이용해서 이런 그래픽 기능들을 사용할 수 있습니다.
Video 태그
Video 태그를 이용하면 별도의 플러그인 프로그램을 설치하지 않아도 동영상 파일을 재생할 수 있습니다. 아울러 재생, 일시정지, 재생속도 조정, 위치 변경등도 조작할 수 있습니다. Youtube 서비스는 HTML5 의 Video 기능을 이용하는 대표적인 서비스 입니다.
Audio 태그
Audio 태그를 이용하면 별도의 플러그인 프로그램을 설치하지 않아도 사운드 파일을 재생할 수 있습니다.
대표적으로 위에 나열한 Canvas, Video, Audio 태그가 있습니다. 그 밖에도 대용량 데이터 처리, 위치 검색 서비스 등 고급 기능들이 추가되어 있습니다. 이들을 바탕으로 PC와ㅏ 모바일 환경 모두에서 실행이 될 수 있는 웹페이지 제작할 수 있습니다. 페이스북, 웹용 앵그리 버드 게임등은 HTML5과 CSS3를 함께 사용하여 구현되어 있습니다. 앵그리 버드 게임이 요구하는 애니메이션까지 가능하다는 말입니다. (참고로 앵그리 버드는 구글 크롬 웹브라우저가 제대로 지원합니다. ~)
※ 참고) CSS3에서 확장된 기능들
HTML5와 함께 CSS3를 사용하면 예전의 HTML 문서에서의 디자인 작업을 아주 간편하게 전환할 수 있습니다. 예를 들어, 배경 이미지를 넣은 웹 페이지가 확대되거나 축소될 때 배경 이미지도 커졌다가 작아졌다가 해야 합니다. 그러나 이런 기능에 대해 예전 버전에서는 대응하기 어렵습니다. 또 다른 웹 언어인 자바스크립트등을 활용해야 가능했습니다. 그러나 CSS3에서는 이런 동작을 쉽게 구현할 수 있습니다. 그 밖에도 다음과 같은 기능들을 사용할 수 있습니다.
ㆍ 박스나 글자에 그림자 효과 주기 (text-shadow, box-shadow)
ㆍ 일반 테두리나 이미지 테두리를 둥글게 만들기 (border-radius)
ㆍ 투명도 조절 (opacity)
ㆍ 그래디언트 효과(gradient)
ㆍ 도형의 회전, 변형, 애니메이션 효과
ㆍ 더욱 다양한 폰트 지원
ㆍ 다양한 크기의 화면을 갖는 각종 기기들을 지원(@media)
1. HTML 문서에 CSS 스타일 적용하기
HTML5 부터는 기존의 HTML 태그를 사용할 때에도 엄격한 규칙을 적용하고 있습니다. 단적인 예로서, 모든 태그에서의 스타일 속성을 태그 안에 정의할 수 없습니다. 가급적 모든 스타일은 CSS 문서에 별도로 작성할 것을 권장합니다. 즉, HTML 문서는 텍스트 위주로 문서의 구조만 담고, 디자인 정보는 모두 CSS 문서에 담도록 합니다. CSS 문서를 별도로 작성하면 웹 브라우저의 캐시 동작에 의해 클라이언트의 웹 페이지 로딩 속도가 더 개선되는 부수적인 효과도 얻을 수 있습니다.
방법 1) HTML 태그에 인라인 style 속성을 정의
<p style="color:blue;"> 텍스트 </p>
방법 2) <head>태그에 <style>을 정의
<head>
<style type="text/css">
p {color: blue;} <-- 모든 p 태그의 '텍스트'들이 파란색으로 출력됩니다. -->
</style>
</head>
<body>
...
<p> 텍스트 </p>
</body>
방법 3) HTML문서와 별도의 CSS문서를 <link href="..."> 태그로 연결 (권장)
ㆍ HTML 문서
<head>
<link href="mystyle.css" ref="stylesheet" type="text/css" />
</head>
<body>
<p> 텍스트 </p>
</body>
ㆍ CSS 문서
p {color: blue; }
잠깐!) <p>태그에 대한 디자인에 위에서 나열한 스타일 지정법을 모두 사용했다면, 어떤 방식이 우선할까요?
HTML 인라인 스타일, <head>에 정의한 스타일, <link href=...>로 정의한 스타일 순으로 우선합니다.
잠깐!) <p>태그가 여러 개인 문서에서 <p>태그들을 분류해서 디자인을 다르게 적용하고 싶을 때는 어떻게 해야 할까요?
원하는 각각의 디자인을 정의한 다음 'id'나 'class'로 구분해 주면 됩니다.
'id'는 중복되지 않는 이름을 사용해야 하고, 문서의 모든 영역에서 유효합니다. 때문에 모든 태그들이 독립적으로 이를 참조할 수 있습니다.
'class'는 이름이 중복되어도 무방하고, 지정된 각 태그 영역에서만 유효합니다. 때문에 <p> 태그 영역용으로 정의한 class 스타일은
비록 class 이름이 같더라도 <div> 태그 영역에서는 아무런 효과를 발휘하지 못합니다.
class는 또 하나의 특수 기능도 갖는데, '중첩이 가능하다'는 것입니다. 즉, class가 유효한 영역내에서 하위 class를 정의할 수 있습니다.
이들을 사용한 다음의 예들을 보면 이해하기 쉬울 것입니다.
class 사용 예1)
p.mytext{color: blue;} /* <p>태그에 적용할 디자인~ */
div.mytext {color: red;} /* <div>태그에 적용할 디자인~ */
<p class="mytext"> 텍스트 </p> <!-- 파란색으로 출력됩니다. -->
<div class="mytext"> 텍스트 </p> <!-- 빨간색으로 출력됩니다. --> <!-- 클래스명이 같아도 <p>와 <div>의 디자인이 독립적입니다. -->
class 사용 예2)
.mytext{color: blue;} /* 모든 태그에 적용할 디자인~ */
/* 결과적으로 이것은 문서의 모든 영역에서 유효하며 'id'와 같은 효과를 냅니다 */
<p class="mytext"> 텍스트 </p> <!-- 파란색으로 출력됩니다. -->
<div class="mytext"> 텍스트 </p> <!-- 파란색으로 출력됩니다. -->
중첩된 class 사용 예)
.mystory .mytext {color: blue;}
.mystory div {color: red;}
<div class="mystory">
<div> 텍스트 </div> <!-- 빨간색으로 출력됩니다. -->
<p> 텍스트 </p> <!-- 적용되는 디자인이 없습니다. -->
<p class = "mytext"> 텍스트 </p> <!-- 파란색으로 출력됩니다. -->
</div>
id 사용 예) id 이름 앞에는 #를 붙여주어 class과 구분합니다.
#mytext {color: green;}
<p id="mytext"> 텍스트 </p>
<div id="mytext"> 텍스트 </div> <!-- 같은 이름의 id를 사용하는 모든 태그 영역에 동일한 디자인 적용되어 모두 초록색으로 출력됩니다. -->
※ id와 class를 되새겨 보자면, class는 HTML 태그들과 협업도 자주 하는데에 비해, id는 독립적으로만 사용될 뿐, HTML 태그와 협업하지 않습니다!
정말? 위 네 가지 예들을 잘 관찰해 보십시오.
이상으로 HTML5 강좌 1을 마칩니다. ^^
'프로그래밍' 카테고리의 다른 글
| (프로그래밍 강좌) HTML 5 강좌3 (0) | 2018.08.14 |
|---|---|
| (프로그래밍 강좌) HTML 5 강좌2 (0) | 2018.08.14 |
| (C#.NET 한글 프로그램 제작) 한글 조립 및 분해 하기 (유니코드 Unicode) (2) | 2018.06.14 |
| (웹 프로그래밍 팁) 젤로 몰드 (Jello Mold) 브라우저 페이지 폭 자동 조절 기법 (0) | 2018.06.13 |
| (웹 프로그래밍 팁) 자바스크립트의 클로저 (0) | 2018.06.12 |