CSS / font-weight / 글자 굵기 정하는 속성
개요
font-weight로 글자의 굵기를 정한다.
- 기본값 :
normal - 상속 : Yes
- 애니메이션 : Yes
- 버전 : CSS Level 1
문법
font-weight: normal | bold | bolder | lighter | number | initial | inherit
normal: 보통 굵기이다. 숫자 400과 같다.bold: 굵은 굵기이다. 숫자 700과 같다.bolder: 상속된 값보다 굵은 굵기다.lighter: 상속된 값보다 얇은 굵기이다.number: 100, 200, 300, 400, 500, 600, 700, 800, 900initial: 기본값으로 설정한다.inherit: 부모 요소의 값을 상속받는다.
예제 1
- 나타낼 수 있는 굵기는 글꼴에 따라 다르다. 예를 들어, 본고딕(Noto Sans CJK KR)이 맑은 고딕(Malgun Gothic)보다 표현할 수 있는 굵기가 더 많다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table {
width: 100%;
}
th {
text-align: left;
color: blue;
}
td {
vertical-align: top;
}
.jb-font-1 {
font-family: "Malgun Gothic";
}
.jb-font-2 {
font-family: "Noto Sans CJK KR";
}
.jb-normal {
font-weight: normal;
}
.jb-bold {
font-weight: bold;
}
.jb-100 {
font-weight: 100;
}
.jb-200 {
font-weight: 200;
}
.jb-300 {
font-weight: 300;
}
.jb-400 {
font-weight: 400;
}
.jb-500 {
font-weight: 500;
}
.jb-600 {
font-weight: 600;
}
.jb-700 {
font-weight: 700;
}
.jb-800 {
font-weight: 800;
}
.jb-900 {
font-weight: 900;
}
</style>
</head>
<body>
<table>
<tr>
<th>Malgun Gothic</th>
<th>Noto Sans CJK KR</th>
</tr>
<tr>
<td class="jb-font-1">
<p class="jb-normal">font-weight normal - Lorem Ipsum Dolor</p>
<p class="jb-bold">font-weight bold - Lorem Ipsum Dolor</p>
<p class="jb-100">font-weight 100 - Lorem Ipsum Dolor</p>
<p class="jb-200">font-weight 200 - Lorem Ipsum Dolor</p>
<p class="jb-300">font-weight 300 - Lorem Ipsum Dolor</p>
<p class="jb-400">font-weight 400 - Lorem Ipsum Dolor</p>
<p class="jb-500">font-weight 500 - Lorem Ipsum Dolor</p>
<p class="jb-600">font-weight 600 - Lorem Ipsum Dolor</p>
<p class="jb-700">font-weight 700 - Lorem Ipsum Dolor</p>
<p class="jb-800">font-weight 800 - Lorem Ipsum Dolor</p>
<p class="jb-900">font-weight 900 - Lorem Ipsum Dolor</p>
</td>
<td class="jb-font-2">
<p class="jb-normal">font-weight normal - Lorem Ipsum Dolor</p>
<p class="jb-bold">font-weight bold - Lorem Ipsum Dolor</p>
<p class="jb-100">font-weight 100 - Lorem Ipsum Dolor</p>
<p class="jb-200">font-weight 200 - Lorem Ipsum Dolor</p>
<p class="jb-300">font-weight 300 - Lorem Ipsum Dolor</p>
<p class="jb-400">font-weight 400 - Lorem Ipsum Dolor</p>
<p class="jb-500">font-weight 500 - Lorem Ipsum Dolor</p>
<p class="jb-600">font-weight 600 - Lorem Ipsum Dolor</p>
<p class="jb-700">font-weight 700 - Lorem Ipsum Dolor</p>
<p class="jb-800">font-weight 800 - Lorem Ipsum Dolor</p>
<p class="jb-900">font-weight 900 - Lorem Ipsum Dolor</p>
</td>
</tr>
</table>
</body>
</html>
예제 2
bolder나 lighter는 상속된 값에 따라 다른 굵기로 나온다. 다음은 상속된 굵기가 300일 때와 700일 때, bolder와 lighter가 어떻게 나오는지 비교하는 예제이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
font-family: "Noto Sans CJK KR";
}
.jb-300 {
font-weight: 300;
}
.jb-700 {
font-weight: 700;
}
.jb-bolder {
font-weight: bolder;
}
.jb-lighter {
font-weight: lighter;
}
</style>
</head>
<body>
<div class="jb-300">
<p>font weight 300 - Lorem Ipsum Dolor</p>
<p class="jb-bolder">font weight bolder - Lorem Ipsum Dolor</p>
<p class="jb-lighter">font weight lighter - Lorem Ipsum Dolor</p>
</div>
<div class="jb-700">
<p>font weight 700 - Lorem Ipsum Dolor</p>
<p class="jb-bolder">font weight bolder - Lorem Ipsum Dolor</p>
<p class="jb-lighter">font weight lighter - Lorem Ipsum Dolor</p>
</div>
</body>
</html>
테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성
개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...
그리드에서 열 개수는 grid-template-columns로 정합니다. 그 개수를 넘어가면 행이 바뀌죠. 그리고 높이는 행마다 다르게 정해집니다. 예를 들어 다음과 같은 HTML 문서가 있을 때, 첫번째 행의 높이와 다른 행의 높이는 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
CSS / border-width / 테두리 두께 정하는 속성
개요 border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-width border-right-width border-bottom-width border-left-width 문법 border-width: medium | thin | thick | length | initial | inherit; initial : 기본값으로 설정한다. 기본값은 medium이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 모든 테두리의 두께를 xx로 만든다. border-width: xx 다음은 위쪽과 아래쪽 테두리의 두께는 xx로, 왼쪽와 오른쪽의 두께는 yy로 ...
CSS / table-layout / 표(table) 크기 고정시키기
표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...
CSS / 표(table) 꾸미기 / 반응형 표 만들기
데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...
CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법
표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 한다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제이다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...
CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성
transition transition은 속성을 서서히 변화시키는 속성입니다. transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다. IE는 버전 10부터 지원합니다. 문법 transition: property timing-function duration delay | initial | inherit property : transition을 적용시킬 속성을 정합니다. transition-property를 참고하세요. timing-function : transition의 진행 속도를 정합니다. transition-timing-function를 참고하세요. duration : transition의 총 시간을 정합니다. transition-duration을 참고하세요. delay : transition의 시작을 연기합니다. transition-delay를 참고하세요. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 ...