티스토리 오디세이 스킨 폰트 수정하기 em, list

css를 얼마 만에 만져보는지 모르겠다.. (아련) 티스토리 구조도 잘 모르겠고 알쏭달쏭함.

이 오디세이 스킨 본문2가 기본으로 설정되어있는 듯한데 그게 너무 작길래 본문1 만큼 사이즈를 키우고 싶었다. 나는 성격상 매번 본문1로 지정할 사람이 못 되기 때문이지! 결과는 (일단) 성공!

css에 구글 검색으로 걸린 아래의 코드를 붙여넣기했다.

/* 포스팅 본문 폰트 사이즈 - 본문1 */
#tt-body-page p[data-ke-size='size18'], 
p[data-ke-size='size18'] { font-size: 1.2em; }

/* 포스팅 본문 폰트 사이즈 - 본문2 */
#tt-body-page p[data-ke-size='size16'], 
p[data-ke-size='size16'] { font-size: 1.11em; }

/* 포스팅 본문 폰트 사이즈 - 본문3 */
#tt-body-page p[data-ke-size='size14'], 
p[data-ke-size='size14'], ul, ol, li { font-size: 1.03em !important; }

의문스러운 점은, 처음에 붙여넣기 했을 땐 안됐다는 거다.. 대체 기준이 뭐임?!

그래서 다른 거 찾아다니면서 아티클뷰의 px 자체를 바꾸는 위험천만한(..?!) 수정도 해봤는데 역시 아니다 싶어서 다시 붙여 넣었더니 됨. 그게.. 컴퓨터라는 놈 아닐까..? (아련하게 바라보기)

 

아래에 ul, ol, li는 리스트 태그인데, 본문2에 똑같이 넣으면 되겠지? 하고 적용했다가 본문보다 글씨 크기가 더 커져버리는 상황이 발생했다. 일단 추측하자면

1. 자체적으로 설정이 되어있는 px에서 em이 배수로 뻥튀기를 시켜주는 경우. 
2. em에 내가 모르는 뭔가가 있을 경우

1번은 내가 자체적으로 설정되어있는 16을 아까 아티클뷰 건들다가 같이 18로 바꿔줬다가, 다시 16으로 바꿔주었다. 지금도 설정된 거 보니 딱히 문제는 없어 보인다. 뭐지..?!

 

그래서 우선 em의 정확한 정의에 대해 찾아보았다

em은 동적으로 변경되는 사이즈를 가지며, 부모 엘리먼트 크기와 같다.

만약 폰트 사이즈를 따로 설정하지 않았다면 기본 폰트로 지정되는데 이 사이즈가 16px.

즉 1em = 16px이고 2em = 32px이 되고 2.5em은 2.5*16 해서 40px.

만약 body 엘리먼트 font-size가 20px로 설정된 경우 1em=20px이 되고 2em은 40px이 되는 것.

폰트 사이즈 em, rem 구하는 방법

즉, 리스트 값의 부모 엘리먼트가 더 높은 값으로 설정되어있을 가능성이 나왔다! 그래서 폰트 사이즈 값을 확인해보기로 했다.

추측 : 부모 엘리먼트니까 상위에 위치할 것이다. 그래서 상위부터 보기로 결정!

아니나다를까, 바로 h1의 사이즈가 2em으로 지정되어있는 것이 발견됨!

pre 역시 지정되어있었다.

근데 p에 대해선 따로 없군... 하던 와중에 헤더 발견.

모르는 거 (꺽쇠) 등장!

 

> (꺽쇠) 기호의 의미가 뭘까?

추측 : 상하관계일 것이다. topnavmenu 산하인 ul, li에만 적용될 것이다. ul > li > a 인 이유는 상하관계가 그렇기 때문일 것.

[css] css 선택자에서 꺽쇠 > 의 의미는? 자식 선택자와 하위 선택자

나의 추측이 맞았다! 정식 용어는 '자식 선택자'라는 것 같다.

 

그렇게 소스를 다 둘러봤지만 찾을 수 없었다.. (키워드는 font-size로 검색했다)

tt-body-page 산하의 리스트도 보이지 않는다. article-view 산하에만 있다.

나는.. 주석을 꼼꼼하게 다는 개발자가 되어야겠다고 다짐했다..

 

이 시점에서 신경 쓰이는 건 무엇이냐.

왜 !important를 먹이지 않으면 반응이 없냐 (근데 이건 충분히 그럴 수 있음 뒤에 이미 제시되어있기 떄문에)

왜 본문 글자보다 크냐! ㅠㅠ

 

그리고 방금 어이없이 성공했다

/* 포스팅 본문 폰트 사이즈 - 본문1 */
#tt-body-page p[data-ke-size='size18'], 
p[data-ke-size='size18'] { font-size: 1.2em; }

/* 포스팅 본문 폰트 사이즈 - 본문2 */
#tt-body-page p[data-ke-size='size16'], 
p[data-ke-size='size16'], #tt-body-page li { font-size: 1.11em !important; }

/* 포스팅 본문 폰트 사이즈 - 본문3 */
#tt-body-page p[data-ke-size='size14'], 
p[data-ke-size='size14'] { font-size: 1.03em !important; }

혹시나 해서 #tt-body-page 산하로 넣어봤는데 문제없었다..! #tt-body-page li 로 폰트 크기가 동일하게 맞춰진 것.

참고로 ul은 폰트 사이즈가 안 먹었다.

아까 글씨가 확연히 더 커졌던 건 왜였을까..? 진실은 저 너머에-.. 아무튼 해결했다-.. 

 

ul li ol 헷갈리는 것 같으니 리스트 태그를 자세히 알아보자

1. 순서 있는 리스트 Ordered List : 앞에 1, 2, 3이 붙는다

<ol>
        <li>list item - a</li>
        <li>list item - b</li>
        <li>list item - c</li>
</ol>

2. 순서 없는 리스트 Unordered List : 앞에 · 이 붙는다. 

<ul>
        <li>list item Unordered</li>
        <li>list item Unordered</li>
        <li>list item Unordered</li>
</ul>

3. 정의 리스트 Definition List (홈페이지, 스킨 꾸미기 위주로 html을 접해온 나에게는 초면이다)

위아래 dl로 묶이고, dt > dd의 느낌이다. dt가 표제어고 dd가 들여쓰기 되어 dt를 설명하는 느낌.

어떤 기능을 하는 건지는 알았다. 그런데 이런 걸 도대체 어떻게 써먹나요?! 하는 의문이 들어 찾아보았다.

dl, dt, dd는 언제 쓰는 걸까?

역시 내가 궁금한 건 다른 분들이 다 궁금해해주셨다.