티스토리 스킨 만들기 #3 [반응형으로.]

티스토리 뷰

코딩

티스토리 스킨 만들기 #3 [반응형으로.]

Logia 2020. 6. 5. 00:49

안녕하세요. 이문입니다.

다음 내용이 늦어졌습니다. 이유는 작업했던 파일을 모르고 삭제한 모양입니다.

그리고 현재 개발중인 웹서비스가 있어서 동시에 진행하기에 어려움이 있었습니다.

스킨 제작 시리즈를 이제 우선으로 할까 합니다.

그럼 이제 내용 시작하겠습니다.

반응형으로 작업하기 위해서는?

우선 반응형으로 작업하는 이유는 구글 SEO에 좋은 영향을 주기 위해서 라고 저는 생각합니다.

구글 SEO에 반응형웹은 모바일 친화적이라는 추가 점수가 있다고 생각됩니다. 서치콘솔에서도 보았던 것 같군요.

그래서 반응형으로 작업하기 위해서 먼저 해야 할 일은 바로

"모바일 화면 레이아웃 정하기" 입니다. 먼저 모바일을 작업해야만 반응형을 짜기 쉽기 때문인데요.

오늘 간단하게 모바일 화면을 구상해 보겠습니다.

사진과 같이 스타일은 거의 없습니다만 간단한 모바일 뷰가 만들어 졌습니다.

그리고 위 사진의 HTML을 보여드리겠습니다.

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

<head>
    <title>티스토리 스킨 만들기 #3 [반응형으로.] | 이문의 코딩운동</title>
    <meta name="title" content="티스토리 스킨 만들기 #3 [반응형으로.] | 이문의 코딩운동" />
    <meta name="description" Content="코딩 / 운동 / 일상" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

    <link rel="alternate" type="application/rss+xml" title="이문의 코딩운동" href="https://e-moon.tistory.com/rss" />
    <link rel="shortcut icon" href="https://e-moon.tistory.com/favicon.ico" />

    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
</head>

<body id="tt-body-page">
    <s_t3>
        <div id="wrap">
            <header>              
                <div>
                    <a href="https://e-moon.tistory.com/" title="이문의 코딩운동")>    
                	    이문의 코딩운동    
                    </a>
                </div>               
            </header>
					
            <s_article_rep>
                <s_index_article_rep>
                    <div class="article_container">
                        <s_article_rep_thumbnail>
                            <div class="article_index_thumbnail" style="background-image: url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FFTwEz%2FbtqEDRXZC3d%2FAAAAAAAAAAAAAAAAAAAAAE-e-sDq2NxVZcg_Aa0ZXpN5GDBBvfgIei8lq5D61qb4%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1769871599%26allow_ip%3D%26allow_referer%3D%26signature%3DJHfka%252BVnghaZjTeBW0JuokK6NfQ%253D');">									
                            </div>
                        </s_article_rep_thumbnail>
                        <div>
                            <h3 class="tit_post">티스토리 스킨 만들기 #3 [반응형으로.]</h3>
                            <p class="txt_post">안녕하세요. 이문입니다. 다음 내용이 늦어졌습니다. 이유는 작업했던 파일을 모르고 삭제한 모양입니다. 그리고 현재 개발중인 웹서비스가 있어서 동시에 진행하기에 어려움이 있었습니다. 스킨 제작 시리즈를 이제 우선으로 할까 합니다. 그럼 이제 내용 시작하겠습니다. 반응형으로 작업하기 위해서는? 우선 반응형으로 작업하는 이유는 구글 SEO에 좋은 영향을 주기 위해서 라고 저는 생각합니다. 구글 SEO에 반응형웹은 모바일 친화적이라는 추가 점수가 있다고 생각됩니다. 서치콘솔에서도 보았던 것 같군요. 그래서 반응형으로 작업하기 위해서 먼저 해야 할 일은 바로 "모바일 화면 레이아웃 정하기" 입니다. 먼저 모바일을 작업해야만 반응형을 짜기 쉽기 때문인데요. 오늘 간단하게 모바일 화면을 구상해 보겠습니다. 사진과 같..</p>
                        </div>
                    </div>
                </s_index_article_rep>
            </s_article_rep>
        </div>
    </s_t3>
</body>

</html>

설명을 위해, 전에 만들었던 내용보다 조금 더 추가해 보았습니다.

오늘 사용한 태그를 조금 정리해 보겠습니다.

 : 이런 형태의 태그들은 값을 1 : 1로 가지고 있습니다.
