[ 티스토리 ] 블로그 꾸미기 - 나만의 CSS 스킨공유

 

나만의 블로그 스타일을 창조해 보기위해 CSS style 을 살짝 건드려 보았다. 주황색을 좋아함으로 주황색을 많이 사용하였다. 

 

제목 2 

인용구

dotted 컨테이너 

 

# 제목 2
.entry h3 { padding: 7px 10px 5px; margin: 1px 0px 10px; border-left: 5px solid #FFA07A; font-size: 16px; background-color: #fffcfa; color: #333; }  /* 제목 2 */

# 인용구
blockquote { position: relative; color: #000000; margin: 0; padding: 3px 10px; border-left: 5px solid #F8B88B; }

# dotted 컨테이너
.entry h5 { padding: 7px 0px 5px; margin: 0px 0px 10px; font-size: 16px; color: #333; border: 1px dotted orange;}  /* h5 dotted */

 

여기 인용구를 바꾸는 과정을 더 상세히 작성해 놓았다. 

[ 티스토리 ] 블로그 꾸미기 - 인용구(blackquote) css로 변경하기

 

 

---

 

CSS 를 꾸밀 때 항상 margin, border, padding, content 조절 할 때 헷갈린다.  이들의 순서는 아래와 같고 이렇게 외우면 쉽다.

Margin (M 마가렛이 울타리 밖에)

     Border   (B 울타리)

          Padding    (P 울타리 안에 pig)

               Content     (C 그냥 content 는 안쪽) 

 

Margin px 조정

Margin 의 px을 조정할때 아래와 같은 규칙이 있다. (시계방향으로 생각하면 된다.) 

• 4개의 값  margin: 10px 5px 15px 20px; (위 오른쪽 아래 왼쪽)
• 3개의 값  margin: 10px 5px 15px; (위 좌우 아래)  
• 2개의 값  margin: 10px 5px; (위아래, 좌우)
• 1개의 값   margin: 10px; (모두)

 

Padding 조정

Margin과 같은 규칙이다. 

 

Border 스타일 

CSS 를 이용하여 사용 할 수 있는 border style들은 다음과 같다. 참고하여 원하는 가두리를 골라써보길 바란다.

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

 

 

 

 

+ 좀 더 다양하게 블로그를 꾸미고 싶다면 CSS 홈페이지를 참고하면 된다. 

https://www.w3schools.com/cssref/ 

CSS Reference