Internet

전 세계를 연결하고 있는 국제 정보 통신망

WWW (World Wide Web)

인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보공간

Web browser

웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 프로그램

웹의 동작 원리

Client

서비스를 요청하는 사용자 혹은 사용자의 단말기

Server

서비스를 제공하는 컴퓨터

Request

클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지

Response

클라이언트로부터 요청을 전달받아 정보를 클라이언트로 전달하는것

Protocol

컴퓨터들끼리 정보를 교환할 때의 통신규약

DNS

Domain Name System Service
컴퓨터가 서로 통신하는데 사용하는 숫자 IP주소로 변환되는 쉽게 읽을 수 있는 도메인 이름의 디렉터리

HTTP

Hyper Text Trransfer Protocol
서버와 클라이언트가 인터넷 사이에 웹문서를 전송하기 위해 사용하는 통신규약
하이퍼 텍스트를 기반으로 데이터 전송

URL

Uniform Resource Location
웹 문서의 수많은 서비스를 제공하는 서버들에 있는 파이르이 위치를 표시하는 표준

HTML

Hyper Text Markup Language
웹페이지에 정보를 담아 표시하기 위한 마크업 언어

Hyper Text
현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트

Markup

tag

시작태그 <> , 끝태그 </>

< h> content < /h>

속성 블록

태그에 추가 정보를 부여할 때 사용
해당 요소에 추가적인 내용을 담고 싶을 때

< h 속성이름 ="속성 값" >

HTML 페이지 구조

• 헤드와 바디로 이루어짐

Body 태그 속성

글자 태그

hr 태그 속성

align
color
width
size

앵커 태그

글자체

b 태그 : 시각적인 의미만 강조 -> 디자인 요소, CSS로 대체
Strong 태그 : 실질적 의미 강조 -> 웹 접근성을 높임

목록 태그

< ul> : 리스트가 들어갈 공간을 만들어주는 태그 (순서 X)
< ol> : 리스트가 들어갈 공간을 만들어주는 태그 (순서 O)
< li> : 목록 요소, 실제 리스트 값이 담기는 태그, ul,ol모두 사용

테이블 태그

<>
table 태그 : 테이블이 들어갈 공간을 생성
tr 태그 (table row): 테이블에 한 줄(행)을 생성
th 태그 (table head) : 제목 셀로 값이 담기는 태그
td 태그 (table data) : 일반 셀로 값이 담기는 태그
rowspan : @ row(행)을 1 row로 묶음 (세로 셀병합)
// <시작태그 rowspan="합칠 행갯수" >
colspan : @개의 컬럼을 1개의 column으로 묶음 (가로 셀 병합)
// <시작태그 colspan="합칠 열갯수" >

• tr태그 속성
  

이미지 태그

img 태그 : 웹 페이지에 이미지를 띄우는 태그
-> src : 이미지 경로 작성
-> alt : 사용자에게 이미지를 설명 > 네트워크 오류, 컨텐츠 차단 등 이미지를 불러올 수 없을 때 사용

• 상대경로 : 특정 위치를 기준으로 파일을 가지고 오는 경로

• 이미지 넣는 방법

1. 현재 위치 기준 : ./를 사용해서 사진을 가져올 수 있음
2. 상위 폴더 기준 : ../를 사용해서 상위 폴더로 이동하고 경로를 찾아 파일을 가져올 수 있음
3. 루트 기준 : / 만 사용해서 최상위로 올라가서 폴더를 찾아 경로 이동
4. 이미지 주소 복사 : 넷상에서 이미지 주소복사를 하여 img 태그에 넣기

입력 양식 태그

form 태그

웹페이지에 입력폼을 만들 때 사용

form 태그 속성

input 태그

• input 태그 기본
  

1. 타입

종류
1) type = checkbox : 다중선택 가능
2) type = radio : 다중선택 가능
3) type = submit : 제출버튼 (기본값 : 제출)
3) type = reset : 초기화버튼 (기본값 : 초기화)

• 속성값

2. name
   선택 도구 그룹화

3. value
   선택 값 구분

   값을 넣어주면서 커스텀 가능 ex) submit -> 등록하기로 변경

select 태그

선택 목록 상자 공간 생성

• option태그 : 목록 상자 안 값 생성

• textarea
  여러 줄의 텍스트를 입력할 수 있는 태그

  rows, cols를 사용해서 높이와 넓이를 조절할 수 있음
  

공간 분할 태그

block 형식	inline 형식
div태그	span 태그
h1 ~ h6 태그	a 태그
p 태그	input 태그
목록 태그	글자 형식 태그
테이블 태그
form 태그

div

block 형식으로 공간을 분할하는 태그

span

inline 형식으로 공간을 분할하는 태그

style 태그

• 1 내부
  CSS 시작 알람
  작성위치 : head 태그 안 (title 태그 밑)

  

• 외부
  

• 인라인
  
  // 인라인 스타일방식은 가독성 저하로 권장 X