HTML과 태그

HTML

HTML의 개념

Hyper Text Markup Language

웹 문서를 기술하기 위해 사용하는 국제 표준 언어

마크업(Markup) 언어로서 태그(Tag)를 사용하여 데이터의 구조를 표현한다.

HTML 문서는 ASCII코드로 구성된 일반적인 텍스트 형태이다.

HTML 문서는 일반 에디터(메모장), 워드프로세서, 홈페이지 제작 도구를 통해 작성한다.

HTML 문서의 확장명은 .htm 또는 .html 이다.

HTML 문서 구조

<!DOCTYPE html>
<html lang="">
<head>
    <title>문서 제목</title>
</head>
<body>
    문서의 내용
</body>
</html>

HTML 태그

태그의 사용

태그는 시작 태그와 종료 태그가 한 쌍을 이루어 사용된다.

종료 태그가 없는 태그도 있다.

태그 이름은 대소문자를 구분하지 않는다.

줄바꿈이나 빈칸을 인식하지 못하기 때문에 줄바꿈과 빈칸을 위해 지정된 태그를 사용하여 표현한다.

HEAD

HEAD : 문서 자체에 대한 설명

TITLE : 웹 브라우저 제목 표시줄에 문서의 제목

META : HTML 문서의 일반 정보, 종료태그 X (작성자, 검색 키워드, 문서 파기일자 등)

문단

BODY : 본문의 시작과 끝 지정

HR : 수평선 삽입, 종료태그 X (속성 : size, width, align 등)

BR : 줄바꿈, 종료태그 X

P : 문단 바꿈

CENTER : 가운데 정렬

DIV : 문서를 구분하여 문단별로 정렬, 문서의 특정 영역이나 섹션 정의, 스타일을 담는 컨테이너 역할

UL : 순서가 없는 기호 목록 작성

OL : 순서가 있는 기호 목록 작성

LI : 목록 각각의 내용 정의, 종료태그 X

DL : 용어에 대한 정의 목록

DT : 용어의 제목

DD : 용어의 내용

글자

Hn : 제목 글자 표현, 1~6까지이며 1이 가장 큰 글자

FONT : 글자의 크기와 모양 지정

!-- -- : 주석문 처리

I : 이탤릭체

B : 굵은 글씨체

U : 밑줄

SUP : 위첨자

SUB : 아래첨자

STRIKE : 취소선

CITE : 인용문

CODE : 프로그램 소스 코드

그 외

웹 서버 (HTTPD 프로세스 실행 서버)

웹의 정보를 저장하고, 웹 서비스를 지원하는 서버이다.

IIS : 윈도우 용 서버
PWS : 개인용 서버
Apache : 리눅스

멀티미디어 및 양식 태그

멀리미디어

멀티미디어 삽입

A : 문서, 이미지 등을 하이퍼링크로 연결

EMBED : 멀티미디어 개체 삽입

OBJECT : 멀티미더 개체 삽입 (플레이어 지정, html 4.0 이상 사용)

IMG : 이미지 삽입, 종료태그 X

MAP : 이미지맵 작성

AREA : 이미지맵 안에서 영역 분할

APPLET : 자바 애플릿 삽입

A 태그 속성

href 속성
- href : 링크할 문서명이나 url 명시
- mailto : 전자메일 링크 설정
- name : 특정 위치를 나타냄
target 속성
- _blank : 새로운 창에 링크 표시
- _self : 현재 창에 링크 표시
- _parent : 현재 창 이전의 상위 프레임에 링크 표시
- _top : 현재 창의 최상위 창에 링크 표시

표, 프레임 태그

표

TABLE : 표의 시작과 끝을 의미

TR : 행 (가로 분할)

TD : 열 (세로 분할)

TH : td 태그와 동일하나 제목과 관련된 내용일 때 사용

CAPTION : 표 제목(캡션) 표시

TABLE 태그 속성

width : 표 너비
border : 표 테두리 두께
cellpadding : 셀과 셀 내용 사이의 간격 (내부 두께)
cellspacing : 셀과 셀 사이 간격

프레임

◇ 프레임 ? 홈페이지 페이지 화면 단위, 웹 브라우저 창 자체를 분할하는 역할

FRAMESET : 문서를 프레임으로 분할

FRAME : 각 분할된 프레임 창에 속성 지정, 종료태그 X

IFRAME : html 문서 내의 일부분만 프레임으로 분할

문서 양식

FORM : 입력 양식 (CGI 프로그램으로 데이터 전달)

INPUT : 선택 양식 지정, 종료태그 X

SELECT : 선택 리스트 지정

TEXTAREA : 2줄 이상 text 입력상자

DHTML, CSS, XML

DHTML/CSS

DHTML

Dynamic HTML : 동적 HTML

