- 목 차 -
#17. 네트워크와 프로토콜 (출제빈도 : 상)
#18. HTML과 태그 (출제빈도 : 상)
#19. 멀티미디어 및 양식 태그 (출제빈도 : 중)
#20. DHTML, CSS, XML (출제빈도 : 하)
#17. 네트워크와 프로토콜 (출제빈도 : 상)
1. 프로토콜(Protocol)
* 프로토콜의 개념 : 네트워에서 데이터 전송을 오류없이 효율적으로 구현하기 위한 약속, 규범
* OSI 7계층 모델
| 7 | 응용 | 네트워크 관련 응용 프로그램 수행 HTTP, SMTP, FTP, TELNET 등 |
| 6 | 표현 | 데이터 표현 기법의 차이 해결. 압축, 인코딩, 암호화 담당 |
| 5 | 세션 | 응용 프로그램간 연결 확인 |
| 4 | 전송 | 컴퓨터 간 연결 확립. Tranport 데이터 흐름제어, 에러제어 |
| 3 | 네트워크 | 논리적인 링크 구성. 전송 경로 설정 |
| 2 | 데이터 링크 | 오류 없는 데이터 전송 담당 |
| 1 | 물리 | 실제 물리적인 전송 매체 사이 연결 |
* TCP/IP : 기본 통신 프로토콜
- 서로 다른 종류 시스템 끼리 원활한 데이터 전송 지원
| 응용 계층 | 응용 프로그램 수행. 하위계층으로 메시지 전달 HTTP, FTP, SMTP |
| 전송 계층 | 데이터 전송 제어 TCP, UDP |
| 인터넷 계층 | 주소관리, 전송 경로 설정 |
| 네트워크 인터페이스 계층 | 전송 매체 사이 연결 |
* TCP/IP에서 사용되는 프로토콜
| TCP | 신뢰성있는 데이터 전송 - 연결형 TELNET, FTP, NNTP, SMTP, POP3 |
| UDP | 재전송, 흐름제어가 없는 빠른 데이터 전송 - 비연결형 SNMP, DHCP |
| IP | 데이터(패킷)가 수신자에 도착하도록 지원 - 비연결형 |
| ICMP | 데이터 전송 오류를 송신측에 보고, 기능 확인 |
| ARP | IP 주소를 물리적 주소로 변환 |
| RARP | 물리적 주소를 IP로 변환 |
* OSI 7계층과 TCP/IP 계층
| [ OSI 7계층 ] | [ TCP/IP ] |
| 7계층 응용 | 응용 계층(HTTP, SMTP, FTP, TELNET 등) |
| 6계층 표현 | |
| 5계층 세션 | 전송계층 (TCP, UDP) |
| 4계층 전송 | |
| 3계층 네트워크 | 인터넷 계층 (IP, ARP, RARP, ICMP) |
| 2계층 데이터 링크 | |
| 1계층 물리 | 네트워크 인터페이스 계층 (이더넷, 토큰링 등) |
2. 네트워크
* 영역에 따른 네트워크 분류
- LAN
- MAN : LAN보다 넓은 대도시 지역 LAN끼리 연결
- WAN : 광대역
- VAN : 부가가치 통신망
* 통신망의 종류
- ISDN : 하나의 회선으로 전화, 회상, 데이터 통신 등 통합 제공
- ADSL : 비대칭 디지털 가입자 회선
- VDSL : 초고속 디지털 가입자 회선. 고속의 데이터 전송. 대용량
* 네트워크 위상 (토폴로지) : 장단점 알아두는 것 좋음
- 통신선 장치 배열에 따른 네트워크 형태
 |
1. 스타형 : 모든 단말기들이 중앙에 1:1 연결 - 장점 : 중앙 제어 가능, 새로운 단말기 추가 용이 - 단점 : 중앙이 고장나면 다 고장 |
 |
2. 링형 : 단말기들이 링 형성 - 장점 : 단말기 수 많아져도 성능 문제 없음 - 단점 : 하나의 고장이 다 고장일으킴 |
 |
3. 버스형 : 단말기들이 한개 선로로 연결 - 장점 : 비용 절감, 일부가 고장나도 전체 영향 안줌 - 단점 : 새로운 단말기 추가로 전체 성능이 떨어질수 있음 |
 |