<s_t3></s_t3> : 이런 형태의 태그들은 값을 그룹으로 가지고 있습니다.

<s_t3></s_t3> : 티스토리의 치환자를 사용하기 위한 준비같은 태그입니다.
<s_article_rep></s_article_rep> : 포스팅된 글들의 그룹 치환자입니다.
<s_index_article_rep></s_index_article_rep> : 시작 페이지일 때 표시되는 태그 영역입니다. 
위의 <s_article_rep> 태그 안에 입력해 주셔야 가능합니다.
<s_article_rep_thumbnail></s_article_rep_thumbnail> : 글의 썸네일을 표시하는 태그 영역입니다.
없는 경우에는 보이지 않습니다. (사진참고)

<!-- 블로그 정보 -->
이문의 코딩운동 : 블로그 제목
https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png : 블로그 대표 이미지 url
 : 블로그 대표 이미지를 포함한 IMG 태그
코딩 / 운동 / 일상 : 블로그 설명
Logia : 블로그 소유자의 필명

<!-- 블로그 URL -->
https://e-moon.tistory.com/ : 블로그 url
https://e-moon.tistory.com/rss : rss feed 주소
https://e-moon.tistory.com/tag : 태그로그 url
https://e-moon.tistory.com/guestbook : 방명록 url

<!-- 글 관련 (<s_article_rep> 태그 안에서 사용되는 태그입니다.) -->
https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FFTwEz%2FbtqEDRXZC3d%2FAAAAAAAAAAAAAAAAAAAAAE-e-sDq2NxVZcg_Aa0ZXpN5GDBBvfgIei8lq5D61qb4%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1769871599%26allow_ip%3D%26allow_referer%3D%26signature%3DJHfka%252BVnghaZjTeBW0JuokK6NfQ%253D : 포스팅된 글의 썸네일 url
티스토리 스킨 만들기 #3 [반응형으로.] : 포스팅된 글의 제목
안녕하세요. 이문입니다. 다음 내용이 늦어졌습니다. 이유는 작업했던 파일을 모르고 삭제한 모양입니다. 그리고 현재 개발중인 웹서비스가 있어서 동시에 진행하기에 어려움이 있었습니다. 스킨 제작 시리즈를 이제 우선으로 할까 합니다. 그럼 이제 내용 시작하겠습니다. 반응형으로 작업하기 위해서는? 우선 반응형으로 작업하는 이유는 구글 SEO에 좋은 영향을 주기 위해서 라고 저는 생각합니다. 구글 SEO에 반응형웹은 모바일 친화적이라는 추가 점수가 있다고 생각됩니다. 서치콘솔에서도 보았던 것 같군요. 그래서 반응형으로 작업하기 위해서 먼저 해야 할 일은 바로 "모바일 화면 레이아웃 정하기" 입니다. 먼저 모바일을 작업해야만 반응형을 짜기 쉽기 때문인데요. 오늘 간단하게 모바일 화면을 구상해 보겠습니다. 사진과 같.. : 포스팅된 글의 내용

오늘은 여기까지 해보았습니다. 많이 어려운 것 없이 너무 쉬운 것만 해보았네요.

다음에는 테블릿 레이아웃을 만들어 보겠습니다.

티스토리 블로그도 디자인이 이쁘다면 좋겠지만, 그것을 가능하게 하는 것은 치환자에 대한 이해도가 밑바탕인 것 같습니다. 저도 아직은 부족하지만 만들면서 공부하고 제가 중요하다고 생각하는 부분들을 더 설명해드리곤 하는데요.

궁금한게 있으시다면 댓글로 남겨주시면 성실히 답해 드리겠습니다.

그리고 치환자를 더 알고 싶으시다면

이 링크로 방문해 공부해 보시면 도움이 되실 겁니다.

https://tistory.github.io/document-tistory-skin/

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

MyBatis XML 에러[The content of elements must consist of well-formed character data or markup.] (0)	2020.07.01
[MyBatis, JAVA] 마이바티스에서의 NullPointerException 해결해 보기 (0)	2020.05.28
티스토리 스킨 만들기 #2 [HTML을 작성해보자] (0)	2020.05.26
간단한 reset.css 복사 및 붙여넣기 (0)	2020.05.26
티스토리 스킨 만들기 #1 [일단 부딫혀 보는 중입니다.] (0)	2020.05.26

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/01 »
일	월	화	수	목	금	토
				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	31

글 보관함

티스토리 뷰

티스토리 스킨 만들기 #3 [반응형으로.]

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

티스토리툴바