먼저 WWW(World Wide Web)이라고 흔히 불리는 웹은 인터넷, 컴퓨터, 웹브라우저를 통해 글자, 이미지, 영상, 음성을 사용자에게 전달해준다. 인터넷과 컴퓨터는 다 아는 용어이니 생략하고 웹브라우저는 무엇인가를 먼저 살펴본다.
웹브라우저(Web browser)는 구글의 크롬, 마이크로소프트사의 인터넷 익스플로어, 애플의 사파리, 모질라재단의 파이어폭스 등이 대표이다. 우리가 유튜브에서 영상을 보거나 메일을 하거나 다 웹브라우저를 통해서 이루어진다. 어느 사용자가 웹브라우저 주소창에 웹 페이지의 주소, 즉 URL(uniform resource locator)을 치면 인터넷으로 전송된 데이터를 해석하여 웹브라우저에 보여준다.
웹 사이트는 도메인 이름만으로 구성된 URL이 나타내는 웹페이지들의 묶음이다. 웹페이지는 웹브라우저에서 보는 각각의 화면을 말한다. 사용자가 요청하면 웹페이지에 있는 HTML과 CSS 파일과 관련 데이터(이미지,동영상,음성)를 전송해 주고 웹브라우저가 받은 데이터를 해석하여 화면에 보여준다.
여기서 인터넷상에 사용하는 모든 컴퓨터가 고유의 각자 주소를 갖고 있는데, 이를 IP라고 한다. 숫자로 표시되는데 숫자는 기억하기 어렵기 때문에 도메인 이름을 사용하고 있다. naver.com이나 auction.co.kr 같은 것이다. 도메인은 DNS(domain name system)라는 도메인 네임 서버에 등록되어야 한다.
컴퓨터에서 보는 웹페이지는 어떻게 만들까? 사람이 언어를 써서 기계에 명령하면 기계가 만들어주는데, 사람이 사용하는 언어를 신호라는 의미에서 코드, 또는 소스라고도 한다. 코드 작업을 하면 코딩이라고 한다.
기계가 하는 일은 결과로 보여주는데 그것을 애플리케이션(application) 또는 줄여서 앱(app) 또는 프로그램이라고 한다. 어쨌든 코드를 통해 언어를 만들어 기계에 주면 기계가 결과를 만들어준다.
많은 종류의 프로그래밍 언어가 있다. C, C++, 자바스크립트, 파이썬, PHP, SQL 등 수많이 있지만, 웹페이지를 만드는 프로그래밍 언어가 HTML(Hyper Text Markup Language)이다.
HTML으로 문서를 만들었지만, 문자의 크기나 색상, 글꼴, 배경 이미지를 넣고 싶을 때 사용하는 것이 CSS(Cascading Style Sheets)이다. 그러나 이렇게 만든 웹페이지도 정적인 상태이다. 우리가 하는 게임이나 모바일의 경우 사용자의 조작에 반응해서 움직인다. 이에 필요한 프로그램이 자바스크립트이다.
HTML은 미리 정해진 언어로 기계에 명령한다. 물론 정해진 말은 영어를 바탕으로 한다.
<!DOCTYPE html>
<html lang=“ko”>
<head>
<meta charset=“UTF-8”>
<title> </title>
</head>
<body>
</body>
</html>
이런 형식으로 쓰인다. 맨 처음 나오는 <!DOCTYPE html>은 문서 형식이 html이라고 선언하는 것이다. 그래야 기계가 html 언어로 이해한다. < > 표 쓰는 것도 정해진 방식이다. <head>는 웹페이지 헤드 부문을 만든다는 표시인데, 웹브라우저에는 표시되지 않는다, <meta charset=“UTF-8”>은 웹페이지에 표시되는 언어가 한글이라는 것이다. 이같이 정해진 언어로 만들어 가면 된다. 앞의 형식은 한글로 만들 때 기본이므로 그대로 익히면 된다.
<title> 텍스트 </title>은 여기서 텍스트 부문에 들어가는 글자는 중요하다. 웹브라우저에는 일부만 표시되지만 중요하다. 검색 사이트가 검색 결과 페이지의 제목으로 표시해 주기 때문이다. 타이틀에 들어가는 글자가 길면 뒷부문이 생략되어 표시된다. 30자 이내가 좋다. 키워드는 앞쪽에 표시하는 것이 검색에 유리하다.
원칙적으로 HTML과 CSS는 따로 작성하는 면이 편리하다. 그리고 CSS 파일을 불러와 연결한다.
HTML에는
<link rel=“stylesheet” href=“css/style.css”>
CSS 에는
@charset“UTF-8”;
p{
color:#0033ff;
}
CSS 파일에도 UTF-8을 지정해 주어야 한글 인식이 제대로 된다. 여기서는 텍스트 색상을 청색(#0033ff)으로 지정한 경우이다. “css/style.css’는 자기 페이지의 css 경로이다.
참고로 색상은 다음과 같은 키워드를 사용한다.
Black #000000, Silver #COCOCO, Gray #808080, White #FFFFFF, Red #FF0000, Orange #FFA500, Yellow #FFFF00, Green ##008000, Blue #0000FF, Navy #000080
여기서 영어 대문자로 하든 소문자로 하든 상관없다. 또 Yellow를 #FF0, Red를 #F00이라고 두 개가 같이 이어지면 하나로 줄여 표시해도 인식한다.
텍스트를 꾸밀 때 필요한 몇 가지는 다음과 같다.
첫째로 문장 단락을 구성하는 표시이다. <p> 텍스트 </P>로 표시한다. p와 /p 사이에 있는 텍스트는 한 단락으로 이어진다. 만일 한 단락의 문장 중에서 줄은 바꾸고 싶으면 <br>을 사용하면 줄이 바뀌어 웹페이지에 나타난다.
굵은 글씨로 표시하고 싶을 때는 굵게 하고 싶은 글자 앞에 <b>, 뒤에 </b>를 넣는다. HTML 문서에는 시작에 < > 하고 끝날 때 반드시 </ >를 넣어야 한다.
이탤릭체는 <i> </i>로 표시하고, 글자에 밑줄 치려면 <u> </u>로 표시한다.
위첨자나 아래첨자를 표시하고 싶을 때는 <sup> 위첨자 </sup> <sub> 아래첨자 </sub> 이다. 예로 지구는 온난화로 100년 사이에 0.7℃ 상승했다주1. 그 원인은 CO2 때문이다.
텍스트 일부분을 수정한 것으로 표시하고 싶을 때는 <del datetime=“삭제된 날짜”> 삭제되게 표시하는 텍스트 </del>로 한다. 나무위키에서 보면 줄을 쭉 그어있는 줄 모습이다.
. 날짜는 웹페이지에는 표시되지 않지만 언제 삭제했는지 HTML에 표시된다. 예로 이렇게 삭제합니다
사이트 안에서 다른 페이지로 링크하고 싶을 때는 <a href=“링크할 페이지 경로”> </a>로 한다. 만일에 다른 사이트로 링크하고 싶을 때는 <a href=“링크 페이지 URL”> </a>로 한다.
웹페이지에 그림을 표시하고 싶을 때는 <img src=“그림 경로” alt=“그림 설명 텍스트” width=“너비” height=“높이”> 여기서 너비와 높이는 수치로 정하면 된다. alt 속성은 만일 그림이 나오지 않더라도 텍스트가 표시된다. 이런 텍스트가 필요 없다면 그냥 alt=“” 이렇게 비워서 표시한다.
페이지의 도안에서 페이지 전체의 색상을 정하고 싶을 때는
CSS
body{
background:#0000FF;
}
페이지 전체의 글꼴을 정하고 싶으면
CSS에서
font-family:’Malgun Gothic’,‘BatangChe’,‘sans-serif;
이런 형식을 어느 정도 이해하면 티스토리 블로그를 하는데, 별 어려움이 없다. 지금은 반응형의 여러 스킨 샘플을 제공하고 있으므로 그것을 이용하여 조금 손보아서 사용하면 된다.
'SNS와 유용한 앱' 카테고리의 다른 글
| 네이버 웹마스터 도구 등록 관리 (0) | 2019.11.23 |
|---|---|
| 구글Keep 활용법 메모와 스마트워크 (0) | 2019.11.22 |
| 티스토리 가입과 글쓰기 (0) | 2019.11.12 |
| 구글검색, 구글연산자를 사용하여 정확하고 손쉽게 검색 (0) | 2019.11.09 |
| 네이버 구글의 검색 구조, 키워드의 중요성 (0) | 2019.11.02 |
