HTML, CSS & JavaScript

How to 홈페이지 제작 팁

1. 한 줄 스크립트로 롤오버(Rollover)버튼 만들기
[비법전수] 툴팁 만들기(1)
2. 깔끔한 테이블 만들기
3. 깔끔한 로그인 폼 만들기
[비법전수] 툴팁 만들기(2)
4. 다양한 텍스트 링크 만들기
5. 1024X768과 800X600호환방법
6. CSS를 이용한 드롭다운(dropdown)메뉴 만들기
7. 롤오버(Rollover)했을 때 테이블의 셀 배경색 바꾸기
8. 파비콘(Favicon)만들기 (주소창에 아이콘 넣기)
9. 스크롤 바에 색상 입히기
10. 원하는 크기로 새 창 띄우기
11. 클릭할 때마다 크기가 다른 새창 띄우기
12. 한 번 클릭으로 원하는 위치에 4개의 새창 띄우기
13. 접속할 때마다 다른 이미지 보여주기
14. 마우스 오른쪽 버튼 사용금지 시키기
15. 소스 보여주기(Notepad open)
16. 페이지 내부에 주소 입력창 만들기
17. 주민등록번호 입력시 다음 칸으로 자동으로 넘기기
18. 페이지 열림과 동시에 새창 띄우기
19. 새창 다시 열지 않기
20. 현재 페이지를 즐겨찾기에 등록하기
21. 현재 페이지를 시작페이지로 만들기
22. 문서의 수정된 날짜 자동으로 보여주기
23. 뒤로가기/앞으로 가기/새로고침 활용하기
24. 폼안에 글자 타이핑 효과주기
25. 텍스트필드를 클릭하면 텍스트가 지워진다
[알아두기] CSS에서 사용하는 색상

Part 1 HTML 기초지식, 두고두고 읽어보자 1

1. HTML을 시작하기 전에...
2. HTML 제대로 알고 이용하기
3. 태그 처음부터 시작하기 HEAD
페이지에 제목 달기
메타 태그의 숨겨진 비밀을 알고 있나요?
링크의 기준이 되는 URL 설정
4. 모든 건 내 안에 있다 BODY
배경색 삽입하기
배경 이미지 삽입하기
링크된 글자에 색상 지정하기
브라우저에 여백 없애기
회사명/연락처 삽입하기
복잡한 문서에 주석달기
5. 텍스트를 내 맘대로 TEXT
줄바꿈을 할 때 <BR>
단락의 제목을 적어줄 때 <Hn>
글자의 크기를 조절할 때 <FONT>
글자의 기본 크기를 설정할 때 <BASEFONT>
선 그리기 <HR>
단락을 나누어 줄 때 <P>
글자/이미지/표 등을 중앙에 정렬할 때 <CENTER>
<DIV>...</DIV>
글자의 위치를 자유롭게 <PRE>
띄어쓰기를 할 때  
문장의 들여쓰기 <BLOCKQUOTE>
줄바꿈을 하고 싶지 않을 때 <NOBR>
강제 줄바꿈을 할 때 <WBR>
스크롤되는 문자를 만들 때 <MARQUEE>
문자를 장식할 때
특수문자 표기법
6. 이미지와 멀티미디어
이미지 삽입하기
이미지에 테두리 선을 내 맘대로
이미지에 대체 텍스트 달기
이미지 배치하기
이미지 옆 글자 텍스트 위치 설정
이미지와 글자의 간격 설정
이미지 옆 문자 삽입 중지
이미지의 2단계 표시
홈페지이에 사용되는 사운드
홈페이지에 사운드 삽입하기
7. 리스트(목록) 만들기
비순차적 목록 만들기 <UL>
비순차적 목록의 마크 변경하기
순차적 목록 만들기
순차적 목록의 번호 형식 변경하기
순차적 목록의 번호 순서 변경하기
정의 리스트

Part 2 HTML 기초지식, 두고두고 읽어보자 2

1. 원하는 곳으로 자유롭게 이동하기
텍스트나 이미지에 링크걸기
특정 위치로 이동하기(현재 페이지)
특정 위치로 이동(다른 페이지)
링크로 전자메일 보내기
2. 보기 좋은 레이아웃을 위한 제안 TABLE
표를 사용하는 이유
표의 기본형식
표의 제목 삽입하기
표의 크기와 위치 지정하기
셀과 셀 사이에 여백 지정하기
표의 외곽선에 색상 넣기
표에 배경색 넣기
표에 배경 이미지 넣기
복수의 셀 합치기
셀의 크기 지정하기
셀 내에서의 데이터 위치 지정
셀 내에서의 줄바꿈 금지
[연습문제] 움직이는 점선 테두리 만들기 테이블 테두리 일부만 보이게 하기
3. 프레임으로 문서 구조를 내 맘대로 FRAME
프레임이란?
프레임을 활용한 레이아웃
프레임 셋의 구조
프레임 셋의 구성
가로와 세로로 프레임 나누기
프레임의 크기 고정하기
프레임에서 스크롤바 제어하기
프레임의 여백조절
프레임의 경계선 없애기
HTML 문서 특정 위치에 프레임 삽입하기 <IFRAME>
프레임에 링크 설정하기 <TARGET>
4. 입력양식 꾸미기 FORM
입력양식(FORM)이란?
폼(FORM)태그의 구조
한 줄의 텍스트 입력상자와 암호 입력상자 만들기
여러 줄을 입력할 수 있는 글 상자 만들기
체크박스 만들기
라디오 버튼 만들기
전송, 취소 버튼 만들기
드롭다운(dropdown)메뉴 만들기(select, option)
다중선택 메뉴 만들기(select, multiple)
업로드 입력양식 만들기
[연습문제] 회원 가입폼 만들기

