CSS / font-family / 글꼴 정하는 속성
개요
font-family는 글꼴을 설정하는 속성이다.
- 기본값 : 웹브라우저의 기본 글꼴
- 상속 : Yes
- 애니메이션 : No
- 버전 : CSS Level 1
문법
font-family: font | initial | inherit
font: family-name 또는 generic-familyinitial: 기본값으로 설정inherit: 부모 요소의 속성값을 상속받음
font
family-name은 글꼴 이름이다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감싼다.
generic-family는 글꼴 유형이다. 글꼴 유형은 다음과 같다.
serif: 삐침 있는 명조 계열의 글꼴sans-serif: 삐침 없고 굵기가 일정한 고딕 계열의 글꼴monospace: 글자 폭과 간격이 일정한 글꼴cursive: 손으로 쓴 것 같은 필기 계열의 글꼴fantasy: 화려한 글꼴
여러 개의 글꼴 설정
글꼴을 여러 개 설정할 때는 쉼표로 구분한다. 예를 들어 다음과 같이 했다면...
font-family: Georgia, "Times New Roman", serif;
- Georgia 글꼴을 찾는다.
- Georgia 글꼴이 있다면 사용하고, 없다면 Times New Roman 글꼴을 찾는다.
- Times New Roman 글꼴이 있다면 사용하고, 없다면 웹브라우저에서 설정한 명조 계열의 글꼴을 사용한다.
글꼴은 접속한 기기에 설치되어 있는 글꼴을 사용한다. 따라서 CSS로 설정한 글꼴이 없을 수도 있으므로, 마지막은 generic-family로 정해두는 것이 좋다.
어떤 기기로 접속해도 같은 글꼴을 보여주고 싶다면, 웹폰트를 사용한다.
영어와 한글 글꼴을 다르게 하기
글꼴을 여러 개 설정했을 때, 첫 번째 글꼴로 표현할 수 없는 것만 다음 글꼴을 사용한다. 따라서 한글이 없는 글꼴을 앞에 두고, 한글 글꼴을 뒤에 두면 한글과 영어가 다른 글꼴로 표현된다. 예를 들어 다음과 같이 하면 한글은 맑은 고딕, 나머지는 Georgia로 표현된다.
font-family: Georgia, "Malgun Gothic", serif;
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.a { font-family: Georgia, serif; }
.b { font-family: serif; }
.c { font-family: sans-serif; }
.d { font-family: monospace; }
.e { font-family: cursive; }
.f { font-family: fantasy; }
.g { font-family: Georgia, "맑은 고딕", serif; }
</style>
</head>
<body>
<p class="a">font-family: Geogia;</p>
<p class="b">font-family: serif;</p>
<p class="c">font-family: sans-serif;</p>
<p class="d">font-family: monospace;</p>
<p class="e">font-family: cursive;</p>
<p class="f">font-family: fantasy;</p>
<p class="g">한글은 맑은 고딕, 나머지는 Georgia</p>
</body>
</html>
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 마우스 올렸을 때 모양 만들기 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만든다. .jb-title에 마우스를 올리면 .jb-text가 ...
CSS / aspect-ratio / 요소의 가로 세로 비율 정하는 속성
개요 aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성이다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있다. 문법 aspect-ratio: auto | number / number | initial | inherit auto : 요소가 고유의 가로 세로 비율을 가진 경우 그 값으로 설정한다. number / number : 가로 대 세로. 세로가 생략된 ...
CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성
개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...
버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...
CSS / Grid / grid-template-columns, grid-template-rows
grid-template-columns grid-template-columns 속성으로 열의 개수와 폭을 정합니다. 기본값은 none으로, 열을 만들이 않습니다. 속성값의 개수가 열의 개수이고, 각 속성값이 열 너비입니다. 예를 들어 속성값이 100px 50% auto라면 3열이 만들어지고, 1열의 너비는 100px, 2열의 너비는 50%, 3열의 너비는 남은 공간 전부가 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
columns columns는 다단으로 만드는 속성입니다. 단의 최소 가로 크기와 단의 최대 개수가 속성의 값입니다. 기본값은 auto로, 값을 입력하지 않으면 auto로 처리합니다. IE는 버전 10 이상을 지원합니다. 예제 1 문단을 3단으로 만듭니다. 단의 최소 가로 크기가 설정되지 않았으므로 균등한 크기로 단이 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb { columns : 3; } </style> </head> <body> <p class="jb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ...
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용한다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있다. 아래와 같은 코드인데, 고정폭이다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정하다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, iframe에 style을 추가하여 ...
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 / background-clip / 배경을 어디에 넣을지 정하는 속성
개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...
CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성
개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다. initial : 기본값으로 ...