// 폰트, font
~ em: 폰트의 전체 높이
~ ex:해당 폰트의 영문 소문자 x의 높이
~ Baseline: 소문자 x를 기준으로 하단의 라인
~ Descender: 소문자에서 baseline 아래로 쳐지는 영역
~ Ascende:r 소문자 x의 상단 라인 위로 넘어가는 영역
// font-family 속성
- 글꼴을 지정하는 속성
- family-name
- 사용할 폰트의 이름
- ','로 구분하여 여러 개 선언 가능 > 먼저 선언된 순서대로 우선순위가 결정됨 - generic-family
- family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을 경우 대체할 수 있게 함.
- 가장 마지막에 선언해야 한다.
- 폰트 예약어
1. serif: 획끝에 장식이 있는 폰트(궁서체, 바탕체)
2. sans-serif: 획끝에 장식이 없는 폰트(돋움체, 굴림체)
3. monospace: 문자폭이 균일한 폰트(궁서체)
4. cursive: 장식체
5. fantasy: 장식체
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.parent {
font-family: 강원교육새음 Medium, sans-serif;
}
</style>
</head>
<body>
<br>
<div class="parent">
맨 시티와 뉴캐슬의 경기
<div class="child">
전반전이 끝나기 3분 전. 1:0
</div>
</div>
</body>
</html>// line-height 속성
- 텍스트 라인의 높이(줄간격) > 행간 조정 가능
- 기본 값 : normal
- em 박스 + 상하단의 여백 > line-box
~ normal : 브라우저의 기본 속성(보통 1,2)
~ number : font-size를 기준으로 설정한 숫자만큼 배율로 적용
- 부모 요소의 숫자 값이 그대로 상속
~ length : px, em 등 고정 수치로 적용
~ % : font-size를 기준으로 설정한 퍼센트만큼 배율로 적용
- %에 의해 이미 계산된 px값이 상속
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.parent {
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1; } /*line-height = 40px*/
.child { /*line-height = 30px*/
}
</style>
</head>
<body>
<br>
<div class="parent">
맨 시티와 뉴캐슬의 경기
<div class="child">
전반전이 끝나기 3분 전. 1:0
</div>
</div>
</body>
</html>// font-size 속성
- 글꼴의 크기를 지정하는 속성
- 기본 값 : medium
~ keyword: medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger
~ length : px, em 등 고정 수치로 지정
~ % : 부모 요소의 font-size 기준의 퍼센트로 지정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.parent {
font-family: 강원교육새음 Medium, sans-serif;
font-size: 40px;
line-height: 1; } /*line-height = 40px*/
.child {
/*line-height = 30px*/
font-size: 2em; /*font-size = 80px*/
}
</style>
</head>
<body>
<br>
<div class="parent">
맨 시티와 뉴캐슬의 경기
<div class="child">
전반전이 끝나기 3분 전. 1:0
</div>
</div>
</body>
</html>// font-weight 속성
- 글꼴의 굵기를 지정하는 속성
- 기본 값 : normal
~ normal : 400
~ bold : 굵게(700)
~ bolder : 부모 요소보다 두껍게
~ lighter : 부모 요소보다 얇게
~ number : 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게)
* 모든 폰트가 다 굵기 조절이 가능한 것은 아니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.parent {
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1; /*line-height = 40px*/
font-size: 40px;
font-weight: bold;
}
.child {
/*line-height = 30px*/
font-size: 2em; /*font-size = 80px*/
font-weight: 100;
}
</style>
</head>
<body>
<br>
<div class="parent">
맨 시티와 뉴캐슬의 경기
<div class="child">
하프타임입니다.
</div>
</div>
</body>
</html>// font-style속성
- 글꼴의 스타일을 지정하는 속성
- 기본 값 : normal
~ bolder : font-family 내에 분류된 기본 값
~ italic : italic 스타일로 표현
~ oblique<각도> : oblique 스타일로 표현 (기울기 각도 지정 가능)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.parent {
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1; /*line-height = 40px*/
font-size: 40px;
font-weight: bold;
font-style: oblique;
}
.child {
/*line-height = 30px*/
font-size: 2em; /*font-size = 80px*/
font-weight: 100;
font-style: normal;
}
</style>
</head>
<body>
<br>
<div class="parent">
맨 시티와 뉴캐슬의 경기
<div class="child">
하프타임입니다.
</div>
</div>
</body>
</html>// font-variant 속성
- 글꼴의 형태를 변형하는 속성
- 소문자를 작은 대문자로 변환 가능
- 기본 값 : normal
~ normal: 기본 값
~ small-caps: 소문자를 작은 대문자로 변환
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.parent {
font-family: 강원교육새음 Medium, sans-serif;
line-height: 2; /*line-height = 40px*/
font-size: 40px;
font-weight: bold;
font-style: oblique;
}
.child {
/*line-height = 30px*/
font-size: 0.8em; /*font-size = 80px*/
font-weight: 100;
font-style: normal;
font-variant: small-caps;
}
</style>
</head>
<body>
<br>
<div class="parent">
맨 시티와 뉴캐슬의 경기
<div class="child">
후반전이 시작되었습니다.
<br>
Man city vs New Castle
</div>
</div>
</body>
</html>// webfont 속성
- 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트
~ @font-face : 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성
- 기본 값 : 없음
~ font-family(필수) : 글꼴 이름 지정
~ src(필수) : 다운로드 받을 글꼴의 경로(URL)
~ font-style : 글꼴의 스타일 지정
~ font-weight : 글꼴의 굵기 지정
@font-face {
font-family: 'TmoneyRoundWindRegular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindRegular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'TmoneyRoundWindExtraBold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.txt{
color: #444;
text-align: left
font-size: 16px;
line-height: 150%;
font-style: normal;
font-weight: normal; /*400*/
word-spacing: 1pt;
letter-spacing:-1;
text-decoration: none;
font-family: TmoneyRoundWindExtraBold;
}
</style>
</head>
<body>
<h1>텍스트</h1>
<p>미국 연방수사국(FBI)이 13일(현지시간) 미국 정부의 기밀 문건이 처음 유출된 온라인 채팅 서비스 대화방 운영자를 체포했다. 메릭 갈런드 법무부 장관은 이날 오후 긴급 브리핑을 열고 "국방 기밀 정보를 허가 없이 반출·소지·전파한 혐의로 잭 테세이라를 체포했다"고 밝혔다. 21세의 테세이라는 매사추세츠주 방위군의 공군 소속이라고 설명했다. 이날 테세이라는 매사추세츠주 노스다이튼의 자택에서 체포됐다. 게이머들이 주로 이용하는 소셜플랫폼 디스코드의 비공개 대화방 'Thug Shaker Central'의 운영자인 테세이라는 작년부터 군 기밀문서를 빼내 와 이곳에 올린 것으로 알려졌다. 미성년자를 포함한 25명 정도의 회원들에게 "세계정세를 아는 게 중요하다"며 기밀문서 읽는 법부터 내용까지 대화방에서 설명을 해왔다. 전날 워싱턴포스트(WP)는 대화방 회원 인터뷰를 통해 테세이라가 총기 애호가며 평소 사격하는 영상도 즐겨 올렸다고 보도했다. 이 때문에 이날 체포 현장에는 소총 등으로 완전 무장한 미 연방수사국(FBI) 요원 6명이 출동했으며 장갑차까지 동원됐다. 반바지 차림으로 집 밖으로 나온 테세이라는 별다른 저항 없이 양손을 머리 뒤로 올린 채 뒷걸음질로 천천히 체포에 응했다.</p>
<p class="txt">미국 연방수사국(FBI)이 13일(현지시간) 미국 정부의 기밀 문건이 처음 유출된 온라인 채팅 서비스 대화방 운영자를 체포했다. 메릭 갈런드 법무부 장관은 이날 오후 긴급 브리핑을 열고 "국방 기밀 정보를 허가 없이 반출·소지·전파한 혐의로 잭 테세이라를 체포했다"고 밝혔다. 21세의 테세이라는 매사추세츠주 방위군의 공군 소속이라고 설명했다. 이날 테세이라는 매사추세츠주 노스다이튼의 자택에서 체포됐다. 게이머들이 주로 이용하는 소셜플랫폼 디스코드의 비공개 대화방 'Thug Shaker Central'의 운영자인 테세이라는 작년부터 군 기밀문서를 빼내 와 이곳에 올린 것으로 알려졌다. 미성년자를 포함한 25명 정도의 회원들에게 "세계정세를 아는 게 중요하다"며 기밀문서 읽는 법부터 내용까지 대화방에서 설명을 해왔다. 전날 워싱턴포스트(WP)는 대화방 회원 인터뷰를 통해 테세이라가 총기 애호가며 평소 사격하는 영상도 즐겨 올렸다고 보도했다. 이 때문에 이날 체포 현장에는 소총 등으로 완전 무장한 미 연방수사국(FBI) 요원 6명이 출동했으며 장갑차까지 동원됐다. 반바지 차림으로 집 밖으로 나온 테세이라는 별다른 저항 없이 양손을 머리 뒤로 올린 채 뒷걸음질로 천천히 체포에 응했다.</p>
<p>미국 연방수사국(FBI)이 13일(현지시간) 미국 정부의 기밀 문건이 처음 유출된 온라인 채팅 서비스 대화방 운영자를 체포했다. 메릭 갈런드 법무부 장관은 이날 오후 긴급 브리핑을 열고 "국방 기밀 정보를 허가 없이 반출·소지·전파한 혐의로 잭 테세이라를 체포했다"고 밝혔다. 21세의 테세이라는 매사추세츠주 방위군의 공군 소속이라고 설명했다. 이날 테세이라는 매사추세츠주 노스다이튼의 자택에서 체포됐다. 게이머들이 주로 이용하는 소셜플랫폼 디스코드의 비공개 대화방 'Thug Shaker Central'의 운영자인 테세이라는 작년부터 군 기밀문서를 빼내 와 이곳에 올린 것으로 알려졌다. 미성년자를 포함한 25명 정도의 회원들에게 "세계정세를 아는 게 중요하다"며 기밀문서 읽는 법부터 내용까지 대화방에서 설명을 해왔다. 전날 워싱턴포스트(WP)는 대화방 회원 인터뷰를 통해 테세이라가 총기 애호가며 평소 사격하는 영상도 즐겨 올렸다고 보도했다. 이 때문에 이날 체포 현장에는 소총 등으로 완전 무장한 미 연방수사국(FBI) 요원 6명이 출동했으며 장갑차까지 동원됐다. 반바지 차림으로 집 밖으로 나온 테세이라는 별다른 저항 없이 양손을 머리 뒤로 올린 채 뒷걸음질로 천천히 체포에 응했다.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia esse illo blanditiis nam cum, quis odit impedit necessitatibus voluptatum unde dolorum tempora aut ex dolorem veniam consectetur. Praesentium cupiditate possimus eius facere consequatur repudiandae voluptatibus itaque incidunt in dolore sit ea voluptates veniam natus totam exercitationem, provident odio dolores rem. Ad, voluptates ipsam est earum quas aliquid hic tenetur esse expedita tempora harum accusantium adipisci, nostrum eligendi doloremque saepe laudantium sed recusandae dolorum omnis, fuga voluptatum? Omnis, perferendis velit quo eius voluptatibus debitis. Repellat fugiat ab iusto asperiores repudiandae, maxime nam magni hic cum iste, voluptatem quasi eos suscipit quibusdam.</p>
<p>Dolor soluta illo consectetur rerum qui explicabo laborum vero alias cupiditate officia, veniam asperiores nobis consequatur exercitationem saepe tempora distinctio! Quisquam, quidem magni. Minima harum non cupiditate earum eligendi atque, fugiat ullam voluptates sint eaque, similique maiores autem! Excepturi suscipit qui autem quis totam. Rerum, et? Nesciunt natus id tenetur ad soluta ab molestias quidem tempore enim libero corporis ipsum commodi, maxime labore nulla perspiciatis quas a ea aspernatur porro? Perferendis aliquid doloremque temporibus quis. Incidunt delectus odio eveniet perspiciatis fugiat deleniti dolor, quisquam quas soluta rem in maiores libero dolore optio explicabo dolorum, error eaque accusantium veritatis. Repellendus, quam.</p>
<p>Velit reprehenderit non cupiditate temporibus itaque recusandae, incidunt quis! Aut doloremque culpa aliquid laudantium, inventore animi ab excepturi in, dicta atque saepe beatae, dolore sequi placeat vero enim. Cumque eius quibusdam adipisci consequuntur in, tenetur repellendus libero explicabo, dicta amet corporis sit illum blanditiis, culpa voluptates eaque. Ipsa doloribus dolorum itaque voluptates officia, deleniti culpa accusamus maxime modi enim blanditiis molestiae recusandae quidem sequi veritatis quam eius ea rem ab quod temporibus? Et placeat ab perspiciatis. Asperiores culpa qui obcaecati, quos fugiat et perferendis quam? Quis illum, architecto magnam numquam blanditiis maiores? Maxime maiores eum adipisci. Eum, exercitationem. Esse, nemo.</p>
<br>
<hr>
<h2>css > c(Cascading)</h2>
<!-- 모든 속성이 상속되진 않는다. 일부 속성이 상속된다. 텍스트 관련만! -->
<div>
할아버지
<div style="font-size: 2em;">
아버지
<div style="font-size: 2em;">나</div>
아버지
</div>
할아버지
</div>
<br>
<hr>
<br>
<div>
할아버지
<div style="font-size: 2rem;">
아버지
<div style="font-size: 2rem;">나</div>
아버지
</div>
할아버지
</div>
</body>
</html>'클라이언트 > CSS' 카테고리의 다른 글
| CSS 속성 - Display / Visibility (0) | 2023.04.20 |
|---|---|
| CSS 속성 - 텍스트 (0) | 2023.04.19 |
| CSS 속성 - 박스모델 (0) | 2023.03.05 |
| CSS 속성 - 배경 (0) | 2023.03.05 |
| CSS 속성 - 색상 (0) | 2023.03.05 |