4. 트리형 : 허브 사용하여 여러개 연결 - 장점 : 확장성 용이, 하위 단말기 고장나도 다른 단말기에는 영향 안줌 - 단점 : 허브에서 병목현상이 발생하게 되면 전체 기능 저하 우려. 고장 야기. |
#18. HTML과 태그 (출제빈도 : 상)
1. HTML (HyperText Markup Language)
* HTML 개념 : 웹문서 기술하기 위한 국제 표준 언어
- Markup 언어로서 Tag를 사용하여 데이터를 구조
- ASCII 코드로 구성된 일반적인 텍스트 형태
* HTML 문서의 구조
<HTML>
<HEAD> 헤드 부분으로 사이트 정보 등 본문 내용이 아닌 것들
<TITLE>문서의 제목</TITLE>
</HEAD>
<BODY>
본문 내용들
</BODY>
</HTML>
2. HTML 태그
* 태그의 사용 : 시작과 종료는 한 쌍
- 종료태그가 없는 것도 있음 : br, img 등
- 대소문자 구분 안함
- 줄바꿔도 무관
<!-- 태그는 기본적으로 쌍으로 이루어져 있지만 아닌 것들도 있다. -->
한줄 띄우는 <br>
한 줄 그어주는
<hr>
그림을 넣는 <img>* head 부분 관련 태그
<head></head> 문서 자체 설명
<title></title> 제목표시줄에 문서 제목
<meta> 문서 정보 기입
* 문단 관련 태그
<body></body> 본문 시작과 끝
<hr> 수평선 : 속성에는 size, width, align 등
<br> 줄바꿈
<p></p> 문단 바꿈
<center></center> 가운데 정렬
<div></div> 문서를 구분해서 문단별 정렬
body 태그 속성
- bgcolor 문서 배경
- background 문서 배경 이미지
- text 문자 기본 글자색
< 괄호 >는 생략하겠습니다.
* 목록 관련 태그
ul 순서없는 기호 목록
ol 순서있는 숫자 목록
li 목록 안 내용들
dl 용어에 대한 정의
dt 용어의 제목 title
dd 용어 내용
* 글자 관련 태그
H1~H6 제목글자 숫자작을수록 커짐
font 글자 폰트 크기, 모양 지정
<!-- --> 주석문
i 이탤릭체
b 글자 굵게
u 글자 밑줄
sup 위첨자
sub 아래첨자
strike 취소선
cite 인용문만들기
code 소스코드 사용
<cite>인용문만들어주기</cite>
<code><h1>11</h1></code>인용문만들어주기
글자제목 제일 크게 만들어주는 태그
#19. 멀티미디어 및 양식 태그 (출제빈도 : 중)
1. 멀티미디어 관련 태그
* 멀티미디어 삽입 관련 태그
a 하이퍼링크
embed 멀티미디어 개체 삽입
object 멀티미디어 개체 삽입 플레이어를 지정
img 이미지 삽입
map 이미지맵 삽입
area 이미지맵 안에서 영어 분할
applet 자바 애플렛 삽입
A 태그 hreft 속성
<a href="http://map.kakao.net">카카오맵열기</a>
href는 링크할 문서명이나 url을 명시하는것
mailto를 사용하면 메일을 보낼 수 있는 링크를 만들 수 있다.
<a href="mailto:ddp0513@gmail.com">주인장에게 메일보내기</a>
A태그의 속성으로 target을 사용하는데
가장 많이 사용하는것은 _blank 새로운 창에 링크가 나타남
_self 현재 창에 실행
_parent 현재 창 이전(상위) 프레임에 링크 실행
_top : 현재 창 최상위 창에 링크 실행
2. 표, 프레임 태그
* 표관련 태그
table 표의 시작과 끝
tr 표안에 행
td 표안에 열
th td와 같은 기능이지만 제목과 관련된 내용일때 사용
caption 표 제목 표시
table 태그 속성
<table width="300" height="200" border="Y" cellpadding="20" cellspacing="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>width 너비
border 표 테두리
cellpadding 셀 안에서 간격
cellspacing 셀과 셀 사이의 간격 maring같은것
* 프레임 관련 태그
frameset 프레임으로 분할
frame 단일로 사용 프레임창에 속성 지정
iframe HTML 문서 내 일부분만 프레임으로 분할
frameset 태그 속성
rows 프레임을 행으로 나눔
cols 프레임을 열로 나눔
border 프레임 경계선 크기 지정 0은 안보임
frame 태그 속성
src 프레임 내부 문서 경로
name 프레임 이름
scrolling 스크롤 표시 여부
noresize 프레임 크기 변경 금지
3. 문서 양식 태그
*문서 양식 제작 태그
form 입력양식 만들기
input 선택 양식 지정. 라디오 버튼, 체크 박스
select 선택 리스트 만들기
textarea 2줄 이상 텍스트를 넣을 수 있는 입력상자
<form>
<input type="checkbox">
<select name="test">
<option value="11">11</option>
<option value="22">22</option>
</select>
<textarea style="width: 500px;"></textarea>
</form>대충 위처럼 쓰면 아래와 같이 나옴
#20. DHTML, CSS, XML (출제빈도 : 하)
1. DHTML와 CSS
* DHTML (Dynamic HTML) : 사용자 웹브라우저에서 실행되므로 서버의 부담이 적다
* CSS (Cascading Style Sheet) : 스타일 시트라고 불리운다.
- 텍스트 스타일, 여백 형식 등 웹페이지 스타일 속성 작성
- 각기 다른 브라우저 환경에서 동일하게 제공
<style> </style> 스타일 시트 정의 <head>안에서 사용
<link> 외부 스타일 지정 <link rel="stylesheet" src="">
<div>, <span> 특정 범위안에 스타일시트 적용
아래 내용은 A태그안에 여러 스타일을 적용해본 것
<style type="text/css">
a:link {text-decoraion:none; color:#ff0000;}
a:visited {text-decoraion:none; color:#00ff00;}
a:active {text-decoraion:none; color:#00ff00;}
a:hover {text-decoraion:none; color:#0000ff;}
</style>a 태그에 text-decoration 속성을 none을 줘서 스타일을 주지 않았고
link 방문하지 않은 링크 일때는 컬러를 빨강으로
visited 방문한 링크 일때는 컬러를 파랑으로
active 링크를 클릭할때 컬러는 파랑으로
hover 마우스를 위에 올리면 컬러를 초록으로 스타일을 설정
요 링크에서 확인하기
2. XML과 XHTML
* XML (eXtensible Markup Language) : 웹 문서를 기술하기 위한 국제 표준언어
- 태그 확장 가능
* XHTML (extensible HyperText Markup Language)
- HTML에 비해 엄격한 문법
- BR태그 닫아줘야 하는 등
3. 웹 프로그래밍 언어의 수행 방식
* 클라이언트 측 수행 방식
- 클라이언트가 요청했을 때 클라이언트 측 웹 브라우저에서 바로 실행되어 나타나는
- HTML, DHTML, CSS, XML, XHTML
* 서버 측 수행 방식
- 클라이언트 요청에 따라 서버측에서 먼저 실행 후 결과만 웹브라우저에 반환
- ASP, JSP, PHP
목차로 이동하기
to be continued...
'about WEB DESIGN > 2021 웹디자인기능사 준비' 카테고리의 다른 글
| 웹디자인기능사 필기핵심이론 공부 Part. 7 : #24. 컴퓨터 그래픽스의 개념과 역사 ~ #25. 컴퓨터 그래픽스의 원리 (0) | 2021.01.12 |
|---|---|
| 웹디자인기능사 필기핵심이론 공부 Part. 6 : #21. 자바스크립트 ~ #23. 자바스크립트 브라우저 내장객체 (0) | 2021.01.12 |
| 웹디자인기능사 필기핵심이론 공부 Part. 4 : #13. 인터넷의 개념 ~ #16. 웹브라우저 (0) | 2021.01.09 |
| 웹디자인기능사 필기핵심이론 공부 Part. 3 : #10. 색의 대비와 효과 ~ #12. 색채조화와 배색 (0) | 2021.01.09 |
| 웹디자인기능사 필기핵심이론 공부 Part. 2 : #5. 형태의 분류와 심리 ~ #9. 표색계 (1) | 2021.01.06 |
댓글