HTML, CSS란 ?

*  이 글은 생활코딩, TCP School, 스파르타코딩클럽의 웹개발 종합반 강의를 기반으로 개인 공부를 덧붙인 글입니다.

*  글에 오류가 있다면 부디 댓글을 달아주세요. 감사합니다 :)

 

여기 책이 한 권 있습니다.

 

그리고 몇가지를 더 가정하겠습니다. 

 

1. 저는 초보 출판업자이자, 저작자입니다.

2. 책의 제목은 "맛난 카페 고르기 101" 이라고 하겠습니다(저는 커피를 좋아하니까요 ^^).

3. 저는 A4용지 100장 분량의 정보를 생각나는 대로 모두 적었습니다.

4. 마지막으로, 저는 이 책을 출판하여 제가 아는 정보를 널리 알리고 싶습니다!

 

제가 이 책을 출판하려면 어떻게 하면 좋을까요?

---

우선 생각나는 대로 적은 정보를, 일정한 순서에 따라 정리할 필요가 있겠지요. 

 

그래서 저는 우선 목차를 만들고, 목차의 제목과 페이지 넘버를 책의 제일 앞 페이지에 적어넣었습니다.

목차
1.	"카페"란?	p.1
2.	"맛있는" 카페의 조건	p.10
3.	스페셜티가 맛있다던데?	p.64
4.	작가의 추천 카페	p.96

                                제멋대로 써봤습니다. ^^;

 

그리고 목차에 따라 글을 적어 넣고, 중간중간마다 이미지를 삽입해 넣어야겠네요. 글만 있으면 딱딱하니까요!

 

이제 출판할 준비가 모두 끝난걸까요? 꼭 그렇진 않을 것입니다.

 

저는 책의 종이는 무엇으로 할지, 글자 크기나 색깔은 어떻게 할지, 글을 어떻게 잘게 쪼개 전달해야 할지,

공백은 어느정도 넣을지, 중심 정보는 더 눈에 띄게해야하고, 표를 작성해야 할 필요도 있을 것입니다.

그 외에도 정말 많은 요소들을 고려해야겠네요. 휴!

 

목차로 예를 들면 다음과 같을 것입니다(디자인은 힘드네요....)

목차
1.	"카페"란?	p.1
2.	"맛있는" 카페의 조건	p.10
2-1.	커피 원두 구분하기	p.13
2-2.	케이크 고르기	p.36
3.	스페셜티가 맛있다던데?	p.64
3-1.	스페셜티란?	p.71
3-2.	스페셜티의 유행과 역사	p.75
3-3.	국내 스페셜티 카페 톺아보기	p.88
4.	작가의 추천 카페	p.96

아마도 이쯤 읽으시면 도대체 이게 HTML, CSS라는 것과 무슨 상관이야? 라고 생각하실 것 같습니다.

 

제가 굵게 표시해 놓은 부분들은 세계에서 가장 많이 사용되는 HTML 태그 25개 중 몇가지 기능들을 추려놓은 것입니다. 

그리고 대부분의 웹사이트들은 26개 남짓의 HTML 태그로 이루어져 있다고 해요^[각주:1]. 

 

즉 상기한 몇가지 태그를 알고 있으면 근사한 웹 페이지를 만들 수 있게 된다는 뜻이 아닐까요? 

---

웹 페이지? HTML? 그게 뭐죠?

웹(Web)이란 인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 공간을 의미합니다^[각주:2]. 설명을 보시면 아시겠지만, "웹"과 "인터넷"은 다릅니다.

 

웹이란 인터넷을 통해 어떤 서비스를 제공하는 여러 방법 중 하나로, 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식^[각주:3]으로 연결하여 제공해줍니다. 

 

이 웹에서 사용하는 언어가 HTML이며, HTML과 하이퍼텍스트로 작성된 정보 집합의 한 단위를 웹 페이지(Web page)라고 부릅니다.  또 제작자의 입맛에 맞게 잘 조립된 웹 페이지 집합을, 마치 우리가 책 페이지와 책의 관계를 가리키는 것 처럼, 웹 사이트(Web site)라고 부릅니다.

 

초창기, 군사적 목적을 위하여 개발된 인터넷은 한정된 사람들을 위한 전유물이었지만, 웹의 개발과 더불어 비로소 인터넷은 대중에게 널리 그 혜택을 제공할 수 있게 되었습니다. 그 이유는 바로 HTML 코드를 알면 누구나 웹 페이지를 작성할 수 있고, HTTP라는 것을 사용하면 나의 웹 페이지를 세계로 널리 퍼트릴 수 있기 때문입니다.

 

