하늘과 나의 IT 이야기

4장. HTML5 기본태그(글과 관련된 태그) 이번 시간에는 기존에 사용되었던 글과 관련된 태그를 복습해 보도록 하겠습니다. 이미 이 부분을 알고 계신 분들도 많이 있으시리라 생각됩니다. 처음 접하시는 분들은 강의에 집중해 주시기 바랍니다.^^ 글과 관련된 태그 1. ~ 태그제목을 나타내는 태그입니다. 에서 까지 있으며 태그가 가장 크고 태그가 가장 작습니다. HTML4에서는 태그와 비교하면서 많이 설명이 되어졌지만 HTML5.0 에서는 태그 자체를 사용하지 않으므로 비교설명은 하지 않고 태그만 설명드리도록 하겠습니다. 예제 소스를 보도록 하겠습니다. 첫번째 첫번째 첫번째 첫번째 첫번째 첫번째 2. ~ 태그영어의 paragraph를 의미합니다. 즉, 문장 여러개가 모인 문단을 만들어주는 태그입니다. 3...

HTML5강의를 시작하게 된 하늘과 나입니다. 오늘부터 하나씩 HTML5 강의를 시작할 텐데요. HTML5에 대해서 배워보고 싶은 분들과 HTML5가 뭐지 하는 분들에게 조금이나마 도움이 되어 드리고자 시작하게 되었습니다. 그러면 하나씩 하나씩 살펴보도록 하겠습니다. 1. 웹(web)의 역사 먼저 웹(web)이라는 녀석이 어떻게 세상에 등장하게 되었는지 살펴보도록 하겠습니다. 웹은 월드 와이드 웹(World Wide Web)을 줄여서 부르는 말인데요. 인터넷에 연결된 컴퓨터들을 통해서 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말합니다. 웹이라는 단어는 생소하기도 한데요. 우리는 흔히 이 웹을 보고 인터넷이라고 말하기도 합니다. 하지만 웹은 인터넷 밑에 있는 하나의 서비스라고 보면 될 것 ..

자, HTML5 강의 세번째 시간입니다. HTML4에서는 문서의 구조를 만들 때 div 태그를 id, class와 함께 사용했습니다. 완성된 문서를 보면 태그가 여러번 사용한 것을 볼 수 있었지요. 그래서 구조가 복잡할 수록 태그가 여러번 겹쳐 있었기 때문에 알아보기가 힘들었을 뿐더러 수정하기도 어려웠습니다. HTML5에 와서 문서의 구조를 만드는 새로운 개념과 요소들이 추가되었습니다. 그래서 기존에 태그로 소스코드를 작성했던 것보다 구조적인 문서를 만드는 것이 가능해졌습니다. 구조를 만들기 위한 새로운 태그들을 시맨틱 태그라고 하는데요. 오늘은 HTML5에서 새롭게 등장한 시맨틱(semantic)태그에 대해서 알아보도록 하겠습니다. 시맨틱(semantic) 태그란 무엇인가요? 영어에서 semantic이..

