웹(Web)이란?
- World Wide Web의 줄임말
- WWW라고 부르기도 함
- 인터넷을 이용해 정보를 공유할 수 있는 공간
- 가상 공간의 네트워크가 거미줄처럼 연결되어 있어 '웹'이라고 부르게 됨
웹 표준(Web Standard)
- 웹에서 사용되는 표준 기술이나 규칙을 의미
- W3C의 권고안에서 나온 기술들이 여기에 해당
- 이 표준 기술들을 기준으로 웹 브라우저들이 만들어지는데, 브라우저를 만드는 업체에서 표준 기술을 해석하는 차이 및 새로운 기술 삽입(표준화 제정 단계에 따른) 등으로 조금 다르게 구동되는 브라우저가 생기게 됨
- 웹 브라우저 = 크롬, IE, 사파리 등
- 브라우저를 만드는 업체 = 구글, MS, 애플 등
크로스 브라우징(Cross Browsing)
- 각자 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면이나 같은 동작 등)을 줄 수 있도록 제작하는 기술 및 방법 등
웹 접근성(Web Accessibility)
- 정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적 혹은 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 컨텐츠를 제작하는 방법
- 청각 장애인을 위해 영상에 자막을 넣거나, 마우스를 사용할 수 없는 사람들을 위해 키보드를 통해서도 웹을 사용할 수 있게 하거나, 이미지에 대체 텍스트를 제공하는 것 등이 모두 웹 접근성에 해당
HTML(Hyper Text Markup Language)
- 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어
- 웹의 구조를 담당
- 튼튼한 구조를 만드는 것에 집중해야함
CSS(Cascading Style Sheets)
- 마크업 언어(HTML, XML 등)가 실제 표시되는 방법을 지정하여 컨텐츠 구조를 꾸며주는 정적 언어
- 웹의 시각적인 표현을 담당
- 디자인 요소에 집중해야함
JS(JavaScript)
- 컨텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 동적 언어
- 웹의 동적 처리를 담당
- jQuery : 자바스크립트 라이브러리 문서로, 자바스크립트의 명령을 간단하고 안전하게 사용할 수 있게 함
태그(Tag)
- 태그는 열리고(open) 닫히는(close) 구조를 가지고 있으며 한 쌍으로 이루어짐
- 시작하고 종료되는 구조라고 부르기도 하며, 이 구조는 태그의 범위를 만들어줌
- <tag>CONTENT</tag>
빈 태그
- HTML에는 닫히는 개념이 없는 태그들이 있으며, 아래와 같은 형태를 가짐
- <tag>
- <tag/>
속성
- 태그(요소)의 기능을 확장하기 위해 아래와 같이 '속성'을 사용할 수 있음
- <tag 속성="값"></tag>
- 속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있음
- 속성이 항상 가져야 하는 것 ① 요소 이름(또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 함 ② 속성 이름 뒤에는 등호(=)가 와야 함 ③ 속성 값의 앞 뒤여 열고 닫는 인용부호(" or ')가 있어야 함
HTML 문서의 구조
<!DOCTYPE html>
<html>
<head>
문서의 정보
</head>
<body>
문서의 구조
</body>
</html>
- DOCTYPE(DTD, 버전 지정) - 마크업 언어에서 문서 형식을 정의(현재 표준 모드 : HTML5)
- HTML(전체 범위) - HTML 문서의 전체 범위를 지정
- HEAD(정보 범위) - 웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정
- BODY(구조 범위) - 웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 BODY 안에서 생성
<HEAD>
※ <head></head> 안에 사용하는 태그들은 문서의 정보를 가짐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동">
<title>내 사이트</title>
<link rel="style" href="./css/main.css">
<script scr="./js/main.js"></script>
</head>
<body></body>
</html>
- TITLE(웹 페이지의 제목) - HTML 문서의 제목을 정의하고, 웹 브라우저의 각 사이트 탭에서 이름으로 표시됨
- META(웹 페이지의 정보) - HTML 문서에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공하며 빈 태그임
- LINK(CSS 불러오기) - 외부 문서를 연결할 때 사용하며, 특히 HTML 외부에서 작성된 CSS 문서를 볼러와 연결할 때 사용함. 빈 태그
- STYLE(CSS 작성하기) - CSS를 HTML 문서 내부에 작성할 때 사용
- SCRIPT(JS 불러오거나 작성)
<BODY>
※ <body></body> 안에 사용하는 태그들은 문서의 구조를 나타냄
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>제목입니다</h1>
</hr>
<div>
<p>문단1 입니다.</p>
<p>문단2 입니다.</p>
</div>
</body>
</html>
- <h1~6></h1~6> - 글의 제목을 표현하는데 사용
- <div> - division의 약자로 반할을 뜻하며, 문서의 부분이나 섹션을 정의
- <p> - HTML 문서의 단락을 표현하는데 사용
'DEV > HTML' 카테고리의 다른 글
| HTML | 폼 태그 (0) | 2021.12.30 |
|---|---|
| HTML | 테이블 태그 (0) | 2021.12.30 |
| HTML | 텍스트 태그 (0) | 2021.12.30 |
