본문 바로가기
지식공유/html,css,js

웹퍼블리셔를 위한 기본 배경정보(1)

by 시간기억자 2022. 8. 16.
반응형

※ 아래 내용은 개인적인 기록목적으로 정리해둔 내용이고, 정보의 출처를 일일히 확인하지 못하였습니다.

 

[인터넷이란?]

전세계의 모든 컴퓨터를 연결해 놓은 지구상에서 가장 큰 네트워크로 네트워크의 네트워크라 부른다. 각 통신망들이 보유하고 있는 모든 정보를 전세계 각처에 연결된 사용자들에게 제공해주는 지구촌 통신망이다.

컴퓨터로 연결하여 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크이다.

 

[웹이란?(월드와이드웹이란?)]

월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. 간단히 (Web)이라 부르는 경우가 많다.

 

[웹표준]

월드 와이드 웹(WWW)을 구현하기 위해 따라야 할 표준 또는 규격. 다양한 웹 기술을 통해 수많은 콘텐츠가 공유되고 확산되면서, 웹 접근성, 사생활 보호, 보안, 국제화 등을 고려한 웹 기술의 표준화가 필요하게 되었다. 국제 표준화 기구월드 와이드 웹 컨소시엄(W3C)이 있으며, 대표적 웹 표준으로 하이퍼텍스트 생성 언어(HTML), 확장성 하이퍼텍스트 생성 언어(XHTML), 종속형 시트(CSS: Cascading Style Sheets), 자바스크립트(JavaScript), 웹 사용에 대한 웹 콘텐츠 접근성 지침 등이 있다.

웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준한을 적용하는 것을 말하고, 이 웹표준은 W3C로부터 제정된다.

 

[웹접근성(모두가 동등하게 서비스 접근 이용)]

장애나 나이와 관계없이 누구나 어떤 서비스를 활용할 수 있어야 한다는 개념을 ‘접근성’이라고 한다. ‘배리어 프리(barrier free)’ 혹은 ‘보편적 설계’라고 표현하기도 한다

정보통신 서비스 제공자는 장애인의 접근성 차별 금지와 의사소통의 편의 제공을 위해 표준 텍스트 파일, 동영상 자막 등 편의 제공 기술 방안을 마련해서 서비스를 제공해야 한다. 장애인과 비장애인이 동등하게 서비스에 접근할 수 있게 만들어줘야 한다. 이런 맥락에서 제시되는 개념이 ‘웹 접근성’(Web Accessibility)이다.

ex) 시각장애인들은 스크린리더를 통해 웹에 접근.

ex) 모든 전경 글꼴과 배경 색은 최소한 4.5:1의 명암 대비를 만족해야 한다.

     큰 문자(18pt 이상 또는 14pt 굵은글꼴)에 한하여 3:1 수준의 명암 대비를 갖출것을 요구하고

     있으며 이는 일반적인 크기의 글꼴(약 12~14px 정도)이 4.5:1의 명암 대비를 갖추어야 하는 

     것으로부터 조금 완화된 기준 입니다.

 

[HTML(HyperText Markup Language)]

- HyperText

: 사용자의 선택에 따라 특정한 정보와 관련된 부분으로 이동할 수 있게 조직화된 문서 의미

(HTML 웹페이지가 이렇게 조직화된 문서 형태를 가질 수 있는 이유는 앵커 태그 때문이다)

(HyperLink를 담고있는 문서를 의미)

- Markup Language

: 문서에 부가적인 정보를 표시하기 위해 고안된 표기방식 언어를 말함.

( 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.)

 

[HTML 요소]

- HTML 요소(HTML 엘리먼트, HTML element)는 HTML 문서를 이루는 개별적인 요소를 의미한다.

- HTML 요소는 HTML 태그를 사용하여 표현된다.

 

[검색엔진최적화(SEO : Search Engine Optimization)]

 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나라고 할 수 있다.

ex) 명확하고 독창적인 title사용 : <head></head>안에 알맞은 <title></title>태그

ex) description meta태그 : <meta name=”description=” Content=””>

ex) 페이지의 URL구조 개선(이해하기 좋은 URL은 콘텐츠의 내용을 전달하는데 좋다)

ex) 사이트 내에서 이동하기 쉽게 만들기(검색엔진에게 사이트 내의 이동은 매우 중요)

ex) 우수한 품질의 콘텐츠와 서비스 제공

ex) 보다 나은 앵커 텍스트 작성(적절한 앵커 텍스트를 사용하면 연결된 내용을 보다 쉽게 전달 가능)

ex) 이미지 사용의 최적화(이미지 관련 정보는 “alt”속성을 이용해 제공할 수 있다)

ex) 제목 태그의 적절한 활용(제목 태그를 활용하여 중요한 부분을 강조)

ex) robots.txt를 효과적으로 활용(검색에 노출이 필요하지 않은 부분을 robots.txt로 제어)

 

[http, https 차이]

- http : HyperText Transfer Protocol

- https : HyperText Transfer Protocol over Secure sockets layer(통신 내용을 암호화)

cf) Secure sockets layer(보안 소켓 계층)

보안성의 차이라고 보면 된다.

http와 달리 https에서는 암호화가 일어나기 때문에 속도 저하가 일어날 우려가 있지만 한국의 경우 인터넷 속도가 매우 빠르기 때문에 그 차이가 많이 느껴지지 않을것이다.

 

[meta 태그(<meta />)]

(x)html 태그 중 하나이고 '메타', 즉, 문서 그 자체를 설명하는 태그를 메타 태그라 합니다. 일반 (x)html 태그는 문서 내용물을 어떻게 보이게 하는가를 규정하기 위해 마크 업을 합니다. 이와 달리 메타 태그는 (x)html 문서가 어떤 내용을 담고 있고, 그 문서의 핵심어는 무엇이며, 누가 만들었는지, 문자 세트는 어떤 것을 사용하는지 등의 메타 정보를 담고 있습니다.

 

[웹 크롤링(Web crawling = Web scraping)]

웹 크롤링이란 컴퓨터 소프트웨어 기술로 웹 사이트들에서 원하는 정보를 추출하는 것을 의미합니다.

 

반응형

댓글