Section 11-3 - 티스토리 반응형 스킨 만들기 - 글 상세 내용 디자인

이번 섹션은 글 상세 내용 넣기입니다.
헌데 제목은 "글 상세 내용 디자인"입니다. 왜?
글 상세 내용 치환자는 너무 간단합니다. 하지만 글 본문을 보는 것이기 때문에 CSS로 이쁘게 디자인을 많이 해야 하므로 디자인이라고 정했습니다. ㅡ/,.ㅡ;;ㅎㅎㅎ

그럼 바로 시작 ㄱㄱㄱㄱㄱ

STEP 1. skin.html 글 본문 치환자 넣기

                    
                    

                        
            



            
이번 섹션은 글 상세 내용 넣기입니다.
헌데 제목은 "글 상세 내용 디자인"입니다. 왜?
글 상세 내용 치환자는 너무 간단합니다. 하지만 글 본문을 보는 것이기 때문에 CSS로 이쁘게 디자인을 많이 해야 하므로 디자인이라고 정했습니다. ㅡ/,.ㅡ;;ㅎㅎㅎ
그럼 바로 시작 ㄱㄱㄱㄱㄱ

STEP 1. skin.html 글 본문 치환자 넣기
                    
                    

                        
                    
                    



글 관련 정보 하단부에  넣으면 끝입니다.
저는 article 이라는 class명을 부여했는데 다른 걸로 충분히 바꿔서 넣으셔도 됩니다.
※ 참고 : 구글 애드센스나 카테고리의 다른 글과 같은 플러그인은 글 본문을 중심으로 상하단에 배치됩니다.

아무 글이나 눌러서 글 본문을 확인하면 아래와 같이 나옵니다.




