개발자입니다
Inflearn Egoing) 섹션 3. 서체 다루기 - font-size, color, text-align, font, web font 본문
Inflearn Egoing) 섹션 3. 서체 다루기 - font-size, color, text-align, font, web font
끈기JK 2022. 9. 13. 11:56■ font-size
: 가장 많이 사용되는 속성인 font-size
단위: px, em:, rem
사용자가 글꼴 크기를 키웠을때 px은 바뀌지 않음, rem은 바뀜
em는 상위 요소 크기의 몇 배인지, rem은 최상위 요소(html) 크기의 몇 배인지
html 요소 크기의 기본값은 웹브라우저 설정에서 정한 글자 크기입니다. 보통 16px입니다.
-font-size: px or rem 에 따른 차이
웹브라우저 줌인, 줌아웃시 px, rem 둘다 바뀜
웹브라우저 세팅값 변경시 px 바뀌지 않고, rem 바뀜
<head>
<style>
#px{font-size: 16px;}
#rem{font-size: 1rem;}
</style>
</head>
<body>
<div id="px">PX</div>
<div id="rem">REM</div>
</body>
웹브라우저에서 폰트 크기 변경하는 방법
웹브라우저 - 개발자 도구 - Elements - Computed에서 모든 속성 및 변경된 속성 확인
■ color
컬러 지정 3가지 방법: color name, hex, rgb
-red를 표현하는 서로 다른 3가지 방법
<head>
<style>
h1{color: red;}
h1{color: rgb(255, 0, 0);}
h1{color: #FF0000;}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
-CSS 컬러 참고 사이트: https://www.w3schools.com/css/css_colors.asp
■ text-align
-text-align: left center right justify 등 텍스트 위치 조정
-text-align: justify 적용 전 후. 양 끝으로 텍스트 고르게 배열
<style>
p{
text-align: justify;
border: 1px solid gray;
}
</style>
</head>
<body>
<ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sodales orci. Donec dapibus blandit ligula, nec commodo nunc tristique id.
</p>
-의미없는 텍스트 만드는 사이트(ipsum generator 검색): https://www.lipsum.com/feed/html
■ font
-font-family 글꼴 지정
아래 코드는 폰트 arial 지정하고 없으면 verdana, 없으면 Helvetica Neue로 지정
<head>
<style>
p{
font-size: 5rem;
font-family: arial, verdana, "Helvetica Neue", monospace; /* 폰트 지정 */
}
</style>
</head>
<body>
<p>
Hello world
</p>
</body>
글꼴 장식: serif는 글꼴 장식 있는 폰트, sans-serif는 글꼴 장식 없는 폰트
글꼴 고정 폭: monospace
font-family: serif; /* 또는 sans-serif 나 monospace 지정 */
-font-weight
폰트 굵게 지정
font-weight: bold;
-line-height
text 위아래 줄간격 지정
px로도 지정 가능하나 줄간격이 px 단위로 고정이라 폰트 크기 세팅 변경시 부자연스러울 수 있음
line-height: 2;
-font
폰트 여러 속성 한번에 지정. 순서 지켜야 함: font: font-style font-variant font-weight font-size/line-height font-family
아래 #type1,2는 같은 의미
#type1{
font-size: 5rem;
font-family: arial, verdana, "Helvetica Neue", serif;
font-weight: bold;
line-height: 2;
}
#type2{
font: bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
}
■ web font
웹폰트 사이트: https://fonts.google.com/
원하는 폰트 클릭
우측 + 버튼 눌러 추가
<link> 부분 코드 복사해서 <head> 태그 내 삽입 후
CSS font-family에 폰트 지정 코드 삽입
코드
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@100&display=swap" rel="stylesheet">
<style>
#font1{font-family: 'Roboto', sans-serif;}
#font2{font-family: 'Open Sans', sans-serif;}
</style>
</head>
<body>
<p id="font1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p id="font2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
-웹폰트 만들기
: 구글 폰트에 원하는 폰트 없을 경우 내가 가지고 있는 폰트 업로드해서 웹폰트로 만들 수 있다.
font face generator 검색 후 웹페이지 들어감. 원하는 폰트 파일 업로드. 이후 Download package 받음