Part 3 CSS 완벽 해부

1. 스타일시트에 대한 이해
CSS란
CSS의 용어와 기본구성
CSS의 특성
2. 선택자의 종류
HTML 태그를 선택자로 사용하기
CLASS를 선택자로 사용하기(Class Selector)
ID를 선택자로 사용하기(ID Selector)
문장 선택자(Contexttual Selector)
3. CSS의 적용위치와 형태
Embedded Style Sheet(head에 삽입하여 문서 전체 관리)
Inline Style Sheet(각각의 태그에 적용하는 방식)
External Style Sheet(외부 문서를 불러와 적용하는 방식)
Imported Style Sheet(외부 스타일시트 불러오기)
4. CSS의 상속화와 그룹화
스타일시트의 상속성(Inheritance)
스타일시트의 그룹화(Grouping)
5. 가상 클래스와 가상 요소
가상 클래스(Pseudo-classes)
[비법전수] 한 화면에 두 가지 형태의 링크를 줄 때
가상요소(Pseudo-Elements)
6. 글꼴 FONT 324
글꼴의 군을 지정할 때(font-family)
글꼴의 모양을 지정할 때(font-style)
글꼴의 두께를 지정할 때(font-weight)
글꼴의 대소문자를 바꿀 때(font-variant)
글꼴의 크기를 지정할 때(font-size)
7. 텍스트(TEXT)
글자의 간격을 지정할 때(letter-spacing)
텍스트에 밑줄을 그어줄 때(text-decoration)
텍스트를 수직정렬 할 때(vertical-align)
텍스트의 대소문자를 지정할 때(text-transform)
텍스트나 이미지 옆 문자열을 정렬 할 때(text-align)
문자열의 들여쓰기를 할 때 (text-indent)
문서의 줄 간격을 지정할 때(line-height)
[연습문제] 이미지에 외곽 테두리 만들기
8. 색상과 배경
color
background-color(배경색)
background-image(배경이미지)
background-repeat(배경 반복)
background-attachment(배경 고정)
background-position(배경 위치)
background
9. 상자속성(BOX)
여백을 지정하는 방법(margins)
테두리를 지정하는 방법(borders)
[비법전수] 투명한 테이블 만들기
컨텐츠와 테두리 사이의 간격을 지정하는 방법(paddings)
상자의 위치 지정하기(position)
[연습문제] 익스플로러 로고화면 만들기 글자에 그림자 효과 주기
10. 리스트
목록 스타일 유형(List-Style-Type)
목록 스타일 이미지(List-Style-Image)
목록 스타일 위치(List-Style-Position)
[연습문제] 문서의 제목 만들기

Part 4 자바스크립트 기초 다지기

1. 자바스크립트를 배우기 전에
2. 자바스크립트의 구조
[비법전수] 사이트 이야기 1
3. 자바스크립트 편집
4. 변수 Variable
5. Document.Write()
6. 자료의 형태
7. 대입, 산술 연산자
8. 논리, 비교 연산자
9. 조건, 문자열 연산자
[비법전수] 사이트 이야기 1
10. 연산자 우선순위
11. IF문 구조
12. Switch문 구조
13. For문 구조
14. While문 구조
15. Continue문

Part 5 함수를 알아보자!

1. 함수에 대하여
2. 함수의 매개변수 정의하기
[비법전수] 사이트 이야기 3
3. 내장 함수
4. alert() 내장 함수
5. confirm() 내장 함수
6. prompt() 내장 함수

Part 6 객체, 메소드, 이벤트

1. 객체
2. 메소드
[알아두기] Homesite 살펴보기
3. 이벤트
4. 이벤트 핸들러의 활용

Part 7 내장 객체

1. 내장 객체
2. String 객체
3. Date 객체
4. Math 객체
5. Array 객체
6. Funtion 객체
7. Event 객체
8. Screen 객체
9. Number 객체
[연습문제] 구구단 출력 프로그램 만들기
1부터 500까지의 수 중에서 배수를 제외한 수의 합 구하기

Part 8 네비게이터 객체

1. 네비게이터 객체
[연습문제] 마우스 따라다니는 이미지 만들기
2. Window 객체
[연습문제] 선택한 이미지를 배경 이미지로 바꾸기
3. Window 객체의 메소드
4. Document 객체
5. Document 객체의 하부 객체
6. History 객체
7. Location 객체
8. Frame 객체
9. Navigator 객체
[연습문제] 연도를 입력하면 해당 년도의 띠를 표시하기
특정 경로 설정하기
10. 레이어에 대하여
11. 레이어를 이용한 효과
12. Form 객체
13. Form의 요소
[연습문제] 포커스 이동하기
버튼에 현재시간 출력하기

Part 9 자바스크립트 고급 활용예제

1. 주민등록번호 확인 프로그램 만들기
2. New Ticker Tape
3. 스크롤 공지사항 만들기
4. 가로로 스크롤되는 페이지 만들기
5. 페이지 프리로딩 효과
6. 이미지 전환 효과
7. 영상편지 만들기
8. 점차 확대되는 이미지 만들기
9. 버튼을 이용한 문서 스크롤
10. 배경이미지 스크롤 효과
11. 즐겨찾기와 시작페이지 등록 만들기
12. 이미지의 알파 효과
13. 이미지 슬라이드 효과
[연습문제] 링크에 마우스를 올리면 사운드가 나오게 만들기
[연습문제] 접속할 때마다 배경음악이 바뀌게 만들기
로딩하는데 걸린 시간 표시하기