| 웹 |
| * 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간으로 인터넷의 통신망 위에서 작동하는 서비스 |
| * 웹의 역사 : 팀버너스리가 하이퍼링크를 포함하는 문서의 개념 제안 월드와이드웹 개발, 배포 웹표준단체 W3C 창설 |
| * 웹의 특징 HTTP(Hyper Text Transfer Protocol) HTML(Hyper Text Markup Language)로 작성된 문서 연결 텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공 * 반응형 웹 : 웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경 |
| 웹 처리 과정 |
| 네트워크를 통해 서로 연결된 컴퓨터들 간에 서버와 클라이언트의 역할을 나누고, html이라는 마크업 언어를 통해 자료를 주고받는 시스템 |
| HTML이란? |
| 웹에서 정보를 표현할 목적으로 만든 마크 업 언어 Hyper Text Markup Language 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석기호인 태그드로 이루어진다 마크업(태그) : 문서의 논리적인 구조를 정의하고, 출력장치에 어떠한 형태로 보여질 것인지 지시하는 역할 마크업언어 : 마크업(태그)의 형식과 규칙을 정의한 언어 |
| HTML5 특징 - 구조적 설계 지원(시멘틱) - 그래픽 및 멀티미디어 기능 강화 - CSS3 / JAVASCRIPT 지원 - 모바일 웹 지원/ 장치 접근 가능(배터리정보, 카메라, GPS) 등 - 웹 브라우저가 서버와 양방향 통신 가능 - 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작 |
| HTML5 구성요소 <p align = `center'> HTML/CSS </p> 시작태그 속성 속성값 종료태그 |
| - 태그(tag) <>로 묶인 명령어 <시작태그>와 </종료태그> 한 쌍으로 이용 - 요소(element) 시작태그와 종료태그로 이루어진 모든 명령어, 하나의 html 문서는 요소들의 집합이다 - 속성(attribute) 요소의 시작태그에만 사용/ 명령어 구체화 역할 여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백 - 변수/ 속성값 (Argument) 속성이 가지는 값, 값 입력 시 "" 혹은 ''를 이용 |
<!DOCTYPE html> <!-- 이 문서는 HTML5 입니다. -->
<html> <!--열기 : 웹 문서의 시작-->
<head>
<!--head : 현재 웹 문서의 설정-->
<!--문서의 각종 정보와 문서 자체데 대한 설명 내용-->
<!--<title>, <meta>, <link>, <style>, <script> 등-->
<title>박머루페이지</title>
<style>
body { background-color: rgb(230, 189, 230);} <!--페이지 색깔-->
</style>
</head>
<body>
<!--body : 현재 웹 문서의 화면에 보여줄 내용-->
<!--head에 들어가는 태그를 제외하고 모든 태그 사용-->
Hello World I'm happy!!!!!!!
</body>
</html> <!--닫기 : 웹 문서의 끝-->| HTML5 주의사항 |
| - 태그는 대소문자를 구분하지 않으나, 소문자 권장 - 시작태그로 시작하면 반드시 종료태그로 종료 <head> ~~~ </head> - 파일 확장자는 반드시 html, htm으로 설정할 것 - 문자의 공백은 한 개만 인식한다. 공백을 추가하기 위해서는 특수기호를 이용해야 함 ( ) |
Hello World!!!!!!! <!--공백-->| <!DOCTYPE> |
| <!DOCTYPE html> 문서의 형식을 알려주는 태그 |
| <html></html> |
| html 문서의 시작, 끝 표시 lang은 이 페이지가 어느 나라 언어로 되어있는지 의미 -- 검색 엔진이 페이지 검색 시 참고, 검색 사이트에서 특정 언어를 제외할 때 사용 <html lang = "ko"> -- html 뒤에 붙는 lang을 속성이라고 함 -- lang의 속성 값 : 설정언어 |
| <!-- 주석 --> |
| HTML에서 사용하는 주석 코드 작성 내용에 대해 설명하는 곳에 사용 브라우저는 주석 부분을 해석하지 않고 넘어감 |
| 0_인덱스 |
<!DOCTYPE html> <!-- emmet 자동완성 도구 (느낌표 + 탭) -->
<html>
<head>
<title>HTML 수업 내용</title>
</head>
<body>
<h1> HTML 수업 내용 </h1>
<a href="1_sample.html">1. 샘플페이지</a>
</body>
</html>'국비 > HTML_CSS_' 카테고리의 다른 글
| CSS 선택자_화면 구조 잡기 (0) | 2022.05.18 |
|---|---|
| HTML5 영역 관련 태그 (0) | 2022.05.05 |
| HTML5 표 관련 태그 (0) | 2022.05.05 |
| HTML5 목록 관련 태그 (0) | 2022.05.05 |
| HTML5 글자 관련 태그 (0) | 2022.05.01 |