이번에는 티스토리 스킨 제작에 필수적으로 알아야하는 HTML과 CSS에 대한 기본편이다. 기본편에서 시작해서 기본편에서 끝날 것이다. 필자도 전문적인 내용까지는 이해도가 부족하기도 하고, 그 정도 수준까지 요구하지 않는 수준에서 스킨 제작을 할 예정이다. 따라서 기본적인 수준만 잘 따라온다면, 끝까지 무사히 스킨 제작을 시도해볼 수 있을 것이다.
티스토리 스킨 제작을 위한 HTML / CSS 기본
먼저 HTML과 CSS에 대한 정의부터 시작하자. 대체 HTML이란 말도 잘 모르겠다면, 현재 보고 있는 인터넷 창을 잘 생각해보자. 대체 어떤 코딩이 들어가 있길래 이런 인터넷 창이 뜨는것일까? 구글 크롬을 사용하는 사람이라면, "개발자모드" 라는 것을 통해서 인터넷 창을 꿰뚫어볼 수 있다. 크롬유저라면, CTRL+SHIFT+I 를 눌러보자.
위와 같은 창이 우측에 뜰 것이다. 보면 좌측에는 HTML, 우측에는 CSS라고 적어놓았고, 두 개의 언어는 각각 역할이 다르다고 보면 된다.
HTML: 레이아웃 설정 (제목은 중앙에, 본문은 제목 아래, 댓글은 본문 아래 등등 레이아웃을 설정)
CSS: 스타일 지정 (글씨 색상, 글씨 크기 등 세부적인 스타일링을 설정)
두 개의 언어는 각각 역할이 다르다. 둘다 언어라고 해야할지 잘 모르겠지만.. 아무튼 이 2가지를 잘 이용해야 깔끔하고 예쁜 페이지를 완성할 수가 있다. 기본적으로 우리가 보는 창은 HTML로 이루어진 창이다. 우리가 보는 것은 HTML 페이지를 보는 것이고, HTML은 CSS에서 설정된 스타일 값들을 불러와서 우리에게 보여주는 것이다.
즉, 그림으로 나타내면 아래와 같다.
CSS는 화면의 글씨체나 색상 값 등을 설정하고, HTML은 우리가 볼 수 있도록 화면에 배치하는 역할을 한다. 이렇게 이루어진 화면을 우리는 모니터를 통해서 보는 것이다. 뼈대는 HTML이다. 즉, HTML이 없으면 페이지 자체가 구성되지 않는다. CSS는 HTML로 구성된 페이지에, 색상값이나 폰트 등을 바꿔서 예쁘게 꾸미는 역할을 한다.
사람으로 비유하자면 쉽다. HTML은 우리 얼굴이고, CSS는 화장이다. 얼굴은 없을 수가 없지만, 화장은 안해도 쌩얼이 있지 않는가. 이제 각각의 언어에 대한 아주아주아주 기초적인 기본을 알아보도록 하자.
1. HTML
우리의 얼굴, 인터넷 웹 페이지의 뼈대이자 기본이 되는 HTML에 대해 알아보자. 이것도 역사가 있다고는 하는데.. 그런것은 나무위키에 검색해보면 충분히 많이 나오므로 필자는 당장 써먹을 수 있는 부분만 접근하고자 한다.
코딩이라는 것은, 컴퓨터와의 약속이다. 즉, 수학 공식과도 같은 것이다. 피타고라스의 원리라고 하면, 모두다 다 같이 떠올리는 공식이 있지 않은가? 컴퓨터도 마찬가지다. 애초에 HTML을 만든사람들이 컴퓨터와의 공식을 세워놓았고, 우리는 그 공식만 쓰면 웹페이지를 꾸밀 수 있는 것이다. 그렇다면 그 공식이 무엇인지, 아래를 통해서 보도록 하자.
기본적인 셋팅은 위와 같다. 스킨 제작 시 알아야할 부분은 <head>부분과 <body> 부분이다.
<head>: 웹페이지의 헤더. 우리가 보는 웹페이지의 제목을 설정할 수 있다. (윈도우 창에 뜨는 한글)
<body>: 웹 페이지를 구성하는 모든 내용이 담기는 부분
즉, 주로 바디 부분에 모든 코딩이 들어가게 된다. 세부적인 코딩 내용은 스킨 데이터를 직접 만들면서 해보도록 하자.
2. CSS
CSS는 스타일러기 때문에, html과 같이 묶여있어야만한다. 보통 html에서 id 값을 주고, css에서는 해당 id값을 가져와서, 속성을 정의하는 방식으로 진행하면 된다. 즉, 위 스크린샷에서 다음 화면을 보도록 하자.
좌측의 html에는 id = TistoryEditor 라고 정의되어 있다. 여기서 ID라는 것은, 그냥 우리가 로그인할 때 쓰는 ID와 비슷한 개념으로 받아들이면 된다. 일종의 고유의 닉네임인 셈이다. 이 고유의 닉네임을 html에서 부여해주고, css에서는 이를 불러와 속성을 정의한다.
우측의 css에서 #TistoryEditor 을 보면, 해당 항목 아래 6가지의 속성이 정의되어 있는 것을 볼 수 있다. 즉, 이제 html의 "TistoryEditor"라는 id 안에 들어있는, 즉 괄호 안에 들어있는 내용들은 모두 css의 #TistoryEditor 속성을 따오게 되는 것이다.
문법 자체에 대해서 바로 시작하면 너무 복잡해지니, 이정도로 마무리하는 것으로 하고 이제 정말로, 실전 위주의 스킨 제작에 들어가보도록 하자. 다음 포스팅부터는 실제로 페이지를 코딩으로 만드는 방법에 대해 알아보도록 하자.
[IT & IT/티스토리 스킨 제작] - #1. 티스토리 스킨 제작기
[IT & IT/티스토리 스킨 제작] - #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치
[IT & IT/티스토리 스킨 제작] - #2. 파워포인트로 티스토리 스킨을 만들어보자.
'Developer > 티스토리 스킨 제작' 카테고리의 다른 글
| #6. 티스토리 스킨만들기::: 글제목, 글내용을 배치해보자. (757) | 2018.03.29 |
|---|---|
| #5. Bootstrap을 이용해서 블로그 상단바를 만들어보자. (591) | 2018.03.28 |
| #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치 (574) | 2018.03.16 |
| #2. 파워포인트로 티스토리 스킨을 만들어보자. (602) | 2018.03.13 |
| #1. 티스토리 스킨 제작기 (610) | 2018.03.13 |
댓글