본문 바로가기
프로그래밍/HTML, CSS, JavaScript

[티스토리 스킨만들기] 두번째 치환자 적용하기

by [바가지] 2017. 9. 1.
반응형

티스토리 스킨 만들기 두번째 시간

치환자 적용하기에 대하여 알아보고자 합니다

 

 

첫번째 시간에는 티스토리 스킨등록을 해 보았습니다

등록을 위해서 3가지 파일이 필요했습니다 → index.xml, skin.html, style.css

 

올려드린 파일 안에는 간단한 내용이 적혀 있었지만 무엇인지 모르고 일단 등록 해 보았습니다

이제 티스토리 관리자 → HTML/CSS편집 기능을 통해 올린 파일들을 수정해 가며 스킨을 만들어 가보고자 합니다

 

HTML/CSS편집 화면으로 이동하게 되면 아래와 가은 화면이 나타납니다

이곳에서는 등록 한 3개의 파일 중 2개의 파일을 수정 할 수 있습니다

바로 skin.html 파일이 HTML 부분이고, style.css 파일이 CSS 부분입니다 

이곳들을 수정하고 저자하게 되면 올린 파일 내용이 수정되게 됩니다 

 

화면1

 

이번 시간에는 치환자에 대하여 알아보면서 HTML 및 CSS 에 대하여 배워보고자 합니다

 

이 포스티은 완전초보를 위한 것으로 "어 이런 것은 설명이 필요없는데.." 라고 생각 하실 수도 있을 것입니다

그렇다고 진행이 너무 느리면 안되니 그때 그때마다 필요한 부분만 설명을 하고 넘어가고자 합니다

 

학습 1 HTML

html은 크게 <head>와 <body>로 구성 되어 있고 <body> 부분은 눈으로 보이는 웹 화면 전체라고 생각하시면 됩니다

<body> 안에는 다양한 태그들로 화면을 꾸기게 됩니다

지금 소스를 보시면 가장 많이 나오는 <div> 란 하나의 사각형 영역이라고 보시면 됩니다

※ <div> → 사각형 영역 시작, </div>→ 사각형 영역 닫기

첫번째 시간에 올려 드린 소스를보시면 블로그의 내용별로 영역을 만들어 그 안에 단순히 설명 문구들을 적어 놓았습니다

 

학습 2 치환자

이제 치환자가 무엇인지 알아보고 치환자를 HTML 소스안에 넣어 보도록 하겠습니다

티스토리에서 치환는 이런조이 이런 모양이죠 →

데이터를 DataBase에서 받아와서 담아놓은(때론 반복문을 사용하여 나열해 놓은 데이터) 것이죠

ex)  이런조이 → [관리자 > 환경설정 > 기본설정'에서 입력된 블로그 제목] 을 담아 놓은 치환자

이런 치환자를 HTML 각 영역(div) 안에 넣는 작업이 두번째 작업입니다

제가 열심히 복사 붙여넣기로 만들어 두었습니다 

 

그대로 파일을 열어서 복사 → HTML 영역 화면에 붙여 넣기 하시면 됩니다 ㅎㅎ

일단 붙여 넣기 하시고 다시 설명 들어가겠습니다

skin.html 파일 내용을 → 화면 HTML 영역에 붙여넣기 → 저장

 

SavedSkin(2017-09-02).zip

 

 그러면 아래와 같이 화면이 변화죠 화면2

 

내 블로그 제목 표시되고, 등록한 글이 있다면 보이기도 할 것입니다

바로 해당 치환자를 넣었기 때문이죠

치환자의 종류는 다양하게 제공되고 있습니다(우리는 서버 영역에서 DB에 연결할 수 없습니다 따라서 제공해 주는 치환자를 가지고 클라이언트 영역에서 다양한 모양들을 만들어 갈 뿐이죠 즉 스킨만들기 영역)

 

제가 제공되는 거의 모든 치환자를 입력 해 두었습니다;; 

 

앞으로 필요한 부분드은 두고, 필요없는 부분들은 제거 해 가며 스킨을 만들어 갈 생각입니다

 

오늘은 여기까지 치환자 적용하기에 대하여 학습하였습니다

 

자세한 부분들은 조금씩 알아가도록 합시다

다음시간에는 HTML을 구성하는 <head> 부분과 CSS작업에 대하여 알아보도록 하겠습니다

※ 작업 시에 좋은 Tip까지 드릴 생각입니다

 

그럼 스킨 완성하는 그 시간까지 열심히 달려 봅시다

 

초보 우리들도 나만의 스킨을 제작할 수 있는 그날까지~~~~!! ^^ 

반응형