[FE기초]CSS폰트
이전 포스팅에서는 CSS를 다루는 법 그리고 선택자를 사용하는 방법 정도를 알아보았다.
이제부터 본격적인 css의 스타일을 적용하는 방법 등의 다양한 사용 방법을 알아보자
1. 폰트 스타일
글꼴에 관련된 속성을 먼저 알아보자
- font-family : 글꼴 종류를 지정 (defatul:웹 브라우저 기본 글꼴)
- font-size : 글자의 크기 지정
- font-style : 글자를 이텔릭체로 표시할지 지정
- font-weight : 글자 굵기를 지정
- font-variant : 소문자를 작은 대문자로 바꾸는 속성
웹 폰트
사용자의 컴퓨터에 설치된 폰트와 상관없이 온라인의 특정 서버에 위차한 폰트 파일을 다운로드하여 화면에 표시해 주는 웹 전용 폰트
대표적으로 구글 웹 폰트가 있다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
해당 사이트에 방문하여 link 또는 @import문을 사용해서 웹 폰트를 적용할 수 있다.
사이트에 방문하여 원하는 폰트를 선택후 get font를 통해서 획득 가능
폰트 크기 단위
여러가지의 단위가 존재하며 대표적인 단위를 한번 알아보자.
- px : 픽셀단위
- rem : 루트요소의 글꼴 크기
- em : 요소의 글꼴 크기
- vw : viewport 너비의 1%
- vh : viewport 높이의 1%
여기서 중요한 부분은 rem 과 em에 관한 부분이다.
rem은 최상위 폰트 사이즈에 기반하여 몇배를 하는지가 결정된다.
반대로 em은 최상위가 아닌 현재자신에 기준을 한다.
즉 만약 div 태그 내부에 위치한 태그에서 em을 적용할때 div태그 폰트 사이즈를 10이라고 하면
1em을 해도 최상의 16px을 1배한 것이 아닌 10px이 적용된다.
.subtitle {
font-size: 20px;
}
.subtitle-rem {
font-size: 2rem;
}
.article {
font-size: 10px;
}
.subtitle-em {
font-size: 2em;
}
.rectangle.width {
width: 100vw;
height: 100px;
background-color: yellow;
}
.rectangle.height {
height: 20vh;
width: 100px;
background-color: yellow;
}사용할때는 위 예시처럼 사용하며 vh,vw는 뷰 포트 쉽게 브라우저의 현재 보이는 창의 크기에 따라서 유동적으로 변경되된다는 점을 알고 있으면 된다.
2. 폰트 색상 사용법
색상 키워드는 대소문자를 구분하지 않는 식별자이며 특정한 색을 나타낸다.
이름을 표현하는 색을 표시하는 이름을 명시하기도 하지만 색상 코드를사용하기도 한다.
transparent 키워드는 완전히 투명한 색으로 색을 입힌 항목의 뒷편이 모두 보인다.
기술적으로 rgba(0,0,0,0)의 짧은 이름을 의미한다.
◼ RGB/RGBA 표기법
RGB 색상의 배합을 통해서 특정 색을 표기하는 방법이다. 여기서 A 가 추가되는 경우에는 투명도를 보여주는 것
rgb(), rgba() 로 표현할 수 있다.
◼ 16진수 표기법
RGB 색생 조합을 통해서 특정 색을 표시한다. RGB 표기법이 0부터 255까지의 색상 범위를 10진수 형태로 조합했다면
이는 16진수로 표시한다.
#ff0000이 대표적인 예시이며 알파를 추가하며 투명도 조절도 가능
3. text 스타일 속성
단락 또는 span 태그에 기록한 텍스트의 스타일을 설정하는 여러 스타일이 존재한다.
대표적인 몇가지를 한번 알아보자
◼ text-align
텍스트의 왼쪽,가운데,오른쪽 맞춤 지정 스타일
◼ text-transform
텍스트를 대문자화, 소문자화 하는 스타일 지정
◼ line-height
줄간의 간격을 지정하는 스타일
단위는 px,rem,em 등 단위 사용 가능
◼ letter-spacing
한개의 글자간의 간격을 지정
◼ word-spacing
단어간의 간격을 지정
◼ text-indent
문단에서 들여쓰기 깊이를 지정
◼ text-decoration
텍스트를 꾸미는 스타일 속성
대표적으로 a href에서 아래 언더바를 삭제하기 위해서 none을 쓰는 경우에 사용
◼ text-shadow
텍스트에서 그림자를 지정하는 스타일 속성
◼ list-style
텍스트는 아니지만 li의 앞에 오는 구분자를 수정하는 스타일 속성
👉 포스팅 전체 사용 샘플 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>font sytle2</title>
<style>
html {
font-size: 16px;
}
.content {
border: 1px solid black;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.article {
line-height: 2.2rem;
letter-spacing: 1px;
word-spacing: 10px;
text-indent: 80px;
}
.transform-case {
text-transform: uppercase;
}
.article > a {
text-decoration: overline;
}
.text-shadow {
text-shadow: 5px 5px 3px gray;
}
ul {
list-style: square;
}
</style>
</head>
<body>
<section>
<p class="content text-center">KIMDODO</p>
<p class="content text-right">KIMDODO</p>
<p class="content text-left">KIMDODO</p>
<p>KIMDODO</p>
</section>
<section>
<p class="article">
Spring JPA Persistence Context concept 위의 그림은 요즘 많이 쓰이고 있는
<span class="transform-case">Java</span>진영의 Spring Framework에서
제공하는 JPA중 Persistence Context에 대한 도식인데요 여기서 응용을
해보자면 자바의 <a href="#">JPA</a>에서 영속성은 무언가를 Entity 속성에
영구히 저장해준다라는 뜻으로 해석이 가능할 것 같습니다. 이 정도면 이해가
가시려나요? 한 줄로 결론 내리자면 “영구히 저장되는 그 어떤 것" 이라고
개념을 잡으시면 되겠습니다.
</p>
</section>
<section>
<h2 class="text-shadow">김도도 티스토리</h2>
</section>
<section>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>'FrontEnd' 카테고리의 다른 글
| [FE기초] CSS - Float & Position (0) | 2024.05.02 |
|---|---|
| [FE기초] CSS - Box Model & Display (0) | 2024.04.26 |
| [FE기초]CSS 다루기 (0) | 2024.04.25 |
| [FE기초] CSS 기초 (0) | 2024.04.25 |
| [FE기초] Head 태그 (0) | 2024.04.25 |
[FE기초]CSS폰트
이전 포스팅에서는 CSS를 다루는 법 그리고 선택자를 사용하는 방법 정도를 알아보았다.
이제부터 본격적인 css의 스타일을 적용하는 방법 등의 다양한 사용 방법을 알아보자
1. 폰트 스타일
글꼴에 관련된 속성을 먼저 알아보자
- font-family : 글꼴 종류를 지정 (defatul:웹 브라우저 기본 글꼴)
- font-size : 글자의 크기 지정
- font-style : 글자를 이텔릭체로 표시할지 지정
- font-weight : 글자 굵기를 지정
- font-variant : 소문자를 작은 대문자로 바꾸는 속성
웹 폰트
사용자의 컴퓨터에 설치된 폰트와 상관없이 온라인의 특정 서버에 위차한 폰트 파일을 다운로드하여 화면에 표시해 주는 웹 전용 폰트
대표적으로 구글 웹 폰트가 있다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
해당 사이트에 방문하여 link 또는 @import문을 사용해서 웹 폰트를 적용할 수 있다.
사이트에 방문하여 원하는 폰트를 선택후 get font를 통해서 획득 가능
폰트 크기 단위
여러가지의 단위가 존재하며 대표적인 단위를 한번 알아보자.
- px : 픽셀단위
- rem : 루트요소의 글꼴 크기
- em : 요소의 글꼴 크기
- vw : viewport 너비의 1%
- vh : viewport 높이의 1%
여기서 중요한 부분은 rem 과 em에 관한 부분이다.
rem은 최상위 폰트 사이즈에 기반하여 몇배를 하는지가 결정된다.
반대로 em은 최상위가 아닌 현재자신에 기준을 한다.
즉 만약 div 태그 내부에 위치한 태그에서 em을 적용할때 div태그 폰트 사이즈를 10이라고 하면
1em을 해도 최상의 16px을 1배한 것이 아닌 10px이 적용된다.
.subtitle {
font-size: 20px;
}
.subtitle-rem {
font-size: 2rem;
}
.article {
font-size: 10px;
}
.subtitle-em {
font-size: 2em;
}
.rectangle.width {
width: 100vw;
height: 100px;
background-color: yellow;
}
.rectangle.height {
height: 20vh;
width: 100px;
background-color: yellow;
}사용할때는 위 예시처럼 사용하며 vh,vw는 뷰 포트 쉽게 브라우저의 현재 보이는 창의 크기에 따라서 유동적으로 변경되된다는 점을 알고 있으면 된다.
2. 폰트 색상 사용법
색상 키워드는 대소문자를 구분하지 않는 식별자이며 특정한 색을 나타낸다.
이름을 표현하는 색을 표시하는 이름을 명시하기도 하지만 색상 코드를사용하기도 한다.
transparent 키워드는 완전히 투명한 색으로 색을 입힌 항목의 뒷편이 모두 보인다.
기술적으로 rgba(0,0,0,0)의 짧은 이름을 의미한다.
◼ RGB/RGBA 표기법
RGB 색상의 배합을 통해서 특정 색을 표기하는 방법이다. 여기서 A 가 추가되는 경우에는 투명도를 보여주는 것
rgb(), rgba() 로 표현할 수 있다.
◼ 16진수 표기법
RGB 색생 조합을 통해서 특정 색을 표시한다. RGB 표기법이 0부터 255까지의 색상 범위를 10진수 형태로 조합했다면
이는 16진수로 표시한다.
#ff0000이 대표적인 예시이며 알파를 추가하며 투명도 조절도 가능
3. text 스타일 속성
단락 또는 span 태그에 기록한 텍스트의 스타일을 설정하는 여러 스타일이 존재한다.
대표적인 몇가지를 한번 알아보자
◼ text-align
텍스트의 왼쪽,가운데,오른쪽 맞춤 지정 스타일
◼ text-transform
텍스트를 대문자화, 소문자화 하는 스타일 지정
◼ line-height
줄간의 간격을 지정하는 스타일
단위는 px,rem,em 등 단위 사용 가능
◼ letter-spacing
한개의 글자간의 간격을 지정
◼ word-spacing
단어간의 간격을 지정
◼ text-indent
문단에서 들여쓰기 깊이를 지정
◼ text-decoration
텍스트를 꾸미는 스타일 속성
대표적으로 a href에서 아래 언더바를 삭제하기 위해서 none을 쓰는 경우에 사용
◼ text-shadow
텍스트에서 그림자를 지정하는 스타일 속성
◼ list-style
텍스트는 아니지만 li의 앞에 오는 구분자를 수정하는 스타일 속성
👉 포스팅 전체 사용 샘플 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>font sytle2</title>
<style>
html {
font-size: 16px;
}
.content {
border: 1px solid black;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.article {
line-height: 2.2rem;
letter-spacing: 1px;
word-spacing: 10px;
text-indent: 80px;
}
.transform-case {
text-transform: uppercase;
}
.article > a {
text-decoration: overline;
}
.text-shadow {
text-shadow: 5px 5px 3px gray;
}
ul {
list-style: square;
}
</style>
</head>
<body>
<section>
<p class="content text-center">KIMDODO</p>
<p class="content text-right">KIMDODO</p>
<p class="content text-left">KIMDODO</p>
<p>KIMDODO</p>
</section>
<section>
<p class="article">
Spring JPA Persistence Context concept 위의 그림은 요즘 많이 쓰이고 있는
<span class="transform-case">Java</span>진영의 Spring Framework에서
제공하는 JPA중 Persistence Context에 대한 도식인데요 여기서 응용을
해보자면 자바의 <a href="#">JPA</a>에서 영속성은 무언가를 Entity 속성에
영구히 저장해준다라는 뜻으로 해석이 가능할 것 같습니다. 이 정도면 이해가
가시려나요? 한 줄로 결론 내리자면 “영구히 저장되는 그 어떤 것" 이라고
개념을 잡으시면 되겠습니다.
</p>
</section>
<section>
<h2 class="text-shadow">김도도 티스토리</h2>
</section>
<section>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>'FrontEnd' 카테고리의 다른 글
| [FE기초] CSS - Float & Position (0) | 2024.05.02 |
|---|---|
| [FE기초] CSS - Box Model & Display (0) | 2024.04.26 |
| [FE기초]CSS 다루기 (0) | 2024.04.25 |
| [FE기초] CSS 기초 (0) | 2024.04.25 |
| [FE기초] Head 태그 (0) | 2024.04.25 |
