( 알림: 본 문서는 현재 작업 중에 있습니다. )
필고 개발 그룹 초급 강좌 : HTML 과 CSS
필고 개발자 그룹 강좌
작성자 송재호
작성일 2013년 9월 2일
저작권 본 문서의 저작권은 없습니다. 어떤 용도라도 마음대로 활용하시면 됩니다.
개요
HTML
HTML 특징
HTML 을 구성하는 기본 태그
주석
웹브라우저에서 보기
HTML 기초 참고 자료
중요한 HTML 태그
Fieldset 과 Legend
CSS
적용 순서
좋은 참고 문서
개요 ‘필고 개발자 그룹’에서 HTML 강좌를 진행합니다. 본 강좌는 필리핀에 계시는 한인 교민 분들을 대상으로 작성하였습니다. 하지만 온라인 상에 공개되는 문서이므로 누구든지 활용을 할 수 있습니다.
많은 분들이 HTML 에 대한 기본을 알고 계실 것입니다. 또한 아주 쉽다는 것도 알고 계시겠죠.
‘필고 개발자 그룹’의 강사들이 가장교사나 튜터들 처럼 여러분들의 앞에 서서 또는 옆자리에 앉아서 일일히 가르쳐 드릴 수가 없습니다. 주로 온라인으로 진행되며 기회가 되면 오프라인으로도 진행을 하겠습니다.
HTML 과 CSS 에 대해서는 핵심 적인 부분을 간략하게 설명을 하고 여러분들께 참고가 될만한 좋은 정보 사이트를 가르쳐 드릴 것입니다.
‘필고 개발자 그룹’에서 모든 정보를 강좌로 만들기에는 시간이 부족 할 뿐 더러 모두 만든다고 해도 현존하는 수 많은 정보들 보다 더 잘 만들 수 없기 때문이기도 합니다.
문서의 작성의 편리를 위해서 존칭을 생략하는 경우가 많을 것입니다. 이점 양해 바랍니다.
HTML HTML 은 Hypertext Markup Language 의 약자로서 “하이퍼텍스트 생성 언어”라는 뜻입니다.
HTML[에치티엠엘]은 일반 사용자에게 눈으로 보여지는 웹 브라우저에서 홈페이지의 정보를 표시하기 위한 코드들의 집합이다. HTML 은 웹 브라우저에게 웹 페이지 내의 글자나 이미지를 어떻게 나타낼 것인가에 관해 알려주는 역할을 한다.
HTML 은 단순한 일반 텍스트 편집기에서부터 WYSIWYG 작성도구에 이르기까지 다양한 방법으로 작성하거나 편집할 수 있다. 제목, 문단, 리스트, 하이퍼링크 등은 모두 태그를 사용하여 구조화 시킨다.
본 문서에서는 여러분들에게 HTML 의 이해와 실제로 HTML 문서를 만들고 웹 브라우저에서 눈으로 확인을 할 수 있는지에 대한 설명을 합니다.
HTML 의 태그에 대해서는 여러분들이 직접 찾아서 공부를 하셔야합니다. 인터넷 상에 수 많은 정보가 있습니다. “HTML 강좌”라고 검색을 하면 정말 수 백만건의 정보가 나올 것입니다.
HTML 특징 HTML 을 구성하는 기본 태그 HTML 의 시작은이며 끝은이다.
HTML 에는 기본 정보를 제공하는 HEAD 부분이 있다. HEAD 의 시작은이며 끝은이다.
이 HEAD 사이에 HTML 의 정보를 담는데 그 중 하나가 HTML 의 제목이다.
HTML 의 제목의 시작은이며 끝은이다.
실제 내용은와사이에 기록을 하면 된다.
예제
HTML 제목
본문 내용
주석 주석이란 실제로 보여지지는 않지만, 개발자가 특정 표시 또는 설명을 해 놓는 것을 말한다.
주석은 로 끝이 난다.
예제
웹브라우저에서 보기 노트패드를 열어서 다음의 예제를 c:wwwtest.html 에 저장을 하십시오.
C 드라이브 밑에 www 폴더가 없다면 www 폴더를 만드십시오.
예제
HTML 제목
본문 내용
그리고 나서 웹브라우저를 열고 주소 창에 C:wwwtest.html 를 입력하십시오.
그렇다면 여러분은 “본문 내용”이라는 글자를 확인 할 수 있을 것입니다.
HTML 기초 참고 자료 이제 여러분들에게 참고가 될 만한 인터넷 사이트를 가르쳐 드리겠습니다.
아래에 목록하는 사이트들은 초보자들이 HTML 을 쉽게 배울 수 있게 설명을 해 놓았다는 것을 확인 하였으므로 큰 도움이 될 것입니다.
http://htmlcss.kr/
http://www.webmadang.net/script/script.do?boardid=3023
http://www.homejjang.com/03/html.php
http://pds4.egloos.com/pds/200612/16/86/html.doc (마이크로소프트 워드 문서)
http://www.zerois.net/zeromanual/html01.htm
중요한 HTML 태그 본 장에서는 여러분이 HTML 태그를 배울 때, 소홀히 하고 넘어갈 수 있는 부분을 짚어 본다.
특히 HTML5 에서 소개되는 새로운 태그에 대해서도 살펴본다.
Fieldset 과 Legend fieldset element는 서로 연관성있는 컨트롤들을 하나로 묶을 수 있도록 해 주며, legend element는 제목을 붙이는 역할을 한다.
어떻게 보면 legend element를 사용하기 위해서 fieldset element를 사용한다고 볼 수도 있다.
메일링 리스트
CSS CSS 는 Cascading Style Sheet 의 약자이다.
이 CSS 는 HTML 이 컴퓨터 화면에 보여 질 때, 보다 더 많은 장식(보이는 모습이나 디자인적인 표현)을 할 수 있게 해 준다.
적용 순서 하나의 장식을 위해서 여러 곳에 CSS 구문을 적을 수 있으며, 중복으로 적을 수도 있다.
따라서 CSS 구문이 여러 곳에 나뉘어져 기록된 경우, 그 적용의 순서가 중요 해 질 수 있다.
태그 내에 style=”...” 속성으로 기록한 것이 가장 먼저 적용이 된다.
그 외는 웹 브라우저에 CSS 정의(또는 구문) 읽혀지는 순서대로 기록된다. 즉, 맨나중에 기록된 CSS 가 적용이 되는 것이다.
좋은 참고 문서 http://htmlcss.kr/
최근 화제 글
말라떼나 마카티에 300-... 
thruthesky
쪽지전송 
본 글을 신고하시겠습니까?
Reminder : 
@알림 : 코멘트를 작성하시려면 로그인을 하십시오.