웹 문서를 기술하기 위한 국제 표준 언어

HTML의 단점을 개선한 것으로 동적 웹 페이지를 제작하기 위한 기술이다.

HTML, CSS, Javascript를 조합하여 대화형 웹 페이지를 제작한다.

사용자 측 웹 브라우저에서 실행되기 때문에 서버 부담이 적다.

애니메이션 구현이 가능하다.

CSS

Cascading Style Sheet

HTML 문서 형태를 위한 언어로 스타일 시트라고도 한다.

텍스트 스타일, 여백 형식, 페이지 요소들의 배치 등 웹 페이지 스타일과 관련된 제반 속성들을 지정한다.

다른 브라우저 환경에서 동일한 문서 형태를 제공한다.

HTML 4.0에서는 콘텐츠 배치, 레이아웃 등 자유롭게 조절이 가능하다.

외부 스타일 시트 문서의 확장자는 .css 이다.

HTML 본문 안에 사용하는 내부(inline) 스타일 시트와 HTML 본문과는 별도로 작성되는 외부(internal) 스타일 시트가 있다.

내부 스타일 시트는 스타일 정보가 웹 페이지 자체 내에 있고, 외부 스타일 시트는 스타일 정보가 웹 페이지와 연결된 외부 파일에 있다.

내부 스타일 시트와 외부 스타일 시트가 충돌할 경우, 충돌하지 않은 외부 스타일 시트는 그대로 상속되어 적용된다.

스타일 시트 관련 태그

STYLE : 스타일 시트를 정의하여 head 태그 안에 사용

LINK : 외부 스타일 시트 삽입

DIV, SPAN : 특정 범위에 스타일 시트 적용

스타일 시트와 body 태그 속성

a:link : 방문하지 않은 링크 모양

a:visited : 방문한 링크 모양

a:active : 링크를 클릭하는 순간 모양

a:hover : 링크 위에 마우스를 올려놓을 때의 모양

XML/XHTML

XML

eXtensible Markup Language

웹 문서를 기술하기 위한 국제 표준 언어

HTML 처럼 태그 형태로 되어 있는 마크업 언어이다.

HTML과 달리 사용자가 태그를 지정할 수 있어서 태그 확장이 가능하다.

태그 정의와 XML 문서의 제반 사항을 정의한 부분을 DTD(Document Type Definition, 코드 집합)이라고 한다.

XHTML

eXtensible HyperText Markup Language

웹 문서를 기술하기 위한 국제 표준 언어

XML 규칙을 따르면서 HTML과도 호환되도록 새롭게 만든 마크업 언어이다.

HTML에 비해 엄격한 문법을 가진다.

XHTML에서는 종료 태그가 없는 태그에도 />를 붙여서 닫아야 한다.

웹 프로그래밍 언어의 수행방식

클라이언트 측 수행 방식

클라이언트의 요청 사항이 클라이언트 측 웹 브라우저에서 바로 실행되어 나타난다.

HTML, CSS, DHTML, XML, XHTML

서버 측 수행 방식

클라이언트의 요청 사항이 서버 측에서 먼저 실행된 후, 그 결과만 클라이언트 측 웹 브라우저에 반환되어 나타난다.

ASP, JSP, PHP

웹 프로그래밍 언어 사용

ASP(Active Server Page)는 동적인 웹 문서를 제작하는 기술로써 기존의 CGI 기술의 단점(서버 부담, 실행 시간 소요)을 극복하는 대안으로 제시되었다.
ASP는 윈도우 웹 서인 IIS 기반에서 지원된다.

JSP(Java Server Page)는 웹 서버 쪽에서 실행되는 것으로서 자바로 작성된 스크립트 프로그램이다.
JSP는 다양한 웹 서버에서 지원된다.

▶ ASP, JSP, PHP는 웹 서버쪽에서 실행이 된 후에 사용자에게 결과 값을 보여주는 프로그래밍 언어 이다.

◇ CGI (commin Gateway Interface)

웹 서버가 클라이언트 컴퓨터의 브라우저를 통해 사용자로부터 데이터를 입력받고 이에 따른 처리 결과를 제공하는 웹 서버와 프로그램 사이의 표준 인터페이스 이다.

HTML 문서에서 CGI 프로그램을 호출/실행하기 위해서는 form 태그를 사용한다.

GET / POST 방식이 있다.

자바스크립트

개념

Java Script

넷스케이프 커뮤니케이션스와 선 마이크로시스템즈가 공동 개발한 스크립트 언어(컴파일을 하지 않고 바로 실행시킬 수 있는 언어)이다.

객체 지향적 언어로서 내장되어 있는 객체를 사용한다.

인터렉티브(상호작용) 웹 페이지 제작을 위해 사용한다.

소스 코드를 HTML 문서 안에 포함하여 작성한다.

