HTML
기본용어 알아보기
인터넷
최초의 인터넷은 1969년 미 국방부 소속 고긍 연구국(ARPA)에서 핵전하에서도 안정적인 정보교류를 위해 네트워크 연구에 착수 하였고 1983년 기점으로 TCP/IP 패킷 송출 방법으로 전환하였다.
1980년대에는 PC가 확산되었지만 컴퓨터 간 통신은 없었다.(미 국방부를 제외하고)
이때까지는 인트라넷이였다. 1989년 연구기관들의 각종문서, 전 세계에 뿌려져 있는 문서도 교환 해야 할 필요를 느껴 CERN의 소프트웨어 회사에서 1990년 12월 최초의 월드 와이드 웹이라는 서비스를 런칭하였다.
이로써 인터넷은 WWW의 탄생을 기점으로 크게 확산되었고 NETSCAPE라는 회사가 시장에서 큰 성공을 거두었으나 MicroSoft의 웹브라우저인 익스플로어가 독점하여 웹 시장의 80%를 장악하였다. (지금은 더 빠르고 강력한 크롬, 구글이 대세 / 익스플로어 서비스 중단)
인터넷은 이러한 www 뿐 아니라 전자메일, 파일 공유, 온라인 게임 등 다양한 서비스를 포함하고 있다. 우리는 여기서 www의 html을 먼저 배워 볼 것이다.
클라이언트와 서버
서버(정보를 제공하는 사용자 또는 컴퓨터)
----요청↑-------------응답↓-------------
클라이언트(정보를 제공받는 사용자 또는 컴퓨터)
서버는 클라이언트의 요청을 응답해준다.
클라이언트는 웹브라우저를 통해 서버에 요청한다.
웹에는 웹클라이언트, 웹서버가 있으며 기능은 동일하다.
웹클라이언트가 데이터를 요청하면 웹서버는 데이터를 html로 주고 웹브라우저에서 이 html을 해석하여 우리에게 시각적으로 정보를 보여주는 것이다.
PHP
서버쪽에서 실행되는 프로그래밍 언어이며 웹 클라이언트가 요청한 url의 확장자가 php이면 이를 웹 서버쪽에서 PHP 언어를 통해 해석을 하게 되고 다시 웹 서버에서 HTML 형식으로 웹 클라이언트에게 제공한다.
웹 브라우저
웹 클라이언트라고도 하며 웹 브라우저의 종류는 크롬, 마소앳지, 파이어폭스 등이 존재하며, URL을 통해 웹서버에 클라이언트로써 요청을 하는 기능을 한다. 또한 웹 서버로부터 데이터를 제공받으면 HTML을 해석하여 가시화 시켜준다.
프로토콜
넷 상에서 컴퓨터끼리 소통할 때 공용어를 사용해야 이해(통신)하기 편하다. 그 때 사용하는 공용어를 프로토콜이라고 한다. 인터넷 상 프로토콜로 (HTTPS, HTTP, feed, tel)
IP
internet protocol의 약자로 네트워크 상 컴퓨터를 구별 할 수 있도록 부여되는 주소값.
나의 ip주소를 확인하는 방법 -> cmd -> ipconfig
HTML
HyperText Markup-Language의 줄임말.
프로그래밍언어는 반응을 만들어 낸다. 버튼을 누르면 어떤 함수가 실행되고 이 함수는 어떻게 실행되는 즉, 사용자에게 동적인 경험을 제공해주는 것이 프로그래밍언어이다. 반면 마크업언어는 단지 이 단어는 어디에 있고 이 문장은 어디에 있고 마치 책을 보듯이 정적으로 동작하게 된다.
(정적인 언어에 동적인 언어를 결합하여 사용자 경험을 증폭시켜주는 행위가 웹 개발이다.)
웹 사이트의 골격, 틀을 만드는 언어
HyperText
하이퍼텍스트란 웹이 처음 등장 할 때 목적은 연구원들의 논문을 공유하는 것에 있었다. 논문에서 보면 각주가 달려있는데 이 것을 모아둔 것이 하이퍼링크라고 한다.
마치 본인이 원하는 페이지를 바로 보여주는 것이라하여 하이퍼텍스트라고 불리기 시작 한 것에서 유래가 되었다.
CSS
HTML 문서를 시각적이고 동적이도록 만들어주는 언어
(그렇다고 CSS는 프로그래밍 언어가 아니다. Style sheet 언어라고 부르는데 내장되어 있는 요소들을 선택적으로 사용하면서 디자인하는 것이다. 웹 브라우저의 발달로 인하여 동적기능도 발휘 할 수 있다.)
Javascript
프로그래밍 언어 중 하나. 컨텐츠의 내용을 바꾸고 동적인 페이지 작성하게 도와주는 언어
Node.js
확장성이 있는 네트워크 개발에 사용되는 자바스크립트 기반의 프레임워크
React.js
웹 어플리케이션의 사용자 인터페이스를 만들기 위한 오픈소스 기반의 자바스크립트 라이브러리
(페이스북에서 개발하였으며 파생형인 스토리북은 여행사이트인 에어앤비에서 만들었다.)
웹 접근성
정상적인 웹 컨텐츠 사용이 가능한 일반사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자들을 포함해 모든 사용자들이 동등하게 접근할 수 있도록 컨텐츠를 제작하는 기법
접근성이 안좋다. : 몸이 불편해서 못 본다.
접근성이 좋다 : 소리를 들어서 보지않고 접근 가능
웹 표준
여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 하는 기술, 방법 등을 의미
크로스 브라우지야(html, css)
본격적으로 시작하기
HTML을 정리하면 다음과 같다.
1. HyperText Markup Language
2. 텍스트로 페이지의 구조와 데이터를 표기하는 언더
3. HTML문서는 확장자가 .html이다.
4. HTML 문서는 문서를 작성할 수 있는 프로그램이라면 어디서든 작성할 수 있다.
5. HTML 문서는 대소문자를 구분하지 않는다.
6. HTML 문서는 띄어쓰기, 줄 바꿈을 구별하지 않는다. (태그와 기능을 사용해야 함)
7. HTML 문서는 태그 형태로 괄호(<명령어>)를 사용하여 표현한다.
HTML 요소
(1)<P>(3)Hi I'm HTML(2)</p>
(1) 여는 태그(opening Tag) : 요소의 이름(p)과 열고 닫는 꺽쇠 괄호로 구성
(2) 닫는 태그(Closing Tag) : 요소의 이름 앞에 슬래쉬가 있다.
(3)내용(Content) : 요소의 내용이며, 단순한 텍스트이다.1~3을통틀어서 요소라고 한다. 대소문자의 구분은 없지만 소문자로 작성하여 가독성을 높이자.
HTML의 특수문자
개행(Enter) : <br>
띄어쓰기 :
< : <
> : >
ⓒ : ©
[ : [
] : ]주석사용
주석은 코드를 실행시키지 않는 부분을 말한다.
HTML에서 주석을 사용하고 싶으면 다음과 같이 입력한다.
단축키는 cntl + /
<!-- 여기는 실행되지 않습니다. -->문단태그
내용을 끊어서 구분하는 부분을 문단이라고 한다. 문단을 만드는 태그는 다음과 같다
<p> 문단 내용 </p>제목태그
제목을 표현할 수 있는 태그
검색엔진에서 키워드로 사용한다.
<h1>제목</h1>
<h2>작은제목</h2>
<h3>더 작은 제목</h3>
<h4>더욱 작은 제목</h4>
<h5>더더욱 작은 제목</h5>
<h6>더더더욱 매우 작은 제목</h6>html 문서보기
<-- ! 또는 html:5 를 치고 엔터 누르면 자동으로 틀이 완성된다. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> // 브라우저 상단 제목에 표시
</head>
<body>
// 아래는 주석처리된 문장, 실행되지 않음
<!--
제 9조 (서비스 이용시간)
서비스 이용시간은 당일 09시 0분 부터 ~~~
제 2조(개인정보의 처리 및 보유기간)
정부24 회원정보
수집근거 : 정보주체 동의
정자민원 신청이력
수집근거 : 정보주체의 동의
-->
<p> //문장 시작
<h3>제 9조 (서비스 이용시간)</h3>
//실제로는 이렇게 띄어쓰기 하지 않지만 사용은 할 수 있네...
서비스 이용시간은 당일 09시 00분터~~~
</p>
<h3> 제 2조(개인정보의 처리 및 보유기간)</h3>
<h5> 정부24 회원정보</h5>
수집근거 : 정보주체의 동의
<h5> 전자민원 신청이력</h5>
수집근거 : 정보주체의 동의
</body>
</html>위와 같이 띄어쓰기 코드를 입력하여 쓸 수는 있지만 매우 부적절한 코드의 사용이다. 따라서 우리는 HTML의 효율을 올리기 위해서는 ul, li와 같은 리스트 태그를 사용해야한다.
리스트 태그는 다음 시간에 알아보도록 하자.
<meta>태그에 대해 알아보자
charset
화면에 글자를 표시 할 때 어떤 인코딩 방법을 사용할 지 지정하는 것. 영어 이외의 문자를 화면에 표시하기위해 미리 약속된 문자 세트를 사용해야 하는데 이때 HTML5에서는 기본값으로 meta태그를 사용해 utf-8이라는 문자세트를 사용한다고 웹브라우저에게 알려줌.
<meta charset="UTF-8">문자 세트는 다음 사이트를 참고하자.
문자세트 보러가기
http-equiv, name, content
http-equiv와 name을 작성하였다면 반드시 content도 설정해야한다.
속성 값들은 다음을 참고하자.
viewport
아래설명란에서 속성명의 name에 들어가며 모발일 환경을 고려하기 위한 속성값 중 하나이다.
불과 2~3년전까지 우리는 사용자가 적은 사이트를 방문하였을때 모바일 환경에서 보면 굉장힐 작은 마치 인터넷 화면이 그대로 작아져있거나 굉장히 커진 상태를 본적이 있을 것이다. 이것은 모바일 환경을 고려하지 않고 사이트를 제작하였기 때문에 발생한 에러이다.
이 것은 픽셀차이로 인한 에러로 이것을 해결하기 위해서 반응형 웹사이트가 등장하였고 반응형 웹페이지를 제작하기 위해서는 속성값을 설정해주어야하는데 이를 위해 viewport를 사용한다.
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0">
참고. href에 대해서 hypertext reference
link태그의 속성에서 사용하는 참조이다. link 속성의 href를 사용하면 외부에서 css를 연결할 수 있다. 자세한 내용은 link 태그를 공부할 때 다루자.
