페이지마다 다른 스타일로 꾸미기

 

      서식 기능 활용

 

• 블로그 관리 홈(블로그주소/manage) > 콘텐츠 > 서식 관리
• 서식 관리 > 서식 쓰기 > HTML 모드

 

 

스킨 편집에서 html 코드를 수정해도 되지만 그러면 블로그 전체에 적용되니까 서식으로 만들어두면 페이지마다 다른 분위기를 낼 수 있다.

꼭 html 코드로 만든게 아니어도 글자 스타일이나 문단 간격, 사진 배치를 해놓은 스타일을 만들어도 되니까 활용하기 나름이다.

 

 

 

 

      코드 설명

 

서식에서 만들땐 첫번째 코드였는데 만든 서식 스타일을 불러와서 HTML 모드로 코드 확인하니 width, style, color처럼 세부 디테일로 지정된 좀 더 정확한 모양의 코드로 바뀌어 있다.

적용 모습은 둘 다 같다.

<p data-ke-size="size18"><b>
<span style="border-left: 80px solid #000000; 
             border-right: 20px solid #efefef; 
             box-shadow: #706e6e 0px 5px 5px 0px; 
             padding: 7px 10px 7px 0px; 
             background-color: #efefef;">
             서식 기능 활용하기</span></b></p>

<p data-ke-size="size18"><b>
<span style="border-left-width: 80px;
             border-left-style: solid; 
             border-left-color: #000000; 
             border-right-width: 20px; 
             border-right-style: solid; 
             border-right-color: #efefef; 
             box-shadow: #706e6e 0px 5px 5px 0px; 
             padding: 7px 10px 7px 0px; 
             background-color: #efefef;">
             서식 기능 활용하기</span></b></p>

 

이렇게 하면 이 글의 검정색 라벨 같은 모양의 서식 스타일이 나온다.

 

• 글자 크기 : <p data-ke-size="size18"></p>
• 글자 굵게 : <b></b>
• 검정색 박스 위치 : border-left
• 검정색 박스가 사실은 실선 : solid
• 실선 굵기를 : 80px로 하니 네모박스처럼 굵어져
• 검정색 HEX 값 : #000000 구글에 치면 다른 색상 고를수 있어
• 오른쪽 박스 설정 : border-right
• 오른쪽, 아래 방향 그림자 : box-shadow
• 박스 안 글자 부분 간격 조절 : padding
• 글자 부분 배경색 : background-color

 

 

 

 

      적용하기

 

글 작성 화면 > 상단 메뉴바 오른편 > 가로방향 점 3개 > 서식 선택