CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

폰트 꾸미기

Font

폰트는 글꼴을 의미하는데, 글자의 서체를 의미한다. 

Font Family

일반적인 방법으로는 웹페이지에는 글꼴을 포함할 수 없다. 그렇기 때문에 웹페이지에 지정된 글꼴을 사용자가 보기 위해서는 사용자의 디바이스에도 해당 글꼴이 포함되어 있어야 한다. 그래서 CSS에서는 font family라는 개념이 있는데, 글꼴의 우선순위를 정해서 여러개 지정하면 그 중에서 사용할 수 있는 폰트를 반영하게 된다. 예를들어 아래의 구문은 사용자 컴퓨터에 Times New Roman 글꼴이 있다면 적용하고 없다면 Times를 적용한다. 

p{font-family:"Times New Roman", Times, serif;}

example1.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			a {
				font-family:'돋움',Dotum,AppleGothic,Arial,sans-serif
			}
		</style>
	</head>
	<body>
		<a href="http://opentutorials.org">오픈튜토리얼스</a>
	</body>
</html>

고정폭, 가변폭?

일반적으로 글꼴을 디자인 할 때 문자의 폭을 문자의 모양에 따라서 다른 넓이를 갖게 된다. 이를테면 숫자 1과 문자 m의 폭을 같게 디자인하면 어색하게 느껴질 수 있기 때문이다. 이러한 방식을 가변폭이라고 한다. 반대로 데이터 분석이나 코딩과 같은 일을 하는데는 미려함 보다는 정확함을 더 중시하기 때문에 글자의 폭을 같게 디자인하는데 이러한 방식을 고정폭이라고 한다. 일반적으로 고정폭 글꼴은 굴림체처럼 폰트의 이름 뒤에 '체'를 붙인다. 아래는 NHN에서 제공하는 글꼴인 '나눔고딕'과 '나눔고딕코딩'의 글자간의 넓이를 비교한 그림이다. (참고)

Sans-serif VS serif

serif(세리프)란 문자의 디자인에 포함된 장식적인 요소로 아래 그림의 붉은색에 해당된다. 대표적인 글꼴로 바탕체, 궁서체, Time New Roman이 있다. 

sans-serif(산세리프)란 세리프의 장식적인 요소가 없는 디자인으로 굴림체, 돋음체, Arial, Verdana가 대표적이다.

font-family에 serif나 sans-serif를 지정하면 운영체제 내부적인 기준에 따라서 적당한 글꼴이 표시된다.

Font Size

 

글꼴의 크기를 지정할 때는 font-size 효과를 사용한다. font-size 효과에서 자주 사용되는 단위는 px와 em이 있고,  W3C에서는 em의 사용을 권장하고 있다. em은 상대적인 크기인데, 폰트의 대문자 M의 폭을 16px로 계산하기 때문에 1em은 기본적으로 16px과 같다고 생각하면 된다. 하지만 em은 현재 엘리먼트가 상속하고 있는 폰트 크기를 기준으로 상대적으로 결정된다. (참고:em과 px를 변환해주는 서비스)

example2.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			#base{
				font-size:50px;
			}
			.em05{
				font-size:0.5em;
			}
			.em2{
				font-size:2em;
			}
			div{
				border:1px solid black;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<div id="base">
			50px
			<div class="em05">
				0.5em = 25px;
			</div>
			<div class="em2">
				2em = 100px
				<div class="em05">
					0.5em = 50px
				</div>
			</div>
		</div>
	</body>
</html>

Font Weight

글꼴의 두께를 지정할 때는 font-weight를 사용한다. 

 

example3.html - (jsfiddlegithub) 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			#normal {
				font-weight: normal;
			}
			#bold {
				font-weight: bold;
			}
			#bolder {
				font-weight: bolder;
			}
			#lighter {
				font-weight: lighter;
			}
			#lighter {
				font-weight: lighter
			}
			#w100 {
				font-weight: 100;
			}
			#w200 {
				font-weight: 200;
			}
			#w300 {
				font-weight: 300;
			}
			#w400 {
				font-weight: 400;
			}
			#w500 {
				font-weight: 500;
			}
			#w600 {
				font-weight: 600;
			}
			#w700 {
				font-weight: 700;
			}
			#w800 {
				font-weight: 800;
			}
			#w900 {
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		<div id="normal">
			normal
		</div>
		<div id="bold">
			bold
		</div>
		<div id="bolder">
			bolder
		</div>
		<div id="lighter">
			lighter
		</div>
		<div id="w100">
			100
		</div>
		<div id="w200">
			200
		</div>
		<div id="w300">
			300
		</div>
		<div id="w400">
			400
		</div>
		<div id="w500">
			500
		</div>
		<div id="w600">
			600
		</div>
		<div id="w700">
			700
		</div>
		<div id="w800">
			800
		</div>
		<div id="w900">
			900
		</div>
	</body>