서버가 아닌 사용자 측 웹 브라우저에서 직접 번역되어 수행된다.

인터프리터에 의해 실행되고 컴파일 과정이 없다.

모든 운영체제, 하드웨어에서 사용할 수 있어 플랫폼에 독립적이며 이식성이 높다.

문법이 간단해 비교적 손쉽게 프로그램을 만들 수가 있다.

사용

SCRIPT 태그 안에 기술한다.

자바스크립트 소스 코드를 별도 파일로 작성하여 사용할 수 있다.

별도의 파일로 작성할 경우 확장자는 .js 이다.

변수, 연산자, 제어문

변수명

영문 대소문자, 숫자, 밑줄(_)을 사용하여 만든다.

특수기호나 공백 문자를 사용할 수 없다.

변수명의 첫 글자는 반드시 영문자나 밑줄로 시작한다. (숫자시작은 안됨)

예약어는 변수명으로 사용할 수 없다.

대소문자 구분한다.

변수 종류

전역 변수

함수 밖에서 선언
프로그램 전체에서 사용
변수 선언을 하지 않고 사용할 경우 전역 변수가 됨

지역 변수

var 이용해 선언
변수가 정의된 함수 내에서만 사용
선언된 중괄호 { } 안에서만 사용

연산자 우선순위

( ), [ ] : 최우선 연산자
++, -- : 증감 연산자
*, /, %, +, - : 산술 연산자
>>, <<, >>> : 시프트 연산자
>, <, >=, <=, ==, != : 비교 연산자
&, ^, | : 비트 연산자
&&, || : 논리 연산자
=, +=, -= : 대입 연산자

제어문

if~ else

if 조건을 검사하고 만족되면 실행문을 처리하고, 만족하지 않으면 else를 처리

switch-case

switch 에 입력된 값에 따라 case 구문으로 이동하여 처리

while

자바스크립트 반복문 조건이 만족되면 계속 실행, 조건이 만족되지 않을 때까지 실행

while과 비슷하지만, for문은 초기값을 주고, 그 초기 값이 조건을 만족시키는 동안에만 반복 실행

do-while

실행문이 최초에 한 번 처리된 후, 조건을 검사하고 그 조건이 만족되지 않으면 계속 반복

그 외

◇ HTML 문서에 자바스크립트 소스 코드 포함하기

객체 지향 스크립트 언어

HTML 문서 사이에 직접 기술

변수 사용 시 미리 선언하지 않아도 됨

변수를 미리 선언하고 싶으면 var 사용 (초기값 지정 가능)

자바스크립트 내장함수와 내장객체

내장함수

함수(Function)는 특정한 작업을 독립적으로 수행하는 단위를 말한다.

함수는 어떤 값을 매개변수를 통해 입력 받을 수 있으며, 결과 값을 반환한다.

객체에 속한 함수를 메소드라고 한다.

내장함수는 이미 시스템에 정의되어 있는 함수로서 사용자가 함수의 정의 없이 사용할 수 있는 것이다.

내장함수 종류

alert() : 메시지 창 생성

eval() : 문자열로 입력된 수식 계산

parselnt() : 문자열을 정수로 변환

parseFloat() : 문자열을 실수(부동소수점)로 변환

confirm() : 확인/취소 버튼이 나타나는 메시지 창 생성

escape() : 문자의 ASCII값 변환

setTimeout() : 일정 시간이 지난 후 지정된 명령 호출

setInterval() : 일정 시간마다 지정된 명령을 반복 호출

내장객체

객체와 메소드

객체는 데이터의 조합으로서 속성(property)과 메소드(함수)를 함께 가리키는 단위이다.

속성은 객체가 가진 성질 또는 상태를 나타낸다.

메소드는 객체에 속한 함수로서 객체의 동작을 나타낸다.

객체는 객체의 상태 변화를 유발한 이벤트를 가질 수 있다.

내장객체

내장객체는 모든 자바스크립트 환경에서 이용이 가능한 핵심적인 객체로 자바스크립트에서 자체적으로 지원하는 것이다.

내장객체 종류

Array 객체 : 비슷한 종류의 데이터를 하나의 배열로 생성
(length 속성 : 배열의 길이(요소 개수))

Date 객체 : 날짜와 시간 처리

Srting 객체 : 문자열 처리

Math 객체 : 수학 계산

Number 객체 : 문자열 숫자를 숫자로 변환

Screen 객체 : 컴퓨터 화면 해상도, 화면 크기, 색상 정보 등 알아볼 때 사용

Array 객체 메소드

join() : 배열 요소들을 하나의 문자열로 반환

concat(배열) : 현재 배열에 '배열'을 합해 새로운 배열로 반환

reverse() : 배열의 값을 역순으로 반환

