Loading...

Ex00HTML5Basic.html

HTML5 수업마크업 기능이 없는 태그입니다.마크업 기능이 없는 태그입니다. 주석은?? 주석은 아래와 같이 하면 됩니다. 스페이스는 한칸만 인식합니다. 여러 칸을 띄우고싶을때는  를 사용해야 합니다.

글자 태그

웹 페이지에서는 글자 태그가 가장 비중이 큽니다. 웹 페이지는 원래 논문을 목적으로 작성한 웹 문서라는 개념에서 시작되었습니다. 문서는 대부분 글자로 구성되므로 웹 페이지에는 다양한 글자 태그가 담겨 있습니다. 글자가 얼마큼 큰 비중을 차지하는지 한눈에 알 수 있습니다. 이처럼 다양한 글자 태그를 이 절에서 설명하는 분류 기준으로 기억하면 많은 도움이 될 것입니다. 1.1 제목 글자 태그 제목 글자 태그는 문서의 제목을 표현할 때 사용합니다. HTML5에서 제공하는 여섯 가지 제목 글자 태그는 [표 3-1]과 같습니다. 각 태그에서 h는 Heading을 의미합니다. [표 3-1] 제목 글자 태그 태그 설명 h1 첫 번째로 큰 제목 글자 생성 h2 두 번째로 큰 제목 글자 생성 h3 세 번째로 큰 제목 글..

2장 검사를 이용한 오류 확인

프로그램이 원하지 않는 방향으로 동작하는 것을 일반적으로 버그라고 합니다.버그를 잡는(수정하는) 행위를 디버그 라고 합니다. 과거 HTML 페이지는 디버그를 하기가 어려웠습니다. 하지만 지금은 웹 브라우저에 검사 기능이 추가되어 쉽게 디버그를 수행할 수 있습니다. 크롬을 열고 F12 또는 Ctrl + Shift + I를 누르거나 웹 페이지에서 마우스 오른쪽 버튼을 클릭해 [검사] 메뉴를 선택합니다.ㅏ 이렇게 하면 검사가 실행됩니다. 검사 기능은 다양하지만 이 책에서는 [Elements] 탭과 [Console] 탭만 사용합니다. [Elements] 탭을 사용하면 현재 HTML 페이지의 계층 구조를 알 수 있습니다. 또, 각 태그에 적용된 스타일도 한눈에 파악할 수 있습니다. 이 책을 진행하면서 차근차근 사..

2장 자바스크립트의 종류와 기본 작성법

웹 페이지에서는 자바스크립트를 사용해 사용자 반응 등을 처리합니다. 이 절에서는 웹 페이지에서 자바스크립트를 사용하는 방법을 살펴보겠습니다. 앞에서 살펴본 스타일시트처럼 두 가지 방법으로 웹 페이지에 자바스크립트를 추가할 수 있습니다. 내부 자바스크립트HTML 페이지에 자바스크립트 코드를 추가하는 가장 쉬운 방법은 HTML 페이지 내부에서 자바스크립트 코드를 곧바로 작성하는 것입니다. script 태그를 사용해 HTML 페이지 내부에 자바스크립트 코드를 작성합니다. 외부 자바스크립트 실제로 자바스크립트 코드를 입력하다 보면 1000행이 넘을 때가 많습니다. 이러한 코드를 한 파일에 입력하면 매우 복잡해지기 때문에 자바스크립트 파일을 분리해서 사용합니다. 외부 자바스크립트 파일은 script 태그의 src..

2장 CSS3의 종류와 기본 작성법

웹 페이지는 스타일시트를 사용해 스타일을 적용합니다. 이 절에서는 앞에서 작성한 HTML 페이지에 다음 두 가지 방법으로 스타일시트를 적용해 보겠습니다. 내부 스타일시트 스타일시트를 가장 손쉽게 사용할 수 있는 방법으로 , style 태그를 사용해 HTML 페이지 내부에 스타일시트를 직접 입력합니다. 내부 스타일시트를 사용하는 방법은 간단하므로 [기본 예제 2-2]에서 설명합니다. 외부 스타일시트 스타일시트가 짧다면 HTML 페이지 내부에 입력해도 괜찮습니다. 하지만 여러 사람이 함께 협업을 해야 하고 프로젝트의 규모가 클 때는 HTML 페이지 내부에 스타일시트를 삽입하는 것보다는 외부 스타일시트를 사용하면 좋습니다. 외부 스타일시트는 스타일시트를 별도로 생성하고 link 태그의 href 속성을 사용해 ..

2장 HTML5 기본 구조와 작성법

학습 목표- 태그(Tag), 요소(Element), 소성(Attribute)의 의미를 파악합니다.- HTML 페이지의 기본 작성방법을 파악합니다.- 검사로 디버그하는 방법을 익힙니다. Preview이 장에서는 HTML 페이지의 기본 구조와 더불어 웹 개발에서 전반적으로 사용하는 기본 용어를 살펴봅니다. 용어를 기억하지 못하면 이후 내용을 진행하기 어려우므로 반드시 확실하게 정리하고 넘어갑시다. 1. HTML5 기본 용어 정리 HTML5를 공부하려면 기본적으로 태그, 요소, 속성 용어를 알아야 합니다.웹 페이지를작성하기 전에 기본 용어를 먼저 정리하겠습니다. 1.1 태그와요소요소는 제목, 본문, 이미지 등 HTML 페이지에 위치하고, 태그는 이러한 요소를 만들 때 사용하는 기호입니다. TIP : 요소를 객..

1장 웹 개요와 실습 환경 구축

1. 인터넷과 웹 소개 월드 와이드 웹은 인터넷에 연결된 커뮤터로 사람드리 정보를 공유할 수 있는 공간을 의미합니다.인터넷은 전세계를 연결하는 국제 정보 통신망이고, 웹은 인터넷에서 작동하는 서비스이므로 이 둘을 구분해주세요. 월드 와이드 웹은 1991년에 처음 등장했습니다.오래되지 않은 기술이지만 빠르게 발전했고 관련된 이야기도 많습니다. 이 절에서는 월드 와이드 웹의역사를 알아봅니다.웹의 역사를 아주 간략히 설명하므로 생략된 부분이 많습니다. 재미있다면 해당 내용을 더 찾아봅니다. NOTE 국내 인터넷은 1982년에 구미 한국전자기술연구소(현 ETRI)와 서울대학교 컴퓨터공학과를 연결하면서 시작되었는데 어느덧 30년이 넘었습니다. 1.1 인터넷의 시작 인터넷이 미국 국방성에서 시작되었다는 이야기는 어..

Part 1 웹 프로그래밍 첫 걸음 Preview

1장. 웹 개요와 실습 환경 구축2장. HTML5 기본 구조와 작성법 1장. 웹 개요와 실습 환경 구축 학습 목표 - 웹의 개념과 특징을 이해합니다.- 웹의 동작 원리를 이해합니다.- 대표적인 우베 표준 기술인 HTML5, CSS3, 자바스크립트의 개념과 특징을 이해합니다.- 웹 프로그래밍 개발 환경을 구축합니다. Preview 근처에 웹에 접속할 수 있는 장치가 있나요? 책 옆에 놓인 스마트폰은 물론 책상 위의 데스크탑이나 노트북으로도 웹에 접속할 수 있습니다. 최근에는 스마트 냉장고와 스마트TV등이 등장하면서 집안 모든 전자제품도 우베에 연결할 수 있습니다. 소니 에릭슨의 CEO은 2020년까지 약 500억 개의 장치가 웹을 사용할 것으로 예측했습니다. 웹은 1991년부터 정부 기관 및 대학에서 사용..