안녕하세요, 여행벌입니다.

오늘은 CSS로 구글 웹 폰트 적용하는 방법에 대해서 포스팅해보겠습니다.

구글 웹폰트 적용하기

1) 먼저 구글 폰트 웹사이트에 접속합니다.

2) Language를 원하는 언어에 맞춰 선택합니다.

3) 여러 가지 폰트 중에 원하는 폰트를 선택합니다. 'Do Hyeon' 글꼴을 선택해보겠습니다.

4) Select this style 을 누르면 장바구니에 'Do Hyeon' 글꼴이 담기게 됩니다. 현재 'Do Hyeon' 글씨체는 Regular 400 굵기의 Style만 지원하고 있으므로 장바구니에 담아보겠습니다.

5) 장바구니는 오른쪽 상단의 버튼을 누르면 다음과 같이 현재 장바구니에 담겨 있는 글꼴이 나옵니다.

6) 장바구니에 담은 글꼴을 적용하기 위해서는 글꼴을 우리의 HTML 파일에 import 해와야 합니다. Embed Tap을 누른 후, @import를 누르면 다음과 같은 코드 덩어리 2개가 보입니다.

위의 @import 코드를 이용하면 웹 폰트를 우리의 파일에 불러올 수 있고, 아래의 코드는 우리가 아는 글꼴 적용 속성 값입니다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
        p{
            font-size : 3em;
            font-family : 'Do Hyeon', sans-serif;
        }
    </style>
</head>
<body>
    <p>'Do Hyeon' 체를 적용!</p>
</body>
</html>

style 태그 안에 @import 코드를 그대로 가져오면 font-family 속성을 통해 글꼴을 적용할 수 있습니다.

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 문단 스타일 : 텍스트 정렬, 들여 쓰기, 줄 간격 - travelbeeee  (1) 2020.04.08
[HTML+CSS] 텍스트 스타일 : 글자 색, 간격, 공백 속성 정리 - travelbeeee  (0) 2020.04.07
[HTML+CSS] 글꼴 관련 스타일 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 전체 선택자(*) 와 태그 선택자 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 클래스(class) 와 아이디(id) 선택자 - travelbeeee  (0) 2020.04.06

안녕하세요, 여행벌입니다.

오늘은 텍스트 스타일 중에서도 '글꼴' 과 관련된 스타일을 포스팅해보겠습니다.

font-family 속성 : 글꼴 지정하기

 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정합니다.

<style>
           선택자{ font-family : "글꼴이름";}
</style>

 웹 문서에 포함된 텍스트들은 사용자의 글꼴을 이용해 웹 브라우저 화면에 표시됩니다. 따라서, 아무리 여러 글꼴을 지정하더라도 사용자의 시스템에 설치되어있지 않다면 화면에 우리가 적용한 글꼴들이 표시될 수 없습니다. 따라서, 아래와 같이 글꼴이 없을 경우를 대비해 예비글꼴들을 적용할 수 있습니다.

<style>
           선택자{ font-family : "글꼴이름", 예비글꼴1, 예비글꼴2; }
</style>

 font-family 속성은 상속되기 때문에 <body> 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 같은 글꼴이 상속됩니다. 다른 글꼴을 사용하고 싶다면 태그 스타일이나 클래스 스타일을 이용해 해당 요소에서 다른 글꼴을 정의해야합니다.

font-size 속성 : 글자 크기 조절하기

 font-size 속성을 이용하면 글자 크기를 조정할 수 있습니다. 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고, 백분율을 사용할 수 있습니다.

font-size : < 절대 크기 > | < 상대 크기 > | < 크기 > | < 백분율 >

 font-size 에서 사용할 수 있는 값은 여러 형태이지만 주로 <크기> 값을 직접 지정하는 방법을 사용합니다.

font-weight 속성 : 글자 굵기 지정하기

 font-weight 속성을 이용하며 글자 굵기를 지정할 수 있습니다.

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-variant 속성 : 작은 대문자로 표시하기

영어 글꼴에서는 '작은 대문자' 라는 설정이 있습니다. 작은 대문자란 대문자를 소문자 크기에 맞추어 작게 표시한 것으로 font-variant 속성으로 작은 대문자를 지정할 수 있습니다.

font-variant : normal | small-caps

font-style 속성 : 글자 스타일 지정하기

 글자를 이탤릭체로 표시할 수 있습니다.

font-style : normal | italic | oblique

font 속성 : 키워드를 이용해 스타일 지정하기

 font 속성에 키워드를 이용하면 이미 만들어져있는 글꼴 스타일을 불러올 수 있습니다.

font : caption | icon | menu | message-box | small-caption | status-bar