[HTML5 강의] 3장. HTML5의 기본. 태그 HTML이 무엇인지 다시 한번 복습하고 넘어가도록 할게요. HTML의 정의 HTML은 Hyper Text Markup Language의 줄임말입니다. mark-up 언어는 무엇이냐구요? 그것은 바로 안에 정의된 용어로 태그(tag)를 표현하므로 mark-up 언어라고 부른답니다. HTML의 태그는 이런 특징을 가지고 있습니다. HTML의 태그는 기본적으로 대소문자를 구분하지 않아요. header와 HEADER는 같은 의미라는 말이지요. 태그를 이용해서 문장이나 그림 등의 구성요소와 배치 구조 등을 설정할 수 있구요. 파일의 이름 끝에는 .html 또는 .html이 붙어요.(이 .htm과 .html로 이 파일이 HTML문서라는 것을 구분한답니다..

[HTML5 강의] HTML5를 실행해보자. 웹 브라우저 설치하기 HTML5 강의 두번째 시간입니다. 이번 HTML5 강의에서는 HTML5를 실제로 실행해보기 위해서 HTML5를 지원하는 웹브라우저를 설치해 보도록 하겠습니다. 구글 크롬 설치 구글 크롬은 가장 최근에 만들어진 브라우저로 빠른 속도가 큰 장점이라고 할 수 있겠습니다. 구글 크롬 설치하러 가기 - http://www.google.co.kr/intl/ko/chrome/ 위 링크를 클릭하여 구글 크롬 설치페이지로 이동합니다. 아래 보이는 화면과 같이 나오면 Chrome 다운로드 버튼을 눌러 설치 파일을 다운로드 한 후 설치하면 됩니다. 오페라 설치 아래의 링크를 클릭하여 오페라 브라우저를 설치합니다. 오페라 브라우저 설치하러 가기 - http:..

HTML5, CSS3, JAVASCRIPT 무료 자료를 찾다보면 주로 영어로 된 자료들이 많은데요. 무료로 공개해주신 분이 있어 이렇게 공유합니다.정보를 공개해주신 분은 한국성공회대학교 소프트웨어 학부 외래교수이며, Microsoft Visual C# MVP로 활동하고 계신 원철연 님입니다. 원철연 님이 1년 정도 집필한 책이 우여곡절을 거쳐 출판을 할 수 없게 되자, 누구나 무료로 이 정보를 볼 수 있도록 공개해주신 것입니다. 최근 HTML5와 CSS3, JAVASCRIPT에 대한 새 책이 시중에서 많이 출간되고 있는데, 전문가 분들 중 몇 분은 "그 책들과 비교해서 손색이 없으며 어떤 부분은 이 공개자료가 더 좋기에 그 책들이 영향을 받지 않을까 걱정된다."란 말까지 할 정도라고 하네요. 링크 : h..

최근 HTML5에 대한 관심이 높아지고 있는데요. 여러분은 HTML5에 대해서 많이 들어보셨는지 모르겠습니다. 이번 포스팅에서는 HTML5에 대한 적용지수를 표시해주는 웹사이트가 있어 이를 소개하려고 합니다. 여러분이 사용하고 있는 웹브라우저에서는 HTML5를 얼마나 지원하는지 점수로 확인해 보세요 당신이 사용하고 있는 웹브라우저는? 여러분은 어떤 웹브라우저를 이용하고 계시나요? 우리나라의 경우 많은 사람들이 마이크로소프트에서 발표한 인터넷 익스플로러(Internet Explorer)를 사용하고 있는데요. 최근에는 크롬이나 파이어폭스를 사용하는 분들이 많아지고 있는 추세라고 하네요. 그냥 말로 하면 모르니까 현재 웹브라우저 점유율을 보여주는 사이트는 어디없나 찾아보았습니다. 좋은 사이트가 있더라구요. 바..

HTML5 두번째 시간이 돌아왔습니다. 이번 시간에는 HTML5인지 아닌지 어떻게 구분할 수 있는지와 기존 HTML 버전과 무엇이 다른지 알아보도록 하겠습니다. 첫번째 HTML5인지 아닌지 알아보는 방법에 대해서 알아보도록 하겠습니다. HTML 페이지를 만들 때 일반적으로 DOCTYPE이라는 것을 문서의 처음 부분에 지정하도록 되어 있는데 아래의 내용과 같이 쓰곤 했었죠. HTML5 이전에 사용했던 버전의 DOCTYPE!

우리가 흔히 인터넷을 할 때 '이 웹페이지는 뭘로 만드는 거야?' 이런 고민을 가지신 분들이 몇 분 계실지도 모르겠습니다. 또는 우리가 매일매일 공기를 들이마시고 내쉴 때 공기가 무엇으로 이루어져 있는지 신경쓰지 않는 것처럼 신경쓰지 않고 인터넷을 이용하시는 분들도 있는지 모르겠습니다. 보통 후자의 경우가 대부분일 것이라는 생각이 드네요. 오늘은 이 웹페이지를 만들 때 알아야 하는 HTML에 대해서 알아보도록 하겠습니다. HTML은 HyperText Markup Language의 줄임말 HTML은 보시면 어느 영어단어와 같이 줄임말입니다. 그러면 무엇의 줄임말일까요? 바로 HTML은 HyperText Markup Language의 줄임말입니다. 대문자만 써서 HTML이라 부릅니다. HTML은 HyperT..

H T M L 이 야 기 HTML5 문서타입(doctype) HTML5의 문서타입은 간단합니다. HTML5를 사용한다고 표현하기 위해서 아래와 같이 사용하면 됩니다 기존보다 간단하죠? 다음은 HTML5 기본 예제 소스입니다. 차세대 웹표준으로서 HTML5 위 소스를 실행하면 아래와 같이 실행됩니다