slice(a, e) : 배열 중에서 a부터 e까지의 요소로 세로운 배열 생성

sort(조건) : 배열 요소들을 '조건' 대로 정렬 (조건이 없을 경우 오름차순)

String 객체 메소드

split(분리자) : '분리자'를 이용하여 문자열을 분리함으로써 두 개 이상의 문자열로 반환

replace() : 특정 문자열을 지정한 문자열로 변경

match() : 일치하는 문자열 반환

toLowerCase() : 소문자 형태로 반환

toUpperCase() : 대문자 형태로 반환

자바스크립트 브라우저 내장객체

브라우저 내장객체

개념

익스플로러와 같은 웹 브라우저 관련 객체를 말한다.

브라우저에 있는 창, 문서, 도구 모음, 상태표시줄 등에 해당하는 객체들의 정보를 제어한다.

계층 구조로 되어 있으며 상위 객체와 하위 객체가 있다.

▶ 상위 객체, 하위 객체, 메소드()

객체 종류

Window 객체 : 웹 브라우저 창을 위한 속성과 메소드를 제공

Document 객체 : 웹 브라우저에서 실행되는 HTML 문서의 본문 정보 관리

Frame 객체 : HTML 문서의 프레임 정보를 제공

History 객체 : 웹 브라우저의 히스토리 정보를 이용하여 이동

Location 객체 : 웹 브라우저 주소표시줄 url 주소 정보를 제공

Window 객체 속성

self/window : 자기 자신의 창

top : 현재 프레임의 최상위 프레임 (자기 자신도 가능)

opener : 현재 창을 열게 한 부모 창 참조

closed : 창이 닫혀 있는 상태 식별

history/location : 객체 창의 history 객체/ location(주소입력) 객체

이벤트 핸들러

Event(객체의 상태 변화를 유발시키는 조건) Handler (조건을 조절해주는 조절자)

이벤트(하나의 행위) 발생 시 그 이벤트에 따른 반응을 하도록 함

JAVA

자바와 자바스크립트는 별도의 언어이다.

다양한 플랫폼에서 사용가능하며 객체 지향 언어이다.

활용

자바 애플리케이션

자바로 제작된 독립적인 응용 프로그램

소스코드는 '*.java'로 생성되고 컴파일 후 '*.class'(실행가능 파일) 파일이 생성된다.

자바 가상머신이 있어야 실행이 가능하다.

자바 애플릿

웹 서버에서 실행되지 않고, 애플릿을 요청한 사용자의 시스템에 다운로드 후 사용

비교

구분	java application	java applet	java script
실행 방식	바이트 코드 변환 후 실행	바이트 코드 변환 후 웹 브라우저에서 번역	웹 브라우저에 의해 코드 자체가 번역
객체 지향	객체 지향 기반 (클래스 중심)	객체 지향 기반 (클래스 중심)	객체 지향 기반 (클래스나 상속성은 없음)
존재 형태	단독 실행 가능	애플릿 형태로 HTML 문서에 포함	HTML 문서에 삽입된 형태
변수 선언	변수 타입 미리 선언	변수 타입 미리 선언	변수 타입 선언 없이 사용 가능
객체 참조	정적 바인딩 (컴파일 시 검사)	정적 바인딩 (컴파일 시 검사)	동적 바인딩 (실행 시 검사)

◇ 바인드 상태 ? 변수나 함수 타입이 실행 중에 결정되는데, 값들이 확정되어 변경할 수 없는 상태가 된 것

바인드 상태가 결정되는 상황에 따라 정적 바인딩 / 동적 바인딩으로 나뉜다.

Author And Source

이 문제에 관하여(웹디자인기능사 필기 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@oxxun21/웹디자인기능사-필기-정리-jqn9y2s3

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

웹디자인기능사 필기 정리

HTML과 태그

HTML

HTML의 개념

HTML 태그

태그의 사용

HEAD

문단

목록

글자

그 외

멀티미디어 및 양식 태그

멀리미디어

멀티미디어 삽입

A 태그 속성

표, 프레임 태그

표

프레임

문서 양식

DHTML, CSS, XML

DHTML/CSS

DHTML

CSS

XML/XHTML

XML

XHTML

웹 프로그래밍 언어의 수행방식

클라이언트 측 수행 방식

서버 측 수행 방식

웹 프로그래밍 언어 사용

자바스크립트

자바스크립트

개념

사용

변수, 연산자, 제어문

변수명

변수 종류

연산자 우선순위

제어문

그 외

자바스크립트 내장함수와 내장객체

내장함수

내장객체

객체와 메소드

내장객체

자바스크립트 브라우저 내장객체

브라우저 내장객체

개념

이벤트 핸들러

JAVA

활용

비교

Author And Source

좋은 웹페이지 즐겨찾기