CSS 굵은 텍스트 효과를 만들려면 font-weight 속성을 사용해야 합니다. font-weight 속성은 글꼴의 "굵기" 또는 해당 글꼴이 얼마나 굵게 표시되는지를 결정합니다. 키워드 또는 숫자 값을 사용하여 CSS에 텍스트가 얼마나 굵어야 하는지 지시할 수 있습니다.
개발자로서 웹 사이트를 레이아웃할 때 때때로 우리는 무언가에 주의를 끌기를 원합니다. 우리가 할 수 있는 방법에는 여러 가지가 있습니다. 가장 기본적인 방법은 글꼴 두께를 늘리는 것입니다. 강조 표시하려는 텍스트의 텍스트를 볼드체로 표시하는 것을 말합니다.
이 기사에서는 글꼴 두께, 설정 방법 및 속성에 대해 가능한 다양한 값에 대해 설명합니다.
CSS 굵게:가이드
font-weight 속성은 화면에 굵은 텍스트가 표시되는 정도를 설정합니다. 키워드 또는 숫자 값을 사용하여 CSS에 특정 텍스트 집합이 얼마나 굵게 표시되어야 하는지 지시할 수 있습니다.
CSS font-weight 속성의 구문은 다음과 같습니다.
font-weight: weightOfFont;
weightOfFont의 값은 스타일이 적용되는 요소에 사용하려는 글꼴의 두께입니다.
font-weight 속성은 특정 요소에 대해 설정하려는 글꼴 두께에 따라 몇 가지 다른 값을 허용합니다.
CSS 볼드 스케일
글꼴 패밀리를 굵기 척도에서 100-1000의 척도를 갖는 것으로 생각하십시오. 숫자가 높을수록 글꼴이 굵습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
선호하는 글꼴군에 대해 조사하십시오. 이렇게 하면 사이트에서 원하는 만큼 결과가 밝거나 굵게 표시됩니다. 일부 글꼴 계열은 전체 축척을 사용하지 않습니다.
다음 코드는 숫자와 키워드를 모두 사용하여 'Arial'이라는 인기 있는 글꼴이 얼마나 밝고 어두울 수 있는지 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
body {
font-family: 'Arial';
font-size: 3rem;
}
span {
font-size: 1.5rem;
}
p:nth-child(1) {
font-weight: normal;
}
p:nth-child(2) {
font-weight: bold;
}
p:nth-child(3) span {
font-weight: bolder;
}
p:nth-child(4) span {
font-weight: lighter;
}
p:nth-child(5) {
font-weight: 100;
}
p:nth-child(6) {
font-weight: 200;
}
p:nth-child(7) {
font-weight: 300;
}
p:nth-child(8) {
font-weight: 400;
}
p:nth-child(9) {
font-weight: 500;
}
p:nth-child(10) {
font-weight: 600;
}
p:nth-child(11) {
font-weight: 700;
}
p:nth-child(12) {
font-weight: 800;
}
p:nth-child(13) {
font-weight: 900;
}
</style>
</head>
<body>
<p>Hello World! <span>-- Normal</span></p>
<p>Hello World! <span>-- Bold</span></p>
<p>Hello World!
<span>-- Bolder
<br>
-- child is bolder than parent
</span></p>
<p>Hello World! <span>-- Lighter
<br>
-- child is lighter than parent
</span>
</p>
<p>Hello World! <span>-- 100</span></p>
<p>Hello World! <span>-- 200</span></p>
<p>Hello World! <span>-- 300</span></p>
<p>Hello World! <span>-- 400 'normal'</span></p>
<p>Hello World! <span>-- 500</span></p>
<p>Hello World! <span>-- 600</span></p>
<p>Hello World! <span>-- 700 'bold'</span></p>
<p>Hello World! <span>-- 800</span></p>
<p>Hello World! <span>-- 900</span></p>
</body>
</html> 더 가볍고 대담하게:실제로 무엇을 의미합니까?
여기서 짚고 넘어가야 할 것은 가벼움과 과감함이 직역이 아니라는 점이다. 여기서 굵게는 "굵게보다 굵게"를 의미하지 않습니다.
더 굵게, 더 가볍게 하는 것은 실제로 이 컨텍스트에서 상위 요소와 관련하여 얼마나 굵거나 가벼운지를 의미합니다. 따라서 하위 요소를 더 굵게 만들면 상위 요소보다 상대적으로 한 글꼴 두께가 더 어둡게 됩니다. 더 밝은 경우에도 마찬가지입니다.
상대적인 글꼴 두께는 다음과 같습니다.
| 상대 글꼴 두께 | 실제 글꼴 두께 |
| 얇음 | 100 |
| 정상 | 400 |
| 굵게 | 700 |
| 무겁다 | 900 |
따라서 font-weight:bold 속성을 사용하여 텍스트 단락의 font-weight를 800으로 설정할 수 있습니다. 자식이 부모보다 상대적으로 한 가중치 더 굵으면 위의 표를 사용하여 얼마나 굵게 만들지 계산합니다. 그것.
예를 들어, font-weight가 400인 부모가 있는 자식이 있다고 가정합니다. 자식의 font-weight 값을 더 굵게 설정하면 자식의 font-weight는 700이 됩니다.
이는 자식이 부모보다 상대적으로 글꼴 두께가 더 어둡기 때문입니다. 부모가 이미 최대한 어둡거나 밝으면 해당 속성 값은 아무 작업도 수행하지 않습니다.
CSS 글꼴 두께 예
지역 우표 협회인 시애틀 우표 클럽의 웹사이트를 디자인한다고 가정해 보겠습니다. 우표 사회는 우리에게 회사 소개를 만들 것을 요청했습니다. 정보 제목 웹사이트의 페이지는 굵게 표시됩니다. 이렇게 하면 방문자의 주의를 제목에 집중할 수 있습니다.
스탬프 클럽은 우리에게 클럽의 역사와 함께 웹사이트에 텍스트 블록을 추가하도록 요청했습니다. 이 텍스트 블록은 일반 글꼴 두께로 나타나야 합니다. 클럽에서 시청자의 관심을 끌고 싶은 특정 문구는 굵게 표시해야 합니다.
다음 코드를 사용하여 특정 문구를 굵게 표시된 이 텍스트 블록을 만들 수 있습니다.
<html>
<p>The Seattle Stamp Club, established in 2009, is a community that encourages and promotes the collection of stamps. The Club <span>welcomes all</span>, from beginners to experts, and hosts monthly meetings where members can show each other their stamps, discuss the latest news in stamps, and bond over their shared interests. Right now, the club has <span>250 members</span>.</p>
<style>
span {
font-weight: bolder;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
HTML 파일에서
태그로 묶인 텍스트 단락을 정의했습니다. 또한 태그 안에 특정 문구를 포함시켰으며 이는 CSS 코드에서 굵게 표시할 예정입니다.
다음으로, CSS 파일에서 모든 태그의 글꼴 스타일 가중치를 굵게 설정하는 스타일 규칙을 정의했습니다. . 즉, 태그 안에 포함된 텍스트는 상위 요소보다 굵게 표시됩니다.
코드를 실행할 때 단락은 일반 글꼴 두께로 표시되고 태그 안에 포함된 구문은 굵게 표시됩니다. 이 예에서 welcome all이라는 문구는 및 250명의 회원 태그로 묶입니다.
가변 글꼴이 있는 굵은 텍스트 CSS
최신 CSS 글꼴 레벨을 통해 사용할 수 있는 새로운 글꼴이 있습니다. 가변 글꼴이라고 하며 임의를 사용할 수 있습니다. 글꼴 두께로 1에서 1000 사이의 숫자입니다. 브라우저 지원은 2020년 5월까지 완전히 구현되지 않았으므로 상당히 새롭습니다. 가변 글꼴에 대한 자세한 정보를 원하시면 이 소개를 확인하세요.
결론
이 튜토리얼에서는 CSS font-weight 속성과 이것이 글꼴의 굵기에 미치는 영향에 대해 논의했습니다.
더 굵고 가벼우면 부모 요소의 글꼴 무게에서 상대적으로 하나의 글꼴 무게가 멀어짐을 의미한다는 것을 배웠습니다. 실제로, 우리는 텍스트가 어떻게 생겼는지 보기 위해 다양한 글꼴 두께를 보았습니다. 곧 글꼴 두께를 사용하여 글꼴 스타일을 지정하는 전문가가 될 것입니다!
CSS 코딩에 대해 자세히 알아보려면 CSS 학습 방법에 대한 가이드를 읽어보세요. CSS에 의존하지 않고 텍스트를 굵게 만들고 싶다면 HTML에서 굵게 텍스트를 만드는 방법에 대한 가이드를 읽을 수 있습니다.