CSS 01 CSS의 개요 CSS 3의 개요 및 CSSx와의 차이점1. CSS3의 개요CSS3의 개요 및 CSSx와의 차이점CSS란 Cascading Style Sheet의 약어로 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트를 말합니다. 기존 HTML에서는 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 했지만, CSS를 적용하면, 웹 페이지의 한 가지 요소만 변경해도 전체 페이지의 내용이 한꺼번에 변경할 수 있습니다. CSS는 HTML과 함께 사용되지만 HTML은 아닙니다. CSS는 기존 태그로 콘텐츠를 보여주는 방식을 재정의하여 HTML의 기능을 개선하는 별도의 스타일시트 언어인 것입니다. 이와 같은 CSS를 사용하게 되면, 다음과 같은 장점을 가지게 ..

HTML5 09 W3C HTML 웹 표준 및 간단한 웹 페이지 만들기 W3C HTML 웹 표준 인증 받기1. 웹 페이지의 타입을 지정하는 선언문W3C HTML 웹 표준 인증 받기여러분, 국내의 유명 포털사이트인 네이버나 다음의 소스를 보신적 있으신가요? 네이버와 다음 사이트에서 소스보기를 하면 다음과 같은 소스들을 볼 수 있습니다. 복잡해 보이는 소스창이 보이는데요. 우리가 이번 시간에 확인할 것은 소스창 맨 위에 있는 입니다. 웹 페이지에는 웹 페이지의 타입을 지정하는 선언문이 있는데, 이것이 DOCTYPE입니다. DOCTYPE은 Document Type의 약자로 그 자체가 태그는 아니지만 웹 페이지에서 맨 처음 선언 되어 어떤 종류의 html을 사용할지를 웹 브라우저에게 알려주는 역할을 합니다. 즉,..

HTML5 08 변화된 태그 HTML5에서 변경된 태그1. 의미가 변경된 태그HTML5에서 변경된 태그기존 HTML버전에서의 태그 중 HTML5가 등장하면서 의미가 변경된 태그가 있습니다. 의미가 변경되었다고 하여 코드의 구조나 결과화면이 변경된 것은 아닙니다. 단지 태그의 속성에 변화를 주어 사용자가 쉽게 코드를 작성할 수 있거나, 조금 더 넓은 의미로 변경된 것뿐이죠. 그럼 기존 태그의 의미와 변경된 태그의 의미를 비교해보면서 어떤 차이가 있는지 살펴보도록 하겠습니다. 먼저 태그 부터 살펴보도록 하겠습니다. HTML4에서 태그는 href=“#” 또는 href=“javascript:;”로 지정해야 널 링크로 사용할 수 있었지만, HTML5 에서는 href 속성 없이 사용해도 널 링크로 사용할 수 있게 ..

HTML5 07 추가 태그 폼, 텍스트, 콘텐츠 그룹화 태그1. 폼 태그(Form Tag)폼, 텍스트, 콘텐츠 그룹화 태그HTML5가 등장하면서 새로운 태그들이 추가 되었습니다. 그럼 새로운 태그들이 추가 되어서 문서의 구조가 복잡해졌을까요? 아닙니다. 오히려 새로운 태그들이 등장하면서 사용자가 프로그램 코드를 작성하기가 더 편리해졌고, 문서의 구조도 기존과는 큰 차이가 없습니다. HTML5에서 추가되어 더욱 편리해진 태그들을 유형별로 나누어 살펴보면 이해하는데 도움이 될 것입니다. 그래서 추가 태그(1)에서는 폼 태그와 텍스트 태그, 그리고 콘텐츠 그룹화 태그에서 추가된 태그에 대해 준비했습니다. 우선, 폼 태그에서 새롭게 추가된 태그는 , , , , 입니다. 이에 대해 자세히 살펴 보겠습니다. 는 태..

