728x90
32. HTML과 태그 |
1. HTML (Hyper Text Markup Language) 개념
- Markup 언어
- 파일 형식 : .html
- HTML 문서는 ASCII 코드로 구성된 일반적인 텍스트 파일
- 컴퓨터 시스템이나 운영체제에 독립적임
- HTML로 제작된 페이지는 웹 브라우저에서 해석되어 실행됨
- HTML의 문서는 태그(Tag)로 구성됨
- HTML 문서 내의 단어나 그림을 마우스로 클릭하여 그것과 연결된 새로운 문서로 이동하게 하는 하이퍼링크 기능 제공
- 사용자의 운영체제에 상관없이 브라우저만 있느면 HTML로 작성된 모든 웹 문서들을 읽을 수 있음
- HTML 4.0에서는 CSS를 이용하여 색상과 폰트, 레이아웃을 자유롭게 조절할 수 있음
2. HTML 문서의 구조
3. HTML 태그
- 태그의 사용
- 태그 안에 속성을 정의할 수 있음
- 태그는 시작 태그와 종료 태그가 한 쌍을 이루어 사용되지만, 종료 태그가 없는 태그도 있음
- 태그 이름은 대문자와 소문자를 구분하지 않음
- 문단 관련 태그
| <BODY> </BODY> |
- 본문의 시작과 끝 지정 - 사용할 수 있는 속성 * BGCOLOR : 배경색 지정 * BACKGROUND : 배경으로 사용될 이미지 파일 지정 * TEXT : 일반 글자색 지정 * LINK : 링크로 설정한 글자색 지정 |
| <HR> | 수평선 |
| <BR> | 줄 바꿈 |
| <CENTER> </CENTER> |
태그 사이의 문단을 가운데 정렬 |
| <P> | 문단을 바꿀 때 사용 |
| <DIV> </DIV> |
문서를 구분하여 문단별로 정렬 |
- 목록 관련 태그
| <OL></OL> | 순서가 있는 목록 |
| <UL></UL> | 순서가 없는 목록 |
| <LI> | 목록 각각의 내용 정의 |
- 글자 관련 태그
| <FONT> | 폰트 태그에서 사용할 수 있는 속성 Family(글꼴), Size(글꼴 크기), Weight(글꼴 두께), Color(글꼴 색상), Spacing(글자 간격), Height(행 간격) |
| <H1> | - 특정한 문장을 가장 큰 글씨로 화면에 출력하고자 할 때 사용 - <H1> ~ <H6>까지 사용하며 숫자가 작을수록 글자 크기가 큼 |
| | 글자 사이를 공백으로 띄움 |
| <B> </B> | 굵은 글씨체 |
| <U> </U> | 밑줄 |
| <SUB> </SUB> | 아래 첨자 |
| <I> </I> | 이탤릭체 |
| <CITE> </CITE> |
짧은 인용구 표시 |
| <CODE> </CODE> |
프로그램 코드 글자 모양 |
- 이미지 관련 태그
웹 페이지에 삽입할 수 있는 이미지 형식 : PNG, JPG, GIF
| <IMG> | 이미지를 첨부하는 태그로 이미지의 경로를 지정 |
| <MAP> | - 이미지 맵을 지정하는 태그 - 한 이미지 위에 여러 개의 링크를 지정할 수 있는 기능 |
| <AREA> | 이미지 맵에 클릭할 수 있는 영역의 위치 값 지정 |
- 색상 관련 태그
| <BODY bgcolor="#색상값"> | 배경 색상 지정 |
| * 흰색 표현 방법 : #ffffff / white / ffffff * 검은색 표현 방법 : #000000 / black / 000000 |
|
- 일반 정보 태그
| <META> | 문서의 작성자, 날짜, 주요 단어 등 웹 브라우저의 내용에는 나타나지 않는 웹 문서의 일반 정보를 나타낼 때 사용 |
4. 표/프레임 태그
- TABLE(표) 관련 태그
| <TABLE> </TABLE> |
표의 시작과 끝 |
| <TR> </TR> | 표의 행(가로) |
| <TD> </TD> | 표의 열(세로) |
| <TH> </TH> | <TD>와 동일하나 제목과 관련된 내용일 때 사용 |
| <CAPTION> </CAPTION> |
표 제목(캡션) |
- <TABLE> 태그 속성
| <TABLE width="1920" border="3" cellpadding="0" cellspacing="0"> |
| width : 표 가로 사이즈 border : 테이블 테두리 두께 cellpadding : 셀 구분선과 셀 안의 문자간의 여백 설정 cellspacing : 셀과 셀 사이의 간격(테이블 내부의 선의 두께) |
- HTML 작성 시 프레임(Frame)의 크기를 설정하기 위한 방법
- 백분율로 구분하는 방법
- 픽셀 수로 설정하는 방법
- 상대 비율로 설정하는 방법
5. 주석문
나중에 본인 혹은 다른 사람이 코드를 봤을 때 프로그램 내용을 빨리 파악할 수 있도록 도와주는 문구
<!-- 여기는 주석문입니다. -->
33. 멀티미디어 및 양식 태그 |
1. 멀티미디어 삽입 관련 태그
| <EMBED> </EMBED> |
| HTML 문서에서 음악이나 동영상 등의 멀티미디어 파일을 삽입하여 재생하고자 할 때 사용 |
2. 음악 관련 태그
| <BGSOUND src="파일명"> |
| 배경음악 삽입 |
3. 동영상 파일 형식의 확장자 종류
MPG, SWP, AVI, ASF, RM, WAV, MP4, MOV
4. 사운드 파일 형식의 확장자 종류
RA, AIFF, AU, WAV, MP3
5. 하이퍼링크(Hyperlink)
- 문서 간 이동이나 한 문서 내에서의 이동을 위해 사용되는 링크를 의미하며, 특정한 단어나 그림을 선택하면 이들과 연결된 다른 문서 혹은 다른 미디어로 이동하는 역할
- 링크 관련 태그
| <a href="www.google.com" target="_blank"> |
| <A href> | - 다른 페이지로 이동하는 링크를 연결하는 태그 - 문서, 이미지 등을 하이퍼링크로 연결 - A는 앵커(Anchor)를 지칭 |
| Target | _blank : 링크된 문서를 새 창에 보여줌 |
| _parent : 현재 창의 부모 프레임(한 단계 상위 페이지)에 링크된 문서가 나타남 | |
| _self : 링크된 문서를 하이퍼링크가 있던 현재 프레임에 보여줌 | |
| _top : 링크된 문서를 창 전체에 보여줌 |
33. DHTML, CSS, XML |
1. SGML (Standard Generalized Markup Language) - 1960년대
- 문서용 마크업 언어를 정의하기 위한 메타 언어
- IBM에서 1960년대 개발한 GML(Generalized Markup Language )의 후속이며, ISO의 표준
2. XML(eXtensible Markup Language) - 1990년대 말
별도의 Plug-in 프로그램이 없어도 웹 브라우저에서 재생 가능
3. XHTML(eXtensible Hyper Markup Language) - 2000년대
- 웹 문서를 기술하기 위한 국제 표준 언어
- 마크업 언어 중 가장 나중에 만들어짐
4. 동적 HTML(DHTML : Dynamic HTML) - 2014년 이후
- 기존 HTML의 단점을 개선하여 동적인 웹페이지를 만들 수 있도록 하기 위한 것으로 브라우저에서 실행되어 서버의 부담이 적고, 이벤트에 대한 즉각적 반응이 가능함
- 웹 페이지를 다이내믹하게 구성하기 위한 기법
- 기존의 HTML 문서에 문서객체모델(DOM) 기능 첨가
5. CSS (Cascading Style Sheet) - 캐스케이딩 스타일 시트
- HTML 문서 형태를 위한 언어로 '스타일 시트'라고 함
- 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는 데 많은 제약이 따르므로 이를 보완하기 위해 만들어짐
- CSS의 종류
- HTML 본문 안에 사용되는 내부(Inline) CSS : <STYLE> </STYLE>
- HTML 본문과는 별도로 작성하여 문서로 저장하는 외부(Internal) CSS : *.css
- 내부 스타일 시트 적용 시 <HEAD> </HEAD> 태그 내에서 자유롭게 정의할 수 있음
- Inline CS와 Internal CS가 부분적으로 충돌할 경우, 충돌하지 않는 Internal CS는 그대로 상속 적용됨
- 스타일 시트에서 글꼴, 색상, 크기, 정렬 방식, 그림자 등을 미리 지정하여 필요한 곳에 적용할 수 있음
- OS나 프로그램에 관계없이 누구나 동일한 문서 내용을 볼 수 있도록 함
- 하나의 문서만 수정해도 한꺼번에 여러 페이지의 외형과 형식을 수정할 수 있음
- 같은 스타일 시트를 사용하는 문서에는 문서들의 일관성을 쉽게 유지할 수 있음
- 웹 문서 내에 특정 영역에만 영향을 주기 위해 <SPAN>, <DIV> 태그 사용
- 스타일 시트(CSS) 적용 시 우선순위
| 우선순위가 높음 ↑ ↓ 우선순위가 낮음 |
Inline |
| Id 선택자 | |
| Class 선택자 | |
| 태그 선택자 |
35. 자바스크립트 |
1. 자바스크립트(Java Script)의 개념
- 썬 마이크로시스템즈와 넷스케이프가 공동으로 개발한 스크립트 언어
- HTML 내에 삽입되어 홈페이지를 좀 더 동적이고 다양하게 제작할 수 있도록 하며 인터랙티브 웹 페이지 제작을 위해 사용
- 소스 코드가 HTML 문서에 포함되어 실행되는 스크립트 언어
- 변수 타입 선언 없이 사용 가능
- 객체지향적 프로그래밍 언어로 내장 객체 사용
- 소스가 공개됨
- 데이터 형을 설정하지 않아도 됨
- 모든 플랫폼에서 인터프리터에 의해 실행 가능
- 클라이언트 측에서 수행됨
- 상호작용적인 웹 문서를 만들 수 있도록 지원
- 자바스크립트에서 문자는 항상 큰따옴표(" ") 또는 작은따옴표(' ')로 감싸줘야 함
2. 자바스크립트의 두 가지 작성 방법
- HTML 문서 내의 <head><script> ... </script></head> 에 작성
- HTML 문서와 별도의 파일로 작성하여 사용할 수도 있는데, 이때 연결되는 자바스크립트 파일의 확장자는 .js로 함
3. 자바스크립트의 장점
- 컴파일 과정을 거치지 않기 떄문에 신속한 개발을 할 수 있음
- HTML문서 내에 직접 코드를 삽입하므로 빠르게 작성할 수 있음
- 웹상에서 인터렉티브한 웹 페이지를 만드는데 많이 사용됨
- 운영체제의 제한을 받지 않으므로 어떤 운영체제와 하드웨어에서도 작동하는 이식성이 높은 언어
- 문법이 간단해 손쉽게 프로그램을 만들 수 있음
4. 예약어
- 예약어란 자바스크립트에서 이미 사용하는 단어로써 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어 (this, if, for, else)
- 예약어는 정해진 기능을 하도록 설정되었으므로 변수로 사용할 수 없음
5. 변수
- 프로그래밍 언어에서 처리해야 하는 데이터를 담을 수 있도록 도와주는 도구 역할.
즉, 변수를 통해서 데이터에 접근하고 데이터를 업데이트 할 수 있음 - 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
- 변수명 사용 시 주의사항
- 변수는 문자, 숫자, $, 언더바(_)만 사용할 수 있음
- 특수기호나 공백 문자는 사용할 수 없음
- 첫 글자는 반드시 영문자나 언더바(_)로 시작하고 숫자 및 특수 문자로 시작할 수 없음
- 대문자와 소문자를 구분하며 가급적 상수는 대문자로 사용
- 변수명은 읽기 쉽고 이해할 수 있게 선언해야 함
- 대부분 명사(단어)로 지정
- 변수의 종류
| 전역변수 | - 함수 안과 밖에서 모두 사용할 수 있음 - 변수를 선언하지 않고 사용하는 경우에는 전역변수가 됨 |
| 지역변수 | - 반드시 함수 내에서만 선언되어야 함 - 선언된 중괄호 { } 안에서만 사용할 수 있음 - 지역변수 선언은 var 키워드를 사용하여 선언 |
6. 연산자 우선순위
| 우선순위가 가장 높음 ↑ ↓ 우선순위가 가장 낮음 |
( ), [ ] | 최우선 연산자(= New Array와 동일한 의미) |
| ++, -- | 자동 증감 연산자 | |
| *, /, %, +, - | 산술(사칙) 연산자 | |
| >>, <<, >>> | 시프트 연산자 | |
| >, <, >=, <=, == != | 비교 연산자 | |
| &, ^, | | 비트 연산자 | |
| &&, || | 논리 연산자 | |
| =, +=, -= | 대입(할당) 연산자 |
웹디자인기능사 필기 무료 강의
유선배 웹디자인기능사 필기 과외노트 도서를 바탕으로 제작된 무료 강의입니다 :) 이 영상 보시고 꼭 웹디자인기능사 필기에 합격하시길 기원합니다. ❤︎
www.youtube.com
728x90
SMALL
728x90
LIST
'Study > Publishing' 카테고리의 다른 글
| [웹디자인기능사] 필기 41 컴퓨터 그래픽스 개념 및 정의 ~ 45 웹 페이지 기획 (0) | 2024.01.10 |
|---|---|
| [웹디자인기능사] 필기 36 자바스크립트 내장 함수 ~ 40 웹 페이지 저작기법의 특징 (0) | 2024.01.09 |
| [웹디자인기능사] 필기 25 인터넷 프로토콜 종류 ~ 31 인터넷 검색기의 특징 (1) | 2024.01.07 |
| [웹디자인기능사] 필기 19 색의 조화 ~ 24 인터넷 서비스 종류 (2) | 2024.01.05 |
| [웹디자인기능사] 필기 13 강조와 대조(대비) ~ 18 지각적 효과와 감정적 효과 (1) | 2024.01.05 |
