콘텐츠마케팅

Blogger: 블로그 코드에 대한 CSS 스타일

친구가 Blogger 항목에서 코드 영역을 어떻게 만들었는지 물었습니다. 내 Blogger 템플릿에서 CSS용 스타일 태그를 활용하여 작업했습니다. 내가 추가한 내용은 다음과 같습니다.

p.code {
    font-family: Courier New;
    font-size: 8pt;
    border-style: inset;
    border-width: 3px;
    padding: 5px;
    background-color: #FFFFFF;
    line-height: 100%;
    margin: 10px;
}
  1. p.code: HTML을 타겟으로 하는 CSS 규칙입니다. <p> 클래스 이름이 "code"인 요소입니다. 이는 이 클래스가 있는 모든 단락이 다음 속성에 따라 스타일이 지정됨을 의미합니다.
  2. font-family: Courier New;: 이 속성은 글꼴 모음을 "Courier New"로 설정합니다. 대상 요소 내의 텍스트에 사용될 글꼴을 지정합니다.
  3. font-size: 8pt;: 이 속성은 글꼴 크기를 8포인트로 설정합니다. 대상 요소 내의 텍스트는 이 글꼴 크기로 표시됩니다.
  4. border-style: inset;: 이 속성은 테두리 스타일을 "삽입"으로 설정합니다. 대상 요소 주변의 테두리가 움푹 들어가거나 눌려진 모양을 만듭니다.
  5. border-width: 3px;: 이 속성은 테두리 너비를 3픽셀로 설정합니다. 요소 주위의 테두리 두께는 3픽셀입니다.
  6. padding: 5px;: 이 속성은 대상 요소 내부의 콘텐츠 주위에 5픽셀의 패딩을 추가합니다. 텍스트와 테두리 사이의 간격을 제공합니다.
  7. background-color: #FFFFFF;: 이 속성은 배경색을 흰색(#FFFFFF)으로 설정합니다. 대상 요소 내의 콘텐츠는 흰색 배경을 갖습니다.
  8. line-height: 100%;: 이 속성은 줄 높이를 글꼴 크기의 100%로 설정합니다. 글꼴 크기에 따라 텍스트 줄의 간격이 지정됩니다.
  9. margin: 10px;: 이 속성은 전체 요소 주위에 10픽셀의 여백을 추가합니다. 이 요소와 페이지의 다른 요소 사이에 간격을 제공합니다.

제공된 CSS 코드는 "code" 클래스를 사용하여 HTML 단락의 스타일을 정의합니다. 이 단락의 글꼴, 글꼴 크기, 테두리 스타일, 테두리 너비, 패딩, 배경색, 줄 높이 및 여백을 설정합니다. 이 스타일은 Blogger 게시물의 코드 조각이나 미리 서식이 지정된 텍스트에 적용되어 특정 모양을 제공할 수 있습니다.

다음과 같이 표시됩니다.

p.코드 {
글꼴 모음: Courier New;
글꼴 크기: 8pt;
테두리 스타일: 삽입;
테두리 너비: 3px;
패딩 : 5px;
배경색: #FFFFFF;
줄 높이: 100%;
여백 : 10px;
}

행복한 코딩!

Douglas Karr

Douglas Karr 의 CMO입니다. 오픈인사이트 그리고 설립자 Martech Zone. Douglas는 수십 개의 성공적인 MarTech 스타트업을 도왔고, Martech 인수 및 투자에서 5억 달러가 넘는 실사를 도왔으며, 기업이 판매 및 마케팅 전략을 구현하고 자동화하도록 지속적으로 지원하고 있습니다. Douglas는 국제적으로 인정받는 디지털 혁신이자 MarTech 전문가이자 연설가입니다. Douglas는 Dummie's Guide와 비즈니스 리더십 서적을 집필한 작가이기도 합니다.

관련 기사

맨 위로 가기 버튼
닫기

애드블록 감지됨

Martech Zone 은(는) 광고 수익, 제휴 링크 및 후원을 통해 사이트에서 수익을 창출하기 때문에 이 콘텐츠를 무료로 제공할 수 있습니다. 사이트를 볼 때 광고 차단기를 제거해 주시면 감사하겠습니다.