블로거닷컴 블로그에서 본문 목록(li) 행간 조절하기/ CSS class 와 id에 관해, 슈도클래스와 슈도엘레멘트

기본 화면에서 몇 가지 수정하다 보니 그랬는지 원래 그런지, 목록 행간이 일반 텍스트 행간보다 좁아서 비슷하게 맞춰주었다.

테마> 맞춤설정> 고급> CSS 추가 화면으로 가서 넣어주면 되는데,
그냥 li 태그에 대해 css를 적으면 가젯까지 영향받는다. 그래도 좋으면 상관없지만.

그냥 본문만 영향받게 하려면, 본문만 범위로 잡아주어야 한다. 블로그 웹페이지 소스를 보면,

본문에 적용되는 class는 post-body 와 entry-content 의 두 가지다.

ul, li 태그는 class가 따로 없다.

그래서 이런 식으로 해주었다.

.post-body li { line-height: 175%; }

200%로도 해봤고 250%로도 해봤는데, 워드프로세서 문서처럼 보이려면 175%와 200%가 좋았다.

※ 해본 김에, CSS의 class와 ID 에 관해 좀 찾아보았다. 

찾아보았다고 말하기도 계면쩍은데, 그냥 구글검색해서 나온 상위 결과다.

CSS Syntax and Selectors
class, id는 모두 셀렉터. css파일에서 class는 앞에 "."이 붙고, id는 "#"가 붙음.


엘레멘트A.classB { } 식으로 css에 쓸 수 있음.
classB인 엘레멘트A가 { }의 속성을 받는다는 식. (elementC에서 classB이름을 재사용할 수 있는 지는 모르겠다. 안 해봤다. 어쨌든 일단 용도한정임을 분명하게 보여주는 점에선 좋네.)

앞서 <div class="post-body entry-content" 에서 보았듯이, 한 엘레멘트가 두 class가 지시하는 속성을 받을 수 있음. (겹치는 경우 어찌될 지는 안 해봤다)

class A, B, C가 동일한 속성 D를 가질 때는 ","를 써서 그루핑할 수 있다.
A, B, C { D }


How TO - Add a Class
버튼을 눌러 지정한 id에 class를 적용하기.


슈도클래스
selector:pseudo_class { property: value; }
가장 흔하게 볼 수 있는 것이 a:link, a:visited, a:hover, a:focus, a:active 등이다.

슈도엘레멘트
selector:pseudoelement { property: value; }
first-letter, first-line, before, after 등이다.
before와 after 슈도엘레멘트에는 content 라는 속성이 있는데 여기에 "내용"을 넣을 수 있는 것이 특별하다.

슈도클래스와 슈도엘레멘트 목록이 있는 웹페이지: CSS Selectors
http://www.htmldog.com/references/css/selectors/

Pseudo-classes

Selector

:link
:visited
:active
:hover
:focus
:target
/* matches a second-level heading that has been linked to */
:lang()
:first-child
:last-child
:first-of-type
:last-of-type
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:only-child
:only-of-type
:empty
:root
:enabled
:disabled
:checked
:not()

Pseudo-elements

Selector

::first-line
::first-letter
::before
::after
(::을 쓸 수도 있지만 :을 쓸 수도 있음.)

Combinators

Selector

selector " " selector (한 칸 띄우기)
selector > selector
selector + selector
selector ~ selector

블로거닷컴과 티스토리 html과 css파일을 뒤적이면서 이게 뭐야하고 당황했던 게 여기 다 있었다. 그리고 블로그 레이아웃에 자기만의 css를 조금 추가해 수정하는 데 편리한 물건이 여럿 보인다.