< WEB과 HTML >
▶ 웹이란?
- WWW(World Wide Web) : 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간
- HTTP라는 프로토콜을 사용해 TCP/IP 네트워크에서 사용하기 시작
- 인터넷 상에서 멀티미디어 정보(그림, 소리, 영상 등)를 하이퍼텍스트 방식으로 연결하여 제공
▶ 웹의 구성요건
- HTML : 하이퍼텍스트 문서 작성을 위한 도구
- HTTP 프로토콜 : 웹 브라우저와 웹 서버 간 문서를 교환해주는 프로토콜
- URL : 요구하는 정보를 관리하는 사이트
▶ HTML이란?
- Hyper Text Markup Language
- 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 기능을 가진 문서를 만드는 언어
| 태그 | 뜻 |
| <html> | HTML 문서의 루트 요소 |
| <head> | HTML 문서의 메타데이터 |
| <body> | 웹브라우저를 통해 보이는 내용 |
| <title> | HTML 문서의 제목 |
| <h1~6> | 제목 |
| <p> | 단락 |
▶ 텍스트 요소
- 주석 : <!--주석내용-->
- 줄바꿈 : <BR>
- 줄바꿈 되지 않도록 함 : <NOBR>
- 엔티티 : HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 만든 문자셋
| 엔티티 이름 | 엔티티 문자 | 엔티티 이름 | 엔티티 문자 |
| | 공백 | & | & |
| < | < | > | > |
| " | " | ' | ' |
| 0 ~ 9 | 숫자 0 ~ 9 | A ~ Z | 영문자 A ~ Z |
| [ ~ z | 영문자 a ~ z | @ | @ |
▶ <font> 태그
- 구조 : <font 속성1="값1" ···>내용</font>
| 속성 | 의미 |
| color | 글자 색 지정 |
| size | 글자 크기 지정 |
| face | 글씨체 지정 |
▶ <img> 태그
- 구조 : <img src="이미지경로" width="" height="" border="" alt="대체문자열">
- <img> 태그는 종료 태그가 없음
▶ <table> 태그
| 태그 | 뜻 |
| <tr> | 테이블의 열을 구분 |
| <th> | 각 열의 제목 |
| <td> | 각각의 셀로 나누기 |
| 속성 | 의미 | 속성 | 의미 |
| bgcolor | 배경색 | border | 테이블 경계선 굵기 |
| width | 너비 | height | 높이 |
| align | 셀의 가로줄 정렬 (수평정렬) left, center, right |
valign | 셀의 세로줄 정렬 (수직정렬) top, middle, bottom |
| colspan | 열 합치기 | rowspan | 행 합치기 |
▶ 폼(form)
- 웹브라우저를 통해 입력된 모든 데이터를 한번에 웹서버로 전송하는 양식
| 태그 | 뜻 |
| form | 폼 정의 (최상위 태그) |
| input | 사용자 입력 |
| select | 항목 선택 |
| textarea | 여러 줄 입력 |
▶ <form> 태그
- 구조 : <form 속성1="값1"[속성2="값2" ···>내용</form>
- 단독으로 쓰이지 않고 다양한 정보를 입력하는 양식 포함
| 속성 | 의미 |
| action | 폼 데이터를 받아 처리하는 웹 페이지의 URL 설정 |
| method | 폼 데이터가 전송되는 HTTP 방식 설정 |
| name | 폼을 식별하기 위한 이름 설정 |
▶ <input> 태그
| 속성 | 속성 값 | 의미 |
| type | text | 한 줄 텍스트 입력 |
| radio | 라디오 버튼 (하나만 선택) | |
| checkbox | 체크박스 (다중선택) | |
| password | 암호 입력 | |
| file | 파일 선택 | |
| button | 버튼 모양 출력 | |
| reset | 초기화 | |
| submit | 서버에 전송 | |
| name | 텍스트 | 이름 설정 |
| value | 텍스트 | 초기값 설정 |
▶ <select> 태그
- 구조 : <select 속성1="값1"[속성2="값2" ···>
<option 속성1="값1"[속성1]>항목1</option>
···
</select>
- 여러 개 항목이 나타나는 목록 상자에서 항목 선택
| 속성 | 의미 | 속성 | 의미 |
| name | 상자 이름 | value | 항목 값 설정 |
| multiiple | 다중 선택 | selected | 초기값 설정 |
▶ <textarea> 태그
- 구조 : <textarea 속성1="값1" [속성2="값2" ···]>···</textarea>
- 여러 줄의 텍스트 입력
| 속성 | 속성 값 | 의미 |
| name | 텍스트 | 이름 설정 |
| cols | 숫자 | 텍스트 영역 너비 |
| rows | 숫자 | 텍스트 영역 높이 |
| wrap | off | 줄바꿈 설정 |
| soft | 자동으로 행바꿈 | |
| hard | 캐리지 리턴 문자 전달 |
'2020-2 STUDY > Web Study' 카테고리의 다른 글
| Web Study week 5 (0) | 2020.11.18 |
|---|---|
| Web Study week 2 - 3 (0) | 2020.09.23 |
| Web Study week 2 - 2 (0) | 2020.09.23 |