오늘은
HTML과 CSS에 대해서
공부해보는 시간을
가져보겠습니다.
전달정보는 HTML, 전달 방식은 CSS
웹페이지는 HTML(Hyper Text Makup Langugae) 과
CSS(Cascading Style Sheets)를 사용해 작성합니다.
HTML은 웹페이지로 '무엇을' 전달할지를 위해,
CSS는 '어떤 형식으로' 전달할지를 위해 사용됩니다.
HTML 문서 중의 글꼴, 색, 크기, 표시 위치, 배경 등
비주얼에 관한 지정은 CSS로 합니다.
예전에는 문서의 비주얼도 HTML로 지정하곤 했지만,
지금은 비주얼과 문서 구조를 분리하기 위해
스타일에 관한 내용은 모두 CSS를 사용하게 되었습니다.
HTML과 CSS로 역할을 분담하기 때문에,
디자인을 변경하고 싶을 때는
CSS만 변경하면 됩니다.
표시하는 디바이스의 종류에 따라
표시 형식을 변경하는 반응형
웹 디자인(Resposive Web Design)도
CSS 설정을 통해 가능해졌습니다.
HTML 자세히 보기
www에서 하이퍼텍스트 문서를 작성하는 기본언어
인터넷 서비스의 하나인 월드 와이드 웹을 통해
볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의
한 종류로 하이퍼텍스트를 작성하기 위해 개발 되었습니다.
우리는 웹 브라우저를 통해 인터넷 서비스를 이용하는데
이렇게 월드 와이드 웹을 통해 볼수 있는
웹페이지를 만들 때 사용하는 프로그래밍 언어를
HTML이라고 합니다.
특히 하이퍼 텍스트 문서를 개발하는데 주로 사용되며, 확장자는
'html' 또는 'htm'을 갖습니다.
현재 웹사이트마다 운영되고 있는 대부분의 문서들은
HTML로 작성됩니다.
하이퍼텍스트???
하이퍼텍스트는 문서 중간 중간에 특정 키워드를
두고 문자나 그림을 상호 유기적으로 결합하여 연결시킴으로써,
서로 다른 문서라 할지라도 하나의 문서인 것처럼
보이면서 참조하기 쉽도록 하는 방식을 의미합니다.
이를 자세히 보면 다음과 같습니다.
하이퍼텍스트(hypertext)는 개별 정보들을 링크를 이용해
유기적으로 연결시킴으로써 비연속적, 비선형적 체계로 구성해 낸
전자적 텍스트 또는 정보 조직 구조(architecture)로서 소설,
디지털 백과사전, 디지털 미술관이나 도서관,
나아가 월드와이드웹 등에 이르기까지
다양한 영역에서 활용되고 있다.
하이퍼텍스트를 어떻게 정의할 것인지에 대해서는,
이를 일종의 텍스트 또는 장르로 보는 문학적 관점이 있는가 하면,
다른 멀티미디어들과 마찬가지로
하나의 미디어 또는 테크놀로지로 보는 기술적 관점이 있다.
먼저 문학적 관점에서는 하이퍼텍스트를
"텍스트의 덩어리와 그것을 결합시켜 주는 전자적 링크들로 구성되는 텍스트"로 정의하고 있다(Landow, 1997).
한편 기술적 관점에서 보면 하이퍼텍스트는
일종의 정보 조직 구조다.
하이퍼텍스트는 상호 연계된 정보 조각들과 링크로 구성되어 있다고 할 수 있는데,
이러한 정보의 단위(unit of information)를 노드(node)라 하고,
다른 정보 단위로의 이동을 나타내는 포인터(pointer)를
링크(link)라 부른다(Nielsen, 1995).
어떤 관점에서 보든 하이퍼텍스트 시스템은 컴퓨터 기술의 발전에
크게 의존하고 있다.
여기서 컴퓨터 기술이란 어떤 순서로도 정보를
산출해 낼 수 있는 능력(random access)과
그 어떤 형태로든 정보를 저장할 수 있는 능력(hypermedia database)을
지칭한다(Joyce, 1995).
최근 하이퍼텍스트의 변화를 보여 주는 중요한 측면은
하이퍼텍스트를 구성하는 정보 형태들이 멀티미디어화하고 있다는 것이다.
이렇게 일반적으로 텍스트 이외의 정보 형태들이 하이퍼텍스트 형태로
제공되는 시스템을 하이퍼미디어(hypermedia)라고 한다.
즉 하이퍼텍스트의 내용(contents)이 디지털 사운드, 애니메이션,
비디오, 가상현실, 컴퓨터 네트워크, 데이터베이스 등과
같은 멀티미디어인 경우
이를 하이퍼미디어라고 부른다(Joyce, 1995).
하이퍼텍스트는
기존의 전통적인 텍스트와는 달리 비연속적이라는 데
가장 큰 특징이 있다. 전통적 텍스트와 달리 하이퍼텍스트는
그 구조가 비연속적(nonsequential)이어서
텍스트를 읽어 나가는 순서가 하나만 있는 것이 아니다(Nielsen, 1995).
CSS는 ???
하콤 비움리가 1994년에 제안한 것으로
마크업 언어가 실제로 화면에 표시되는 방법을 기술한 언어입니다.
마크업 언어가 웹페이지의 전체적인 구조를 담당한다면,
CSS는 세부적으로 글꼴의 색상, 크기 등과 같은 요소를 꾸며주는 역할을 담당합니다.
CSS는 반복되는 속성(태그의 특성을 정의할 수 있는 요소)을
지정해 주는 것입니다.
즉, 웹 페이지의 전반적인 스타일을 지정해 주는 것으로
문서 전체의 일괄성과 통일성을 가져오지요.
기존에는 반복되는 속성을 각각의 태그마다 지정해 주었는데
이러한 불필요할 작업을 줄일 수 있어
시간을 절약할 수 있는 장점이 있습니다.
CSS는 하나 이상의 지정자와 하나 이상의"속성:값"의 선언
블록으로 구성됩니다.
EX.
A1 { color : red; } 지정자 속성 값
즉 스타일을 미리 저장해둔 스타일 시트입니다.
문서 전체의 일관성을 유지할 수 있고,
세세한 스타일 지정의 필요를 줄여
이용에 편리성을 더 했습니다.
기존의 웹 언어인 HTML은 웹 문서를
다양하게 설계하고 수시로 변경하는데 많은 제약이 따랐는데요.
이를 보완하기 위해 만들어진 것이
스타일 시트이고 스타일 시트의
표준안이 바로 CSS입니다.
간단히 스타일시트라고도 합니다.
댓글