예시1) font-size 속성

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p style="font-size : xx-large;">font-size = xx-large</p>
    <p style="font-size : 2.5em;">font-size = 2.5em</p>
    <p style="font-size : 100px;">font-size = 100px</p>
</body>
</html>

예시 2) font-weight 속성

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color : #F7C9D5;
        }
        p{
            color : black;
        }
    </style>
</head>
<body>
    <p style="font-weight : 100;">font-weight : 100</p>
    <p style="font-weight : 300;">font-weight : 300</p>
    <p style="font-weight : 500;">font-weight : 500</p>
    <p style="font-weight : 700;">font-weight : 700</p>
    <p style="font-weight : 900;">font-weight : 900</p>
</body>
</html>

예시 3) font-variant 속성

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color : #F7C9D5;
        }
        p{
            font-size : 50px;
            color : black;
        }
    </style>
</head>
<body>
    <p style="font-variant : normal;">Likelion</p>
    <p style="font-variant : small-caps;">Likelion</p>
</body>
</html>

이 외에도 다양한 글꼴 관련 스타일이 있지만, 주로 쓰이는 속성 위주로 포스팅을 마무리하겠습니다.

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 텍스트 스타일 : 글자 색, 간격, 공백 속성 정리 - travelbeeee  (0) 2020.04.07
[HTML+CSS] 구글 웹폰트 적용하기  (0) 2020.04.07
[HTML+CSS] 전체 선택자(*) 와 태그 선택자 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 클래스(class) 와 아이디(id) 선택자 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 레이아웃을 잡아주는 <div> 태그  (0) 2020.04.05

안녕하세요, 여행벌입니다.

오늘은 전체 선택자와 태그 선택자에 대해서 포스팅해보겠습니다.

전체 선택자(*)

전체 선택자는 말 그대로 스타일을 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하고 전체 선택자로는 * 을 사용합니다. 전체 선택자는 주로 문서의 여백이나 글꼴, 크기 등 기본 스타일을 초기화할 때 사용합니다.

<style>
          *{ 속성 : 속성값; }
</style>

태그 선택자

태그 선택자는 특정 태그가 쓰인 모든 요소에 스타일을 적용합니다. 예를 들어 p 선택자를 정의하면 웹 문서의 모든 p 태그의 요소들에 스타일이 적용됩니다.

<style>
          태그 { 속성 : 속성값; }
</style>

태그와 요소의 차이점

HTML 공부를 하다보면, '태그'와 '요소' 라는 단어가 자주 등장합니다. 둘은 비슷하지만 다르기 때문에 차이를 알아두시면 앞으로 공부하시는데 도움이 될 것 같습니다.

<p> 얘가 요소입니다. </p>

<p>, </p> 가 우리가 말하는 태그이고, 태그가 적용된 '얘가 요소입니다.' 가 요소입니다. 우리가 적용하는 스타일은 태그 안에 있는 요소에 적용하는 것입니다.

예시 - 전체 선택자

<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		* {
			font-size: 3em;
		}
	</style>
</head>

<body>
	<div class="head">Header영역에 속하는 친구</div>
	<p> 그냥 p 태그로 글씨 쓰기1 </p>
	<p> 그냥 p 태그로 글씨 쓰기2 </p>
	<p> 그냥 p 태그로 글씨 쓰기3 </p>
	<span>span 태그~~~~</span>
</body>

</html>

전체 선택자를 이용해서 font 크기를 키워보겠습니다. 

태그 종류와 상관 없이 모든 요소들에 스타일이 적용된 것을 확인할 수 있습니다.

이번에는 p 태그만 태그 선택자를 이용해서 글씨에 빨간 색깔을 적용해보겠습니다.

<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		* {
			font-size: 1.5em;
		}
		p{
			color : red;
		}
	</style>
</head>

<body>
	<div class="head">Header영역에 속하는 친구</div>
	<p> 그냥 p 태그로 글씨 쓰기1 </p>
	<p> 그냥 p 태그로 글씨 쓰기2 </p>
	<p> 그냥 p 태그로 글씨 쓰기3 </p>
	<span>span 태그~~~~</span>
</body>

</html>

태그가 p인 요소들만 스타일이 적용된 것을 확인할 수 있습니다.

전체 선택자와 태그 선택자는 클래스 선택자, 아이디 선택자 만큼

많이 사용되므로 꼭 익혀두시길 권장합니다!

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 구글 웹폰트 적용하기  (0) 2020.04.07
[HTML+CSS] 글꼴 관련 스타일 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 클래스(class) 와 아이디(id) 선택자 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 레이아웃을 잡아주는 <div> 태그  (0) 2020.04.05
[HTML+CSS] 드롭다운 목록 만들기 <select> 태그  (0) 2020.04.04

