작은숲:위키노트/CSS: 두 판 사이의 차이

2022년 5월 7일 (토) 19:20 기준 최신판

활용

나열된 객체의 짝수번째, 홀수번째 선택자

tr:nth-child(odd) { background-color:#fbfbfb; }
tr:nth-child(even) { }

속성 선택자

input[type="text"], input[name="value"] { border:1px solid #ccc; padding:4px 4px; border-radius:3px; outline:none; }
input[type="checkbox"] { position:relative; top:2px; margin-right:4px; }

나눔고딕 글꼴 크기

body {
    font-size: 13px;
    font-family: 'Segoe UI', /*'Meiryo UI',*/ NanumGothic, NanumBarunGothic, 'Malgun Gothic', Dotum, 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

글꼴 크기를 15px로 할 때는 나눔바른고딕이 나은 것 같고, 13px로 할 때는 나눔고딕이 나은 것 같다.

글꼴을 나눔고딕으로 할 때 제목 등 굵은 글꼴 깔끔하게

h1 { font-weight:800; }
h2 { font-weight:600; }

문서 제목은 font-weight를 800 정도 해주는 것이 적당하고, 본문 제목의 경우는 600 정도로 해주는 것이 좋다.

같이 보기

참고

CSS: Even and Odd Rules
CSS Selector Reference
이 작은숲 문서의 출처는 위키노트의 위키노트/CSS 문서입니다.

@@ 4번째 줄: / 4번째 줄: @@
 tr:nth-child(odd) { background-color:#fbfbfb; }
 tr:nth-child(even) { }
-</source>
+</syntaxhighlight>
 === 속성 선택자 ===
 <syntaxhighlight lang="css">
 input[type="text"], input[name="value"] { border:1px solid #ccc; padding:4px 4px; border-radius:3px; outline:none; }
 input[type="checkbox"] { position:relative; top:2px; margin-right:4px; }
-</source>
+</syntaxhighlight>
 === 나눔고딕 글꼴 크기 ===
 <syntaxhighlight lang="css">
@@ 16번째 줄: / 16번째 줄: @@
      font-family: 'Segoe UI', /*'Meiryo UI',*/ NanumGothic, NanumBarunGothic, 'Malgun Gothic', Dotum, 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
      -webkit-font-smoothing: antialiased;
-}</source>
+}</syntaxhighlight>
-[[위키노트:글꼴|글꼴]] 크기를 15px로 할 때는 나눔바른고딕이 나은 것 같고, 13px로 할 때는 [[나눔고딕]]이 나은 것 같다.
+[[작은숲:위키노트/글꼴|글꼴]] 크기를 15px로 할 때는 나눔바른고딕이 나은 것 같고, 13px로 할 때는 [[나눔고딕]]이 나은 것 같다.
 === 글꼴을 나눔고딕으로 할 때 제목 등 굵은 글꼴 깔끔하게 ===
 <syntaxhighlight lang="css">
 h1 { font-weight:800; }
 h2 { font-weight:600; }
-</source>
+</syntaxhighlight>
 문서 제목은 <tt>font-weight</tt>를 <tt>800</tt> 정도 해주는 것이 적당하고, 본문 제목의 경우는 <tt>600</tt> 정도로 해주는 것이 좋다.
 == 같이 보기 ==
-* [[위키노트:CSS 선택자|CSS 선택자]]
+* [[작은숲:위키노트/CSS 선택자|CSS 선택자]]
-* [[위키노트:CSS 애니메이션|CSS 애니메이션]]
+* [[작은숲:위키노트/CSS 애니메이션|CSS 애니메이션]]
 == 참고 ==
 * [http://www.w3.org/Style/Examples/007/evenodd CSS: Even and Odd Rules]