HTML과 CSS는 무엇인가?

2020. 7. 3. 13:01

안녕하세요.

 

티스토리 블로그를 시작하고 시간이 지나면 스킨 편집에 대한 욕심이 생깁니다.

그리고 스킨을 편집하려면 HTML과 CSS에 마주하게 됩니다.

 

티스토리는 HTML과 CSS에 대해서 아무것도 몰라도 하나씩 하나씩 코드를 바꾸어가면서 스킨 편집을 할 수 있게 되어 있습니다.

왜냐면! 우리에겐 실행 취소 ctrl+z가 있으니까요 ㅎㅎ

 

그럼 이제 스킨 편집을 하는데 필요한 HTML과 CSS이 어떤 것인지에 대해 잠깐 알아보도록 하겠습니다.

 

 

"HTML : Hyper Text Markup Language "

 

HTML : Hyper Text Markup Language

CSS라는 말은 생소해도 HTML은 많이 들어보셨을 겁니다.

 

말 그대로 해석하면 하이퍼 텍스트 + 마크업 기능을 가진 언어입니다.

 

하이퍼 텍스트란 웹페이지에서 링크를 타고 여기저기로 옮겨 다닐 수 있는 기능이고, 마크업은 웹페이지에서 제목, 내용 등 구조를 표시하는 것을 말합니다.

 

바로 이 HTML 언어를 사용해서 웹페이지를 만들 수 있습니다.

 

"CSS : Cascading Style Sheet"

 

CSS : Cascading Style Sheet

CSS는 HTML에서 부족한 부분을 보완해 주는 역할을 합니다.

 

CSS는 스타일 시트라고도 부르는데 그 이유가 있습니다.

웹페이지를 만들 때 스타일 속성을 입력하여 페이지 디자인을 합니다. 이때 CSS를 사용합니다.

 

물론 HTML만으로도 웹페이지 디자인을 할 수 있습니다.

하지만 HTML은 페이지마다 디자인 요소들을 만들고 변경할 때 하나씩 지정해 주어야 하지만 CSS는 이걸 일괄적으로 적용시킬 수 있습니다.

* 디자인 요소 : 글꼴, 색상, 정렬 방법 등

 

예를 들어 웹페이지의 어떠한 영역의 제목 폰트 크기는 20pt이다라고 지정해두면 그 자리에 제목을 입력하면 자동으로 20pt 크기로 맞추어집니다.

 

 

이렇게 HTML과 CSS의 역할을 나누어보면 HTML은 웹페이지에 들어가는 내용, CSS는 디자인을 맡는다고 보면 됩니다.

블로그를 예로 들면 포스팅 본문에 들어가는 내용은 HTML이, 포스팅 본문의 전체적인 스타일은 CSS가 그 역할을 담당한다고 보시면 됩니다.

HTML과 CSS의 맡은 각각의 역할이 있기에 티스토리 스킨 편집창을 보면 HTML, CSS 창이 분리되어 있습니다.

 

티스토리 편집기

HTML과 CSS를 처음 보면 엄청 복잡해 보이지만 티스토리 스킨 편집을 위해서는 100% 모든 걸 알지 않아도 됩니다.

하지만 완전히 새로운 스킨을 만든다면 일정 수준 이상의 HTML, CSS 코드 이해는 필요로 합니다.

 

앞으로의 포스팅에서는 새로운 스킨을 만드는 것이 아니라 티스토리가 준비해둔 기본 스킨들을 하나씩 수정해 나갈 것입니다.

따라서 편집에 필요한 HTML, CSS 코드만 이해하셔도 무방합니다.

 

 

여기까지 HTML, CSS에 대한 간략한 설명은 마치겠습니다.

제가 해당 분야의 전문가도 아니고 직업도 코딩과는 먼 분야이다 보니 설명이 다소 애매할 수도 있는 점 양해 부탁드립니다.

 

 

블로그에 방문해 주셔서 감사합니다.

 

행복한 하루 보내세요 ^^

1 ··· 5 6 7 8 9