Youtube link - https://www.youtube.com/watch?v=PMUu8HEbM28&list=PL6i7rGeEmTvpaBlHGWlhtAWZxc9hM4nCd&index=7
HTML 문서의 구조
태그라고 불리우는 요소로 구성
<HTML>
</HTML>
로 시작한다.
태그는 대소문자를 구분하지 않는다.
그 안에 속성으로 구분된다.
헤드 태그는
다음과 같은 태그들이 들어간다
타이틀 태그 - 웹 브라우저에 문서의 제목이 나온다.
메타 태그 - 인코딩 방식,
스타일 태그 - 스타일 시트를 이용해서 문서의 배경색상, 줄간격 등 문서의 형식을 지정
LINK 태그 - 문서와의 관계를 나타냄, 외부 스타일 시트를 삽입할 때 사용
베이스 태그 - HTML 문서 내에서 사용하는 상대경로가 실제로는 어떤 절대경로를 토대로 지정되는지를 나타냄
*메타 태그 - 검색어에 대한 값 부여
한글 코드로 인코딩 되도록 함
스타일 태그 폼
스타일 시트 문서를 만들어서 링크 태그를 통해 불러와서 작성할 수도 있고
따로 작성할 수도 있다.
:link 아직 방문하지 않은 링크의 모양
:visited 방문했던 링크 모양
:active 클릭하는 순간의 모양
위 3개는 바디 태그에 속함
:hover 마우스를 링크위에 올려놓을 때의 모양
바디 태그에 속하지 않음
문단은 바디 태그를 통해서 몸체 부분을 지정
br 한 줄을 바꾸기, HTML에서 br 없이는 줄바꿈이 되지 않음, 닫음을 쓰지 않음
p 문단을 바꿀 때 paragraph 태그를 사용
hr 내용을 구분할 때 사용, 선을 그어서 표시, size 1~7까지 있음
center 태그 사이에 있는 내용을 가운데로 정렬
div 문서를 구분하여 문단별로 정리, 스타일을 담는 컨테이너 역할을 해주는 특별한 역할
pre 사용자가 작성한 내용을 그대로 나타내고자 할 때 사용
blockquote 인용문을 사용을 할 때 나타내는 태그
OL 순서를 매긴 숫자 목록
UL 숫자가 아닌 특수기호를 사용하는 목록
LI 목록의 각각의 내용을 정의
DL 용어에 대한 정의 목록을 나열
DT 용어 제목을 표시
DD 용어에 대한 정의 내용을 기술
TT 타자체 모양으로 내용을 처리
I 이텔릭체
B 굵은 글씨체
U 문자에 밑줄
SUB 태그 사이의 문자를 아래첨자로 보여줌
SUP 태그 사이의 문자를 위첨자로 보여줌
STRIKE 문자에 취소선을 삽입
CODE 프로그램 소스 코드를 나타낼 때 사용
CITE 인용문 표현
Hn 글자 크기를 정해주는 태그 제목으로 글자를 표시하기 때문에 조금 더 크게 나타내준다. 1~6까지 있다. 숫자가 작을수록 큰 글자가 표시된다.
FONT 문자의 크기와 모양을 지정, size와 color 지정
<!-- --> 설명문, 주석을 기입할 수 있다. 기능을 하는 것이 아니라 프로그래머가 설명문을 남긴 것
ADDRESS
IMG 이미지 태그, 이미지 맵 태그
<MAP> <AREA> </MAP> 한 그림 안에 여러 링크를 넣어줄 수 있는 태그, 맵 에어리어, 이미지 맵을 쓸 경우 사용하는 태그, 원형으로 할지 사각형으로 할지 shape라는 속성으로 할 수 있다.
<APPLET 속성> HTML 문서에 자바 애플릿을 붙여 넣어 동적인 속성을 넣을 수 있다.
OBJECT 이미지, 플러그인, 애플릿을 넣을 때 사용
A 태그
문서를 연결하는 태그
href : 링크하고자 하는 문서명이나 URL을 명시하는데 사용
name : HTML 문서 내에서 특정한 위치를 나타낼 때 사용
target : 링크 부분을 방문해 나타나는 내용이 기존의 웹 브라우저 창과 어떤 관계가 있는지를 지정
ㄴ _self : 현재의 문서가 있는 창을 링크
ㄴ _parent : 현재의 문서의 상위 창을 링크
ㄴ _blank : 이름 없이 새로운 창을 링크
ㄴ _top : 현재 창의 최상위 창을 링크
ㄴ 특정한 창 이름 : 프레임에서 이미 정의되어 있는 창을 링크
어떤 링크를 적어줬다 그러면 이 URL 내용을 클릭했을 때 열리는 내용이 현재 문서에 열리거나 다른 속성을 통해서 다른 문서에 열릴 수 있다.
음악 재생 관련 태그
EMBED 음악, 동영상, 플래시 파일 등을 다운로드 시작과 동시에 재생
src, width, height, loop, autostart, showcontrols, hidden 등
TABLE
TR 태그 - 행
TD 태그 - 열
TH 태그 - 제목과 관련된 내용일 때 주로 사용, TD보다 약간 굵은 글씨체로 표현
프레임셋 : 문서를 여러개의 틀로 나눔, 바디 태그를 쓰지 않음
프레임 : 각 분할된 창의 속성을 지정
노프레임스 : 프레임이 없는 웹 브라우저에서는 이 내용들이 표시가 됨
아이프레임 : HTML 문서 내에서 다른 HTML 문서를 보여주려고 할 때 사용
FROM 태그 : 입력 양식, 체크 박스(다중 선택이 가능), 레디오 박스(하나만 선택이 가능) 하나를 선택
INPUT 태그
SELECT 태그 : 여러 개의 목록을 보여주면서 이 목록 중에서 하나를 선택할 수 있도록 해주는 선택 박스
OPTION 태그 : 선택의 내용들을 지정
TEXTAREA 태그 : 텍스트를 적어줄 수 있는 입력 상자
자바스크립트
자바 애플리케이션이나 자바 애플릿과 다르게 소스 코드 자체가 사용자의 브라우저에서 직접 번역되서 수행된다.
<HTML> </HTML> 태그는 아니지만 자바스크립트로된 언어가 있다. HTML 문서 내에 적을 수 있다.
사용자에게 어떤 모양으로 보여준다.
번역을 할 때 거뜬하게 다 번역을 할 수 있다.
해석이 될 수 있다.
<HTML> 문서 사이에 직접 기술을 한다.
~.js 라고 저장을 한다.
특별한 단어가 있다. 예약어라고 부른다.
변수 즉 담아주는 그릇인 변수 이름으로는 사용될 수 없다.
funtion, return, var, if, new, for, while, case, this 등
변수를 어떻게 만드는가?
사용자가 입력한 값
프로그램 중 입력한 값을 담아주는 그릇
메모리 상에서 잠시 저장되는 어떤 내용들을 기억하고 있는 공간을 변수라고 한다.
만들 때 규칙이 있다.
영문 대소문자, 숫자, 밑줄을 사용할 수 있다.
첫 글자는 영문자나 밑줄로 시작해야 한다.
예약어는 변수로 사용할 수 없다.
그리고 대소문자를 구분한다.
제어문
if-else, switch-case 형태의 조건문, while, for, do-while 형태의 반복문, break, continue의 반복종료 및 연결문, return과 같은 함수값 반환문 등이 있다.
while : 조건이 만족되면 계속 실행, 조건이 만족되지 않을 때까지 실행
for : while과 비슷하지만, for문은 초기값을 주고, 그 초기값이 조건을 만족시키는 동안에만 반복 실행
do-while : 실행문이 최초에 한번 처리 된 후, 조건을 검사하고 그 조건이 만족되지 않으면 계속 반복
함수 (Function)는 특정한 작업을 독립적으로 수행하는 단위를 말한다.
function 함수 이름 (매개변수1, 매개변수2, ...) {
함수 본문 문장들
}
내장함수: 이미 시스템에 저장되어 있는 함수
alert() : 경고 상자
eval() : 문자열로 입력된 수식을 계산
parseInt()와 parseFloat()은 각각 정수와 실수로 바꿔주는 함수
confirm() : 메시지 내용을 사용자에게 알려서 확인 취소 버튼이 나오도록 해주는 함수
객체는 상태(속성)과 행동(메소드)를 함께 가리키는 단위
예를 들어 window창은 객체이다. 이에 속성은 높이와 너비가 있고 메시지는 연다, 크기가 커진다 작아진다 등 메서드, 행동이 있겠다.
자바스크립트에 이미 정의되어 있는 객체들이 있다.
이를 자바스크립트 내장객체라고 부른다.
Array 객체
하나이면서 공간들이 있어서 각 공간안에 값이 담겨지는 것이 바로 배열
배열 객체에 사용되는 메서드가 있다.
이것이 하는 행동들이 바로 메서드이다.
join() : 배열들을 하나의 문자열로 만들어 준다.
concat(A) : 현재 배열에 'A' 배열을 합해서 새로운 배열로 만들어준다.
reverse() : 배열을 역순으로
slice(a,e) : a와 e를 뽑아서 하나의 배열로 만들어준다.
sort(compareFunction) : 조건대로 정렬해준다. 그냥 sort()하면 사전 차례 순 즉 오름차순으로 정렬을 해주게 된다.
Date 객체 한번씩 쭉 읽어봐주시고
각각이 어떤 내용을 의미하는지를 한번씩 봐주시길 바란다.
String 객체는 문자열을 정의하는 것이다.
Math 객체
Math 객체 : 수학 계산을 위한 객체
Boolean 객체
부울 값을 변환하는 객체 (참이나 거짓)을 나타내는 객체
window
브라우저 객체 구성
window.document.open() 이라는 행동을 이용하면
open() 함수를 사용할 수 있다.
window 객체에 있는 메서드를 알아주면 된다.
alert() : 경고창을 보여줌
confirm () : [확인] 대화상자
eval() : 문자열을 숫자로 변환
focus() / blur() : 특정 객체에 포커스 설정/포커스 삭제
이벤트 핸들러
이벤트는 객체의 상태 변화를 유발시키는 조건
조건에 대해서 조절자가 바로 이벤트 핸들러
onLoad : html 문서를 읽을 때 발생
onUnload : html 문서가 사라질 때 발생
onError : html 문서를 읽던 중 에러가 발생한 경우
onFocus / onBlur : 포커스를 얻을 때 / 포커스를 잃을 때 발생
Document 객체
HTML 본문(BODY) 정보 관리
속성들로는 이렇게 태그와 관련된 여러가지 속성들이 있다.
open() / close() : 문서 시작 알림 / open() 메서드로 열려진 문서를 닫아줌
clear() : 문서 내용 지움
write() / writeIn() : 문서 내용 출력/줄 바꿈하여 출력
onFocus() / onBlur() : 문서가 focus를 얻는 순간 / 문서가 focus를 잃는 순간
onClick() / onDbClick() : 문서에서 클릭되었을 때 / 더블클릭했을 때 발생
onKeyDown() / onKeyUp() : 키보드의 키를 눌렀을 때 / 키를 눌렀다가 놓을 때 발생
onKeyPress() : 키보드의 키를 누르고 있는 동안 발생
onMouseDown() : 마우스 버튼을 눌렀을 때 발생
onMouseOut() : 마우스가 어떤 대상을 벗어날 때
onMouseOver() : 마우스를 어떤 대상 영역 안으로 놓을 때
History 객체
웹 브라우저의 히스토리 정보를 이용하여 이동
Locatoin 객체
웹 브라우저 주소표시줄의 URL 주소 정보 제공
href : 문서의 URL 주소
hostname : URL의 호스트 이름
등
reload() : 문서를 다시 읽어옴
replace() : 문서를 지정된 URL 문서로 대치
자바란 자바스크립트와 비슷하게 느껴질지 모르겠지만
전혀 다른 프로그래밍 언어이다.
다양한 플랫폼에서 사용 가능한 프로그래밍 언어이다.
전자기기의 관한 프로그래밍을 할 때, 핸드폰에 관한 프로그래밍을 할 때, 웹 브라우저 창에관한 프로그래밍을 할 때, 어디서든 사용할 수 있는 언어가 바로 자바 프로그래밍 언어이다.
자바 언어는 자바 애플리케이션을 만드는데 사용이 된다.
1. 자바 애플리케이션
자바 독립적인 응용프로그램을 만들어서 사용
소스 코드 자체는 *.java 라는 확장자를 가지게 되고
실제로 실행이 되는 파일은 *.class 파일이 있는데
원본 파일을 컴파일을 함으로써
클래스 파일을 만들어내면
실행되는 파일이 된다.
실행은 그냥 되지 않고
자바 가상머신을 통해서 실행이 되게 된다.
자바 애플릿
자바 애플릿으로써 자바가 활용될 수 있다.
자바를 통해서 자바 애플릿을 만들어낼 수 있겠다.
이 자바 애플릿은 웹 브라우저 상에서 자바스크립트처럼 쭉 실되는 것이 아니라
독립적인 애플릿 파일이 따로 있어서
사용자 시스템에 다운로드, 서버로부터 다운로드가 된 후에 사용자 측에서 실행이 되는
방식으로 보여지게 된다.
자바 애플리케이션, 자바 애플릿, 자바스크립트 이 차이점을 반드시 확인해주면 좋겠다.
자바 애플리케이션 - 자바라는 것으로 작성된 응용 프로그램을 말한다.
바이트 코드로 변환 후에 실행이 된다.
바이트 코드로 변환된다는 것은 *.java라고 되어있는 것을 컴파일이라는 과정을 통해서 *.class라는 파일로 만들어내고
그 *.class를 자바 가상 머신이 실행을 시킨다.
자바 애플릿 - 자바로 작성된 작은 프로그램
바이트 코드로 변환 후 웹 브라우저에서 번역이 된다.
자바 스크립트 - 웹 브라우저 소스 코드 안에, HTML 소스 코드 안에 그대로 사용하기 때문에
웹 브라우저 자체에서 이 코드 자체를 그대로 번역을 시킨다.
이것을 다른 말로 하면
객체 참조와 관련이 있다.
자바 애플리케이션은 정적 바인딩
자바 애플릿은 정적 바인딩
자바스크립트만 동적 바인딩이다.
바인딩이라는 것은 변수나 함수 타입이 실행 중에 결정이 되는데
값들이 확정되서 더 이상 변경이 될 수 없는 상태가 되는 것이 바로 바인드가 된 상태이다.
값들이 고정되는 상태로 되는 것이 어떨 때 결정이 되느냐에 따라서 정적이냐 동적이냐 이렇게 결정된다.
정적 - 한번 정해지면 더 이상 바뀌지 않는다. 컴파일 과정을 통해서 하는 것들이 바로 정적 바인딩이 되겠다.
동적 - 실행할 때 바로 바인딩 과정이 일어나게 된다.
자바 스크립트는 동적 바인딩이다. 나머지는 정적 바인딩이다.
저작기법 내용중에서
저작을 위한 소프트웨어는 어떤 것들이 있는지 기억해주기 바란다.
이미지 제작과 관련된 것 그리고 웹 에디터들 이렇게 구분해서 외워주어야 한다.
웹페이지를 제작하는 방법
메모장에서 손을 이용해서 일일이 태그를 적어서 사용하는 방식
워드 프로세서를 사용해서 HTML로 다른이름으로 저장
전문 홈페이지 제작 도구인 웹 에디터를 사용하는 것이다. (위지윅 방식으로 되어 있다.)
눈으로 그때 그때 결과값을 보면서 하는 것이 바로 위지익 방식
이미지 하나를 추가하면 이미지 추가한게 웹 브라우저 상에서 어떻게 나타나는지를 그때 그때 봐가면서 하는 것
HTML 언어 외에도
웹 프로그래밍 언어가 있다.
DHTML, XML, ASP, JSP 등이 있다.
이 중에서 Dynamic HTML 이라고 불리는 DHTML을 알아주면 좋다.
이미지와 텍스트를 이용한 애니메이션을 구현할 수 있다. 다이나믹한 웹 페이지를 제작할 때 사용하는 언어가 되겠다.
HTML을 기본으로 하되, 스타일 시트나 자바스크립트를 조합해서 사용하는 것
HTML, CSS(Style sheet), Java Script를 조합해서 대화형 웹사이트를 제작하는 것이다.
웹 브라우저 상에서 그대로 해석이 되는 것
XML은 HTML 처럼 태그 형태로 되어 있는데 사용자가 태그를 지정할 수 있다.
XML에서
DTD는 XML 문서 안에서 허용할 수 있는 구조들을 정의하는 코드 집합이다.
사용자가 어떤 태그를 만들어서 쓸 때 이 DTD를 정의해주는 것
JSP나 ASP, PHP 등이 있다.
웹 서버에서 실행이 된 후에 사용자에게 결과값을 보여주는 프로그래밍 언어가 되겠다.
웹 에디터, 이미지 제작 도구, 애니메이션 멀티미디어 제작 어떤 것들이 있는지 쭉 읽어봐주시면 좋겠다.
특별히 웹 에디터의 종류가 어떤 것들이 있는지 그리고 이미지 제작 도구가 어떤 것들이 있는지 기억해주면 좋겠다.
기타 웹 페이지 저작 관련 기술 중에서 CGI를 기억해주면 좋겠다.
CGI는 Common Gateway Interface가 되겠다.
공통적인 관문에 대한 인터페이스라고 할 수 있다.
어떤 관문이냐라면 사용자가 어떤 요청을 보내면 서버에 보내면 서버 안에서 그것을 처리를 해서 요청에 대한 응답을 다시 사용자에게 보내준다. 이 과정 자체에 대한 것이 바로 CGI이다.
웹 서버가 클라이언트 컴퓨터 (사용자 컴퓨터)의 브라우저를 통해서 사용자로부터 데이터를 입력받고 이에 대한 처리결과를 제공하는 웹 서버와 프로그램 사이의 표준 인터페이스이다.
CGI에 대한 정의
그리고 CGI와 관련해서 FORM 태그를 이용할 수 있다.
CGI에 있어서 즉 사용자 컴퓨터에서 웹 서버쪽으로 값을 넘겨주는 전달하는 방식이 있다.
- GET : 사용자의 입력값을 환경 변수를 통해서 전달한다. 값의 길이에 제한이 있다.
- POST : 표준 입출력을 통해서 값을 전달하는 방식. 값의 길이에 제한이 없다. 대부분의 CGI 프로그램은 POST 방식으로 구현하고 있다.
웹 서버 중에서는 아파치, PWS, IIS 종류들이 있다.
감사합니다.
'웹 디자인 기능사' 카테고리의 다른 글
| [웹 디자인 기능사] 08. 컴퓨터 그래픽스 일반 (3) | 2024.12.28 |
|---|---|
| [웹 디자인 기능사] 06. 웹 페이지 검색 (3) | 2024.12.27 |
| [웹 디자인 기능사] 05. 인터넷의 기초 (2) | 2024.12.26 |