세계에는 너무나 많은 웹 사이트들이 있기 때문에, 우리는 웹 브라우저(Web browser)라는 소통 창구를 통해 원하는 정보를 찾아냅니다. 이걸 웹 서핑(Web surfing)이라고 부르기도 합니다. 대표적인 브라우저로 WWW(World Wide Web), 인터넷 익스플로러, 크롬, 사파리, 파이어폭스 등이 있겠네요!

참조:http://www.tcpschool.com/webbasic/component

이 소통창구는 우리의 컴퓨터에 각각 저장되며, 웹상의 여러 정보들이 HTML 형태로 저장되어 있는 웹 서버(Web server)로부터 HTML(그리고 CSS와 Javascript로 이루어진)코드를 받아 우리가 볼 수 있는 형태로 전환하여 보여주는 역할을 합니다. 

왼쪽은 우리가 보는 익숙한 네이버의 화면이지만, 오른쪽은 웹 서버로부터 받아 웹 브라우저가 보는 HTML 코드라고 할 수 있습니다.

 

CSS와 HTML은 뭐가 다르죠?

건축에 비유하자면, HTML이 웹 페이지를 여러 개의 구역으로 나누고 텍스트를 넣는 뼈대와 같은 역할을 한다면, CSS는 HTML을 통해 나눈 구역을 예쁘게 꾸미는 내부 인테리어와 비슷하다고 볼 수 있습니다. CSS와 HTML의 구체적인 활용법은 다음 페이지에서 자세히 이야기를 나누어 보려 합니다.

 

CSS와 HTML은 엄밀히 말해 프로그래밍 언어는 아닙니다. 주로 "프로그래밍 언어"라고 부르는 것들은 함수형 논리(Functional logic) 체계를 가지고 있습니다. 예를 들어 가정문(if/ else)을 사용해 특정한 이벤트를 다루거나, 덧셈이나 뺄셈 등을 포함하는 수학적 기능을 수행하거나, 변수를 선언하고, 함수를 쓸 수 있습니다. 또 이를 바탕으로 데이터를 조작하는 것도 가능하죠. 하지만 HTML과 CSS는 프로그래밍 언어의 기능을 대체하기 어렵습니다. 때문에 우리는 HTML과 CSS를 프로그래밍 언어와 구분하여 마크업 언어(Mark-up language)라고 부릅니다.

 

마크업 언어는 앞서 언급한 태그(Tag)를 사용해 문서나 데이터를 언급하는 언어를 말합니다.

세계에서 가장 많이 사용하는 HTML 태그들!

하지만 우리가 웹 페이지를 만들 때, 마크업 언어만을 이용하는 것은 아닙니다. HTML이 웹 페이지의 뼈대를, CSS가 웹 페이지의 디자인을 다룬다면, Javascript는 웹 페이지의 동작을 담당하는데, 이 Javascript(이하 JS)가 웹 페이지 구성을 위해 사용되는 대표적인 프로그래밍 언어입니다. JS를 통해 비로소 웹 페이지는 독특한 기능들을 수행할 수 있게 되는데, 이것도 다음 페이지에서 조금만 더 구체적으로 이야기를 나누어 보려 합니다 :).

어떻게하면 내 웹 사이트를 잘 꾸밀 수 있죠?

웹 페이지를 꾸미기 위해 CSS를 처음부터 끝까지, 한 개인이 쌓아올리는 것은 매우 힘든 일입니다. 

 

비유하자면, 적당한 PPT 템플릿을 인터넷에서 다운로드받아 사용하듯이, 이미 완성된 예쁜 CSS 코드를 우리의 웹 페이지 코드에 복사&붙여넣기해서 사용할 수도 있습니다. 그 중 하나로 부츠스트랩^[각주:4]을 꼽을 수 있습니다 :) (각주에 홈페이지를 적어두었어요!)

부츠스트랩을 이용해 만든 웹 페이지입니다. 참조: 스파르타코딩클럽 웹개발 종합반 강의 중.

---

추가로, 구글 웹폰트를 적용하면 코드 몇 줄 추가로 입력하는 것 만으로 웹 페이지 전역, 또는 구분마다 폰트를 다르게 적용할 수 있습니다!^[각주:5]

 

실제로 적용하는 법도 다음 페이지에서 살펴볼게요. :)

---

1. https://opentutorials.org/course/3084/18452 [본문으로]
2. http://www.tcpschool.com/webbasic/www [본문으로]
3. 하이퍼텍스트(hypertext)란 문서 내부에 또 다른 문서로 연결되는 참조를 집어 넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술을 의미합니다. [본문으로]
4. https://getbootstrap.kr/docs/5.0/getting-started/introduction/ [본문으로]
5. https://fonts.google.com/?subset=korean [본문으로]