안녕하세요, 여행벌입니다.

오늘은 클래스(class), 아이디(id) 선택자에 대해서 포스팅해보겠습니다.

클래스(class) 아이디(id) 선택자

 클래스와 아이디 선택자 모두 특정 요소를 대상으로 스타일을 적용하기 위한 선택자입니다. 둘의 차이는 문서 안에 반복해서 쓰이냐 안쓰이냐 입니다. 아이디(id) 선택자는 문서 안에 단 한 번만 사용해야 되고, 클래스(class) 선택자는 문서 안에 여러 번 사용해도 됩니다. 아이디(id) 선택자도 문서 안에 여러 번 사용해도 스타일을 적용할 수 있습니다. 하지만, 아이디(id) 선택자는 문서 안에 단 한 번만 사용하기로 사회적 '약속' 을 했기 때문에 꼭꼭 문서에 단 한 번만 사용해야 합니다. 반대로 클래스(class) 선택자는 반복해서 사용해도 되기 때문에 문서 안에서 여러 번 반복해서 사용해도 문제가 없습니다.

아이디(id) 사용 방법

<태그 id="id명"> </태그>

 아이디(id)는 태그 안에 id="아이디명" 으로 값을 부여할 수 있습니다.

 스타일을 적용하기 위해서는 #아이디명 을 이용하면 됩니다.

<style>
          #아이디명 { 속성 : 속성값; }
</style>

클래스(class) 사용 방법

<태그 class="class명"> </태그>

 클래스(class)는 태그 안에 class="클래스명" 으로 값을 부여할 수 있습니다.

 스타일을 적용하기 위해서는 .클래스명 을 이용하면 됩니다.

<style>
          .클래스명{  속성 : 속성값; }
</style>

클래스(class) 와 아이디(id) 우선순위

 클래스와 아이디의 우선순위는 아이디가 더 높습니다. 따라서, 동일한 태그에 클래스와 아이디를 이용해서 서로 다른 스타일을 적용하면 아이디로 적용한 스타일이 적용됩니다.

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		body{
			background-color : black;
		}
		p{
			font-size : 3em;
		}
		#testId{
			color : blue;
		}
		.testClass{
			color : red;
		}
	</style>
</head>
<body>
	<p class="testClass" id="testId">클래스는 빨간색, 아이디는 파란색 적용</p>
</body>
</html>

 동일한 p태그에 "testClass"라는 class와 "testId"라는 id 를 부여했습니다. 그 후, class 선택자를 이용해 글씨 색깔을 빨간색으로, id 선택자를 이용해 글씨 색깔을 파란색으로 부여했습니다.

 결과는 위와 같이 id 선택자를 이용한 스타일이 적용된 것을 볼 수 있습니다.

예시

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		div{
			font-size : 3em;
			border : 1px solid black;
		}
	</style>
</head>
<body>
	<div>블록1</div>
	<div>블록2</div>
	<div>블록3</div>
	<div>블록4</div>
</body>
</html>

 다음과 같은 html 태그가 있을 때, 우리는 블록1, 블록3 은 너비를 키우고 글씨 색깔을 파란색으로 부여하고 싶고, 블록2, 블록4 는 높이를 키우고 글씨 색깔을 빨간색으로 부여하고 싶다면 블록1, 블록3 / 블록2, 블록4에 각각 동일한 클래스 명을 부여해 한 번에 스타일을 적용하면 됩니다.

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		div{
			font-size : 3em;
			border : 1px solid black;
		}
		.widthBlue{
			width : 500px;
			color : blue;
		}
		.heightRed{
			height : 200px;
			color : red;
		}
	</style>
</head>
<body>
	<div class="widthBlue">블록1</div>
	<div class="heightRed">블록2</div>
	<div class="widthBlue">블록3</div>
	<div class="heightRed">블록4</div>
</body>
</html>

 위와 같이 특정 요소에게 스타일을 적용하고 싶을 때 클래스(class)와 아이디(id)를 사용하면 됩니다. 정말 정말 많이 쓰이는 선택자이므로 꼭 둘의 차이점에 대해서 알아두세요!

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 글꼴 관련 스타일 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 전체 선택자(*) 와 태그 선택자 - travelbeeee  (0) 2020.04.06
[HTML+CSS] 레이아웃을 잡아주는 <div> 태그  (0) 2020.04.05
[HTML+CSS] 드롭다운 목록 만들기 <select> 태그  (0) 2020.04.04
[HTML+CSS] 사용자의 입력을 받는 <input> 태그  (0) 2020.04.03

+ Recent posts

티스토리툴바