▣ 서체(Fonts)
코드 편집기에서 기본적으로 제공되는 다양한 서체를 적용할 수 있고 링크를 통해 외부로부터 제공되는 서체를 이용할 수도 있습니다. 임의로 작성한 아래의 코드를 예시로 서체의 설정에 대해 살펴보겠습니다.
<body>
<div id="first-block">
<h2 class="paragraph-title">First Heading</h2>
<p class="paragraph">Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Natus, veritatis doloribus necessitatibus
ipsa ab eveniet quis ut porro animi magnam?</p>
</div>
<div id="second-block">
<h2 class="paragraph-title">Second Heading</h2>
<p class="paragraph">Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Rerum doloribus beatae cupiditate, quas
dicta nesciunt necessitatibus sit suscipit? Necessitatibus, modi!</p>
</div>
</body>
□ 폰트-패밀리(Font-family)
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
코드 편집기에서 폰트 패밀리 속성을 설정하려고 타이핑을 하면 아래와 같이 VS Code의 내장 익스텐션(Extension)을 통해 적용 가능한 다양한 서체를 볼 수 있는데, 이들 중 'Arial, Helvetica, sans-serif'를 값으로 설정하고 브라우저에서 서체의 변화를 확인해 보기 바랍니다.
□ 세리프(Serif) VS 산세리프(Sans-serif)
여러 개의 서체가 폰트 패밀리 속성의 값으로 나열되어 있는 이유는 브라우저 환경이 해당 서체를 지원하지 않을 경우 대체하기 위함입니다. 즉 위에서 선택된 'Arial, Helvetica, sans-serif'의 경우, 'Arial'을 가장 우선적으로 적용하되 지원되지 않으면 'Helvetica'로 대체하고, 그마저도 지원되지 않는다면 'sans-serif'유형의 다른 서체로 대체할 것을 의미합니다.
이때 'Arial' 과 'Helvetica'는 폰트 패밀리의 명칭(Font family name)이고, 'sans-serif'는 에지(Edge)가 없는 서체의 통칭(Generic family name)입니다. 따라서 'serif'는 에지가 있는 서체의 통칭으로 파악할 수 있습니다.
▣ 구글 서체(Google fonts)
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
코드 편집기에서 제공되는 서체 이외에 브라우저 환경에서 안전하게 사용할 수 있는 서체를 외부로부터 적용할 수도 있습니다. 그중에서 대표적인 구글 서체를 설정하고 이용하는 방법에 대하여 살펴보겠습니다.
구글 서체를 이용하면 코드 편집기에서 명칭만 보고 적용한 이후에 브라우저에서 직접 확인해야 하는 번거로움이 없고 마음에 드는 서체와 다양한 스타일을 브라우저에서 먼저 보고 선택할 수 있는 장점이 있습니다.
□ 이용 방법
위의 링크로 연결된 구글 서체 사이트(fonts.google.com)에 접속하면 첫 화면에서 수많은 서체의 견본들을 볼 수 있으며, 아래와 같이 검색 기능을 이용해 사용자가 원하는 폰트 패밀리를 찾을 수도 있습니다.
원하는 폰트 패밀리를 선택하면 아래와 같이 폰트 패밀리 내의 여러 가지 스타일을 선택할 수 있으며, 동시에 화면 오른쪽에 현재 선택한 스타일들을 확인할 수 있습니다. 또한 선택한 스타일을 링크 또는 임포트 방법으로 이용할 수 있는 코드가 자동으로 생성됩니다. 여기서는 예시로 '레귤러', '이탤릭' 그리고 '볼드' 3가지를 선택해 보겠습니다.
□ Import 적용 방법
구글 서체를 <style> 태그 내에서 적용하는 방법입니다. 아래와 같이 @import 탭을 선택하고 코드를 복사하여 <style> 태그내에 적용해 보겠습니다.
<style>
/* Fonts from Google */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap');
body {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
line-height: 1.6em;
}
#first-block .paragraph {
/* font-weight: bold; */
font-weight: 700;
}
#second-block .paragraph {
/* font-weight: bold; */
font-style: italic;
}
</style>
위의 코드에서 '폰트 사이즈(Font-size)'는 서체의 크기를 설정하고, '라인 하이트(Line-height)'는 작성하는 텍스트의 줄 간격을 설정할 수 있는 속성입니다. 그리고 '폰트 웨이트(Font-weight)'는 서체의 두께를 설정하고, '폰트 스타일(Font-style)'은 이택릭체를 설정할 수 있습니다.
※ 참고로 'font' 관련 속성들은 단축 문법(Shorthand syntax)을 적용하여 아래의 예시와 같이 한꺼번에 작성할 수도 있습니다.
<style>
p {
font-family: italic bold 16px 'Montserrat', sans-serif;
}
</style>
외부로부터 적용된 폰트 패밀리 'Montserrat'과 폰트 웨이트 속성의 값 'bold' 또는 '700' 그리고 폰트 스타일 속성의 값 'italic'을 적용해 본 결과는 아래와 같습니다.
□ Link 적용 방법
구글 서체가 제공되는 링크를 <head> 태그 내에 두는 방법입니다. 아래와 같이 <link> 탭을 선택하고 코드를 복사하여 <head> 태그 내에 넣어 적용해 보겠습니다.
<head>
<!-- Fonts from Google -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
line-height: 1.6em;
}
#first-block .paragraph {
font-style: italic;
}
#second-block .paragraph {
/* font-weight: bold; */
font-weight: 700;
}
</style>
</head>
적용한 결과는 아래와 같으며 임포트 방법과 동일합니다.
▣ CSS의 단위(CSS units)
서체의 크기(Font-size)뿐만 아니라 다양한 속성의 크기를 설정하기 위해 CSS에서는 여러 가지 측정 단위를 사용할 수 있습니다. 절대 단위 중에서는 px(pixel)가 주로 이용되고, 대부분의 경우 상대 단위를 활용합니다.
□ 절대 단위
cm : centimeters
mm : millimeters
in : inches
px : pixels(1px = 1/96th of 1in) - 주로 사용
pt : points(1pt = 1/72nd of 1in = 1.33px) - from Microsoft
pc : picas(1pc = 12pt = 1/6th of 1in = 16px)
□ 상대 단위
% : To 'parent' element
em : To font-size of 'parent' element
rem : To font-size of "root" element
vw : To 1% of ""viewport"" width
vh : To 1% of ""viewport"" height
▣ 색의 유형(Color types)
CSS에서 색의 속성을 표현할 수 있는 다양한 방법이 있으며 그중에서 대표적인 색 이름, RGB 코드, 헥스 코드 세 가지 방법에 대하여 살펴 보겠습니다. 표시하는 방법이 조금씩 다르지만 세 가지 방법 모두 기본적으로 3가지 원색(Red, Green, Blue)의 혼합을 통해 색을 표현하는 것은 동일합니다.
□ 색 이름(Color name)
<style>
h1 {
/* Color Name */
color: red;
color: green;
color: blue;
}
</style>
색의 이름을 'color' 속성의 값으로 이용하는 방법으로 코드 편집기의 내장된 기능을 이용하여 다양한 색의 이름을 선택할 수 있습니다.
□ RGB 코드(RGB code)
<style>
h2 {
/* RGB Code : rgb(red,green,blue) */
color: rgb(255,0,0); /* red */
color: rgb(0,255,0); /* green */
color: rgb(0,0,255); /* blue */
}
</style>
'color' 속성의 값을 "rgb(red, green, blue) "의 코드 형태로 표현하는 방법입니다. 이때 세 가지 색의 값은 각각 0 ~ 255입니다. 색의 값을 일일이 기억할 수 없기 때문에 코드 편집기에 내장된 기능을 이용하여 편리하게 색을 선택할 수 있습니다.
아래와 같이 임의의 숫자 값을 입력하면 코드 앞에 색의 견본을 보여주는 작은 사각형이 나타나고 그 위에 마우스 포인터를 두면 아래와 같이 색을 선택할 수 있는 보조도구 창이 생성되어 이용할 수 있습니다.
□ 헥스 코드(Hex code)
<style>
h3 {
/* Hex Code : #rrggbb */
color: #ff0000; /* red */
color: #00ff00; /* green */
color: #0000ff; /* blue */
}
</style>
'color' 속성의 값을 ' # '기호와 6자리 숫자로 표현하는 방법입니다. 이때 앞쪽에서부터 두 자리씩 각각 Red, Green, Blue 색의 값을 의미하며 RGB코드와 마찬가지로 임의의 값을 입력한 다음 코드 편집기의 내장된 기능을 이용하여 색을 선택할 수 있습니다.
이제까지 살펴본 세 가지 방법으로 색을 설정한 결과는 아래와 같습니다.
▣ 색상코드 선택기(Color Picker)
서체 설정의 경우와 마찬가지로 코드 편집기에서 색을 설정하고 브라우저를 통해 일일이 확인하는 것보다 외부 사이트를 통해 브라우저에서 적용되는 색상을 먼저 보고 해당 코드를 선택할 수도 있습니다. 대표적인 사이트는 아래와 같습니다.
HTML Color Codes
Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
htmlcolorcodes.com
2. Color Hex
Color Hex Color Codes
Color Hex Color Codes Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selecte
www.color-hex.com
3. Color Hunt
Color Hunt - Color Palettes for Designers and Artists
Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes
colorhunt.co
'HTML & CSS > CSS3' 카테고리의 다른 글
| [CSS] TIL6 : 테두리(보더)와 내부 여백(패딩) 및 외부 여백(마진) / 박스의 폭과 높이 그리고 박스 사이징 (0) | 2021.04.30 |
|---|---|
| [CSS] TIL5 : 배경(백그라운드) 설정 (0) | 2021.04.29 |
| [CSS] TIL4 : 박스 모델 / 크롬 웹 브라우저의 개발자 도구 이용 / 박스의 유형 및 설정 (0) | 2021.04.29 |
| [CSS] TIL2 : 선택자의 종류 및 조합방법 / 스타일 적용 우선순위 (0) | 2021.04.27 |
| [CSS] TIL1 : 코드의 구성 / 실행 방법 및 우선순위 / 프레임워크 이용 방법 (0) | 2021.04.27 |
댓글