티스토리 뷰

코딩

티스토리 스킨 만들기 #2 [HTML을 작성해보자]

Logia 2020. 5. 26. 20:28

안녕하세요.

 

이어서 HTML 을 만들어 보겠습니다.

 

하기전에 CSS 파일의 내용을 아래 링크 내용과 같이 해주시기 바랍니다!

https://e-moon.tistory.com/6

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
	
</body>

</html>

우선 정말 가장 기초적인 부분을 작성했습니다.

저는 이번에 반응형웹으로 만들어 보기 위해서 viewport 라는 것을 추가해 보았습니다.

 

그리고 우리가 알아야할 것이 있습니다.

바로 티스토리 블로그 공통 치환자인데요.

 

티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 

그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 

값치환자는 해당하는 값으로 변환됩니다.

  • 그룹치환자: <s_tag>, <s_tag_rep>
  • 값치환자: , , 

위와 같은 예시로 가장 기본적인 치환자인 <s_t3>를 추가해 보겠습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <s_t3>
		
    </s_t3>
</body>

</html>

달라진 것이 없어 보일 수 있습니다만, 티스토리 공통 javascript 가 들어있기 때문에 필수로 추가 하셔야 합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이문의 코딩운동</title>
    <link rel="stylesheet" href="./style.css" />
</head>

<body>
    <s_t3>
        <header>
            <h1>이문의 코딩운동<!-- 블로그의 이름입니다. --></h1>
            <p>코딩 / 운동 / 일상<!-- 블로그의 설명입니다. --></p>
        </header>

        <div>

        </div>

        <footer>
            
        </footer>
    </s_t3>
</body>

</html>

우선 위와 같이 작성을 해봤습니다.

이것은 결과 이미지입니다. ㅎㅎ

작은 변화이지만 독자분들이 티스토리 블로그에 설정해 놓았던 내용들을 저렇게 작성하시면 볼 수 있습니다.

디자인 같은 경우는 독자분들이 정하기 때문에 추후에는 좀 더 속도를 내서 진행해 보도록 하겠습니다.

 

이런 치환자를 이용하여 보시고 다음 글에서 같이 내용을 추가해보도록 하겠습니다.

'코딩' 카테고리의 다른 글

MyBatis XML 에러[The content of elements must consist of well-formed character data or markup.]  (0) 2020.07.01
티스토리 스킨 만들기 #3 [반응형으로.]  (0) 2020.06.05
[MyBatis, JAVA] 마이바티스에서의 NullPointerException 해결해 보기  (0) 2020.05.28
간단한 reset.css 복사 및 붙여넣기  (0) 2020.05.26
티스토리 스킨 만들기 #1 [일단 부딫혀 보는 중입니다.]  (0) 2020.05.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함