HTML5 06 시맨틱 태그 - 입력 양식 및 공간 분할 HTML5 시맨틱 태그(입력 양식) 1. 시맨틱 태그란?HTML5 시맨틱 태그의 입력양식HTML5에서 시용하는 주요 시맨틱 태그로는 , , , , , 가 있습니다. 먼저 는 주로 로고 영역과 같이 웹 페이지의 헤더를 만들 때 사용합니다. 은 웹 페이지의 메뉴를 만들 때 사용하는 태그로, 일반적으로 내부에 순서가 없는 목록을 나타내는 태그와 목록요소를 나타내는 태그를 많이 사용합니다. 태그는 여러 중심 내용을 감싸는 공간을 의미하는 태그를 의미합니다. 태그는 문서, 어플리케이션, 사이트 안에서 독립되어 있는 구성요소로 글자가 많이 들어가는 부분을 의미합니다. 태그는 웹 페이지 왼쪽이나 오른쪽에 부가적인 내용을 나타내는 영역으로서 퀵메뉴나 광고영역으로..

HTML5 05 시맨틱 태그 - 이미지, 비디오, 오디오 HTML5 시맨틱 태그(이미지)1. 웹 문서와 이미지HTML5 시맨틱 태그-이미지이미지는 웹 초창기부터 지원되어 왔으며, HTML5 이전의 이미지 태그를 거의 그대로 사용하고 있습니다. 그렇다면 이미지 태그에 아무 이미지 파일이나 가져다 사용할 수 있을까요? 웹 페이지에서 사용할 수 있는 이미지는 몇 가지 정해진 파일 형식만 사용할 수 있습니다. 만약 다른 형식으로 된 이미지 파일을 사용하려면 웹 페이지에서 사용할 수 있는 파일 형식으로 변환하여 사용해야 하죠. 그렇기 때문에 이미지를 사용하기 위해서는 웹에서 사용할 수 있는 이미지 파일 형식이 무엇인지 알아야 합니다. 그럼 웹에서 사용할 수 있는 이미지 파일 형식에 어떤 것이 있는지 알아보겠습니다..

HTML5 04 HTML5 기본 구조 및 문법의 기초 HTML5 엘리먼트(ELEMENT)1. HTML5 엘리먼트의 정의와 특징HTML5 엘리먼트HTML5의 엘리먼트는 HTML문서의 구성요소 중 하나로서, HTML에서 시작태그와 종료태그로 이루어진 모든 명령어들을 의미합니다. 이와 같은 HTML5의 엘리먼트 구문의 특징으로는 다음과 같습니다. 첫째, 하나의 HTML 엘리먼트는 시작 엘리먼트로 시작하고, 종료 엘리먼트로 끝이 납니다. 예를 들어 엘리먼트로 시작하였다면, 반드시 엘리먼트로 끝이 나야 하는 것이죠. 두 번째는 일부 HTML 엘리먼트는 빈 콘텐츠를 가질 수 있는데, 예를 들어 엘리먼트는 단지 라인 브레이크만 삽입하며, 엘리먼트는 이미지를 참조할 뿐 콘텐츠를 가지고 있지 않습니다. 세 번째는 빈 엘..

HTML5 - 03 HTML5와 HTML4.01의 차이 HTML 4.01 개요1. HTML 4.01 이란?HTML4.01 개요HTML4.01은 1999년 W3C에서 개정한 HTML표준 문서로 이전 버전의 오류 등을 수정하고 일부는 새로운 기능이 추가되었습니다. 주요 보완된 기능으로는 스타일 시트, 스크립트, 프레임, 테이블 그리고, 폼의 기능 보완 등이 있습니다. 2. HTML 4.01의 특징HTML4.01이 갖는 특징은 무엇이 있는지 살펴보겠습니다. HTML4.01은 이전 버전에 비해 국제화, 접속성, 스타일시트, 스크립트, 그리고 기타 특징을 선보였는데, 하나씩 차례대로 설명드리겠습니다. 먼저 국제화와 관련된 부분부터 설명 드리겠습니다. HTML은 HTML4.01 시기에 와서야 비로서 국제화를 이루었..