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