</html>

댓글

댓글 본문
  1. sting
    1111
  2. 김종엽
    2016.08.24 완료!
  3. glad9090
    ^^
  4. Rhys Jung
    간결하고 명료한 강의 잘 봤습니다. 감사합니다.
  5. em은 픽셀과 같은거라고 생각했는데 아니였군요 잘배웠습니다!
  6. JustStudy
    고맙습니다
  7. WayneKing
    GoGoGOGOGOGOGOOOOOOGOOOOOOOOO
  8. 크레용샘
    이번에도 잘 배웠습니다.
    em의 개념을 잘 몰랐는데,
    확실히 알곘네요. 감사합니다.^^
  9. 윤주노
    구글의 폰트서비스를 보아하니 자신의 서버에도 폰트를 올려놓고 연결시키는게 가능할 것 같기도해보이네요... 초보자로서 보기에....
  10. 통조림
    em 존재도 몰랐었는데 엄청 유용할 것 같아요 감사합니다
  11. 쥬슈야
    폰트 사이즈부분은 예시에도 숫자가 있고 em 이나 px 에도 숫자가 있어서 좀 헷깔리네요;;
    다른 예시도 있으면 좋을 것 같습니다.
  12. kush
    늘 강의 잘듣고있습니다!
    질문하나 드려두 될까요! 제가 디자인을 공부하고 있는지라, 폰트에 약간 집착아닌 집착을 하는데요.
    웹페이지를 만들때, 내가 가지고있는 폰트를 다른사람들(뷰어) 인터넷 상에서도 보게하는 방법은 없으려나요?
    밑에 댓글을 보니, <웹폰트>라는 개념이 있는 듯 한데, 아직 잘 모르겠네요ㅠ
  13. YellowBall
    잘 들었습니다.
  14. 서현뿌뿌
    감사합니다~
  15. hyeju
    책 여러권 읽는 것 보다 더 꼼꼼하게 찝어주는 멋진 강의입니다. 감사합니다 !
  16. 김승갑
    감사합니다 :D
    대화보기
    • egoing
      아 지금은 그걸 전송해드릴 수 있는 마땅한 수단이 없어서 힘들고요. 아래 검색어를 열람해보시면 유튜브 다운로드 할 수 있는 방법들이 나옵니다 :)

      https://www.google.co.kr......F-8
      대화보기
      • 김승갑
        이고잉님 답글달아주셔서 감사합니다.
        저 메신저랑 이멜로 연락드렸었는데 바쁘셔서 확인못하시는거 같더라구요. 그래서 체념하고있다가 그냥 질문올렸는데 ㅎㅎ 감사드려요
        다름이아니라 제가 출퇴근길에 오픈튜토리얼강의로 공부많이하는데요 데이터도없고 핸드폰으로 보니까 해상도도 안좋아서 ㅠ 고민하고있었습니다. 혹시 동영상을받고싶은데 그럴수있을까요? 부탁드려요~!
        대화보기
        • 김승갑
          이고잉님 답글달아주셔서 감사합니다.
          저 메신저랑 이멜로 연락드렸었는데 바쁘셔서 확인못하시는거 같더라구요. 그래서 체념하고있다가 그냥 질문올렸는데 ㅎㅎ 감사드려요
          다름이아니라 제가 출퇴근길에 오픈튜토리얼강의로 공부많이하는데요 데이터도없고 핸드폰으로 보니까 해상도도 안좋아서 ㅠ 고민하고있었습니다. 혹시 동영상을받고싶은데 그럴수있을까요? 부탁드려요~!
          대화보기
          • 김승갑
            이고잉님 답글달아주셔서 감사합니다.
            저 메신저랑 이멜로 연락드렸었는데 바쁘셔서 확인못하시는거 같더라구요. 그래서 체념하고있다가 그냥 질문올렸는데 ㅎㅎ 감사드려요
            다름이아니라 제가 출퇴근길에 오픈튜토리얼강의로 공부많이하는데요 데이터도없고 핸드폰으로 보니까 해상도도 안좋아서 ㅠ 고민하고있었습니다. 혹시 동영상을받고싶은데 그럴수있을까요? 부탁드려요~!
            대화보기
            • egoing
              아래 서비스를 한번 참고해보세요. 구글에서 폰트를 지원해 줍니다 :)
              https://www.google.com/fonts
              대화보기
              • 김승갑
                폰트관련 질문합니다. 서버에 폰트가 설치되어 있으면 클라이언트 PC에 그 폰트가 없어도 자동으로 적용되지 않나요?
                그렇게 들은거 같아서 질문합니다.
                웹서버는 폰트를 따로 제공하지 않는다고 하셔서

                그러니까 사용자 PC에 폰트가 없으면 자동으로 적용안되고 폰트가 설치되어 있어야만 서버에서 정의한 폰트를 사용한다는 거 맞나요 ?
              • Yumi Wu
                정말 좋은 강의 감사합니다! 그 동안 '막기술'로 제 회사 홈페이지를 관리했는데 이 강의를 보고 '진기술'을 활용할 수 있게 됐습니다.
              • 샤핀
                폰트에 대한 많은 상식이 쌓이는 느낌입니다.
                이고잉 님 강의 정말 좋네요 ^^.
              • 씅우
                font-size 동영상의 예제 마지막부분(4분30초)에 class="em05"로 잡으신 div가 안닫혀있네요..참고해주세요
                동영상잘보고있습니다 :)
              • 은비
                그동안 코딩하면서 em단위 개념이 난해해서 많이 사용을 못했었는데 이번기회에 확실하게 개념 잡고가네요~^^
                앞으로는 px대신에 em을 더 많이 사용해야겠어요~ 감사합니다~^^
              • 비트윈
                공부가 공부같지가 않네요^^ 좋은 강의 감사합니다. 근데 계속 강의를 들을수록 사전을 찾아보는 경우가 많아지고 있습니다. 뭐 다외울필요가 없다고 하셔서 압박감없이 보려고 노력중입니다. ㅎㅎ
              • oh535
                감사합니다. 좋은 강의 덕분에 정말 열심히 공부하고 있습니다~~~~!!
              • 용12
                감사합니다 항상 잘 보고 있습니다!
              • kimdosa
                거의 초보입니다. 전자책 편집을 연습하고 있는데, 하나의 font-face에 두 개의 font-family를 설정할 수 있는지요? 가능하다면 어떻게 해야 할까요~
              • egoing
                의견 감사합니다!
                2013년 3월 20일 수요일에 Disqus님이 작성:
                대화보기
                • Chanyang Shin
                  지금 문뜩 공동공부기능을 알구 그전에 봤던 강의들을 봤어요 버튼을 누를려고 각 수업들을 다시 돌고있는데요 건의 할게 있어서요! 강의내용이 많고 예제가 많을수록 길이가 길어지는 포스팅에서 옆에 TOP이라는 링크를 걸면 그걸 눌르면 스크롤 없이도 페이지 상위로 올라갈수 있음 좋을까? 하구 코멘트 적어봐요 :-] 한국말로 수업을 들으니깐 너무 좋아요! 감사합니다!
                • Starmomo
                  font-family: '문자' 또는 한 단어 이상은 따옴표로 묶음. 예) font-family:'돋움',Dotum,AppleGothic,Arial,sans-seriffont-size: em 과 px (em: 기준 폰트에 대한 %(비율)로 크기를 표시)font-weight : font-weight: normal;(또는 bold; bolder; lighter; lighter 100;200;300; 400;500; 600;700;800;900; )끊어진 다리들이 이어지는 느낌입니다. 고맙습니다.
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기