STEP 2. style.css 글 본문 디자인
/* Article */
.article {padding:20px; background:#fff; border:1px solid #ddd; font-weight:normal; font-size:1em; line-height:1.75em}
.article h1 {font-size:2em; line-height:2.5em}
.article h2 {font-size:1.5em; line-height:2em}
.article h3 {margin:30px 0 10px; padding:15px 0 0 10px; border-left:5px solid #1d1d1d; color:#000; font-weight:bold; font-size:1.375em;}
.article h4 {color:#1d1d1d; font-size:1.125em}
.article ul {padding-left:20px; list-style:disc}
.article ul li ul {padding:0 0 20px 20px; list-style:none; font-size:0.875em}
.article ul li ol {padding:0 0 20px 20px; list-style:decimal; font-size:0.875em}
.article blockquote {padding:20px; font-size:0.875em; line-height:1.5em; color:#333; background:#efefef; border:1px solid #ddd}
.article a {color:#ff8149}


저는 제목(h1,h2,h3,h4 까지만), 목록, blockquote, 링크 디자인만 입혔습니다. 블로그를 운영하다 모자르면 채워넣는 걸로 하죠 훗;;
본문 요소들의 디자인을 바꾸실때 .article이라는 클래스를 앞에다 붙이는거 잊지마세요!! 엄한곳에 디자인이 적용될 수 있습니다.
위와 같이 디자인하면 아래와 같은 결과가 나옵니다.



참 쉽죠?
다음 섹션은 글 본문에 관련된 부가정보인 태그와 소셜 공유버튼 추가를 해보도록 하겠습니다.



            



            
            

  
  


                    
                    

• 글 관련 정보 하단부에

  이번 섹션은 글 상세 내용 넣기입니다.
  헌데 제목은 "글 상세 내용 디자인"입니다. 왜?
  글 상세 내용 치환자는 너무 간단합니다. 하지만 글 본문을 보는 것이기 때문에 CSS로 이쁘게 디자인을 많이 해야 하므로 디자인이라고 정했습니다. ㅡ/,.ㅡ;;ㅎㅎㅎ

  그럼 바로 시작 ㄱㄱㄱㄱㄱ

  
  

  STEP 1. skin.html 글 본문 치환자 넣기

  
  

  • 글 관련 정보 하단부에 넣으면 끝입니다.
  • 저는 article 이라는 class명을 부여했는데 다른 걸로 충분히 바꿔서 넣으셔도 됩니다.
    

  ※ 참고 : 구글 애드센스나 카테고리의 다른 글과 같은 플러그인은 글 본문을 중심으로 상하단에 배치됩니다.

  
  

  아무 글이나 눌러서 글 본문을 확인하면 아래와 같이 나옵니다.
  
  

  

  
  

  
  

  
  

  STEP 2. style.css 글 본문 디자인

  /* Article */
  .article {padding:20px; background:#fff; border:1px solid #ddd; font-weight:normal; font-size:1em; line-height:1.75em}
  .article h1 {font-size:2em; line-height:2.5em}
  .article h2 {font-size:1.5em; line-height:2em}
  .article h3 {margin:30px 0 10px; padding:15px 0 0 10px; border-left:5px solid #1d1d1d; color:#000; font-weight:bold; font-size:1.375em;}
  .article h4 {color:#1d1d1d; font-size:1.125em}
  .article ul {padding-left:20px; list-style:disc}
  .article ul li ul {padding:0 0 20px 20px; list-style:none; font-size:0.875em}
  .article ul li ol {padding:0 0 20px 20px; list-style:decimal; font-size:0.875em}
  .article blockquote {padding:20px; font-size:0.875em; line-height:1.5em; color:#333; background:#efefef; border:1px solid #ddd}
  .article a {color:#ff8149}
  

  
  

  • 저는 제목(h1,h2,h3,h4 까지만), 목록, blockquote, 링크 디자인만 입혔습니다. 블로그를 운영하다 모자르면 채워넣는 걸로 하죠 훗;;
  • 본문 요소들의 디자인을 바꾸실때 .article이라는 클래스를 앞에다 붙이는거 잊지마세요!! 엄한곳에 디자인이 적용될 수 있습니다.

  위와 같이 디자인하면 아래와 같은 결과가 나옵니다.

  
  

  

  
  

  
  

  참 쉽죠?

  다음 섹션은 글 본문에 관련된 부가정보인 태그와 소셜 공유버튼 추가를 해보도록 하겠습니다.
  

  
  

  
  

  넣으면 끝입니다.
• 저는 article 이라는 class명을 부여했는데 다른 걸로 충분히 바꿔서 넣으셔도 됩니다.
  

※ 참고 : 구글 애드센스나 카테고리의 다른 글과 같은 플러그인은 글 본문을 중심으로 상하단에 배치됩니다.

아무 글이나 눌러서 글 본문을 확인하면 아래와 같이 나옵니다.

STEP 2. style.css 글 본문 디자인

/* Article */
.article {padding:20px; background:#fff; border:1px solid #ddd; font-weight:normal; font-size:1em; line-height:1.75em}
.article h1 {font-size:2em; line-height:2.5em}
.article h2 {font-size:1.5em; line-height:2em}
.article h3 {margin:30px 0 10px; padding:15px 0 0 10px; border-left:5px solid #1d1d1d; color:#000; font-weight:bold; font-size:1.375em;}
.article h4 {color:#1d1d1d; font-size:1.125em}
.article ul {padding-left:20px; list-style:disc}
.article ul li ul {padding:0 0 20px 20px; list-style:none; font-size:0.875em}
.article ul li ol {padding:0 0 20px 20px; list-style:decimal; font-size:0.875em}
.article blockquote {padding:20px; font-size:0.875em; line-height:1.5em; color:#333; background:#efefef; border:1px solid #ddd}
.article a {color:#ff8149}

• 저는 제목(h1,h2,h3,h4 까지만), 목록, blockquote, 링크 디자인만 입혔습니다. 블로그를 운영하다 모자르면 채워넣는 걸로 하죠 훗;;
• 본문 요소들의 디자인을 바꾸실때 .article이라는 클래스를 앞에다 붙이는거 잊지마세요!! 엄한곳에 디자인이 적용될 수 있습니다.

위와 같이 디자인하면 아래와 같은 결과가 나옵니다.

참 쉽죠?

다음 섹션은 글 본문에 관련된 부가정보인 태그와 소셜 공유버튼 추가를 해보도록 하겠습니다.