자바스크립트 글꼴 크기
__del__ |
absolute |
circle |
exp |
find |
JavaScript |
mean |
resize |
sep |
sin |
system
Michael Zippo
CSS font-size 속성은 페이지나 웹사이트에 있는 모든 텍스트 요소의 글꼴 크기를 설정합니다. 글꼴 크기 속성은 텍스트 콘텐츠를 포함하는 모든 클래스, ID 또는 요소에 적용할 수 있습니다. 이 속성은 px, em, rem, vw, vh 값과 키워드 사용을 허용합니다.
대부분의 개발자는 웹페이지 스타일을 지정하기 위해 다양한 글꼴 크기 조합을 사용합니다. 예를 들어, 웹 개발자는 제목에 큰 글꼴을 사용하고 본문 및 기타 항목에 더 작은 글꼴을 사용할 수 있습니다. 많은 사람들이 궁금해합니다. CSS 또는 HTML에서 글꼴 크기를 변경하는 방법
CSS 글꼴 크기 ?
는 개발자가 허용합니다. 웹 페이지의 단락 또는 텍스트 줄의 글꼴 크기를 설정합니다.
이 자습서에서는 예제를 참조하여
글꼴 크기 속성을 사용하는 방법에 대해 설명합니다. 이 가이드를 따르면 텍스트 크기 변경 전문가가 될 것입니다.
CSS 텍스트 크기
적절한 글꼴 스타일은 웹 디자인의 중요한 부분입니다. 스타일이 지정되지 않은 텍스트는 방문자에게 읽기 어려움을 야기하여 사이트에서 거의 확실히 불쾌한 경험을 하게 됩니다.
font-weight , font-family, 장식 텍스트 및 색상 . 또 다른 중요한 속성은 텍스트 블록의 글꼴 크기를 제어하는 글꼴 크기입니다.
글꼴
CSS의 크기 구문은 다음과 같습니다.
sizeValue
는 텍스트 블록에 사용할 글꼴의 크기입니다. 블록에서 사용하는 글꼴의 크기를 지정하는 방법에는 여러 가지가 있습니다. text 이 기사에서 논의할 방법은 다음과 같습니다.
웹페이지에서 글꼴 크기에 대한 각 접근 방식을 사용하는 방법의 예를 살펴보겠습니다.
픽셀을 사용하여 글꼴 크기 조정 다음 중 하나 그만큼 문자 크기를 설정하는 가장 일반적인 방법은 픽셀을 사용하는 것입니다.
픽셀은 정확한 측정 단위를 제공하기 때문에 좋은 측정 단위입니다. 픽셀 단위는 운영 체제 또는 웹 브라우저의 영향을 크게 받습니다. 한 화면의 픽셀은 다른 화면의 픽셀입니다. 지정된 픽셀 값은 다른 브라우저에서 거의 동일하게 나타납니다.
그러나 픽셀을 사용하여 텍스트 블록의 글꼴 크기를 설정하는 것은 한계가 있습니다. 접근성. 일부 브라우저에서는 사용자가 글꼴 크기를 사용자 정의할 수 없기 때문에 도움말에서 설정한 픽셀 글꼴 크기에 액세스할 수 없습니다. 예를 들어 시각 장애가 있는 사용자는 픽셀을 사용하여 문자 크기를 설정하는 사이트를 사용하기 어려울 수 있습니다.
만들면 모든
의 모든
및 12px
요소의 글꼴 크기가 28px
인 웹사이트 다음 코드를 사용하여 이를 수행할 수 있습니다.
우리 코드에서는 sets CSS 선택기를 사용하여 모든 글꼴 크기를
28px
및 모든
12px
. 다음 스니펫은 이러한 요소가 새로운 글꼴 크기에서 어떻게 보이는지 보여줍니다.
>
클릭 24" <너비 "높이 = 24 "클래스 = wp-image-13930 "스타일 = 너비: 24픽셀; " src =" https://744025.smushcdn.com /1245953/wp-content/uploads/2020/03/iconfinder_play-circle-outline_326584.png?lossy=1&strip=1&webp=1 "alt =" 실행 이미지 코드" 버튼, 원 안의 삼각형 "srcset = "https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/iconfinder_play-circle-outline_326584-20x20.png?lossy=1&strip = 1 & webp = 1 20w, 24w https: // 744025 .smushcdn.com / 1245953 / wp-content / 업로드 / 2020/03 / iconfinder_play-circle-outline_326584.png? lossy = 1 & strip = 1 & webp = 1 "size =" (max - width: 24px) 100vw, 24px "> noscript> 코드를 실행하기 위한 상단 창의 오른쪽 상단 모서리
CSS에서 글꼴 크기를 설정하는 또 다른 일반적인 방법은 em 치수를 사용하는 것입니다. 측정 단위 em은 부모 글꼴 크기를 나타냅니다. définiss인 경우 글꼴 크기를 2em 입력
, 글꼴 크기는 상위 요소의 두 배입니다.
ems로 CSS 글꼴 크기 조정의 예 예를 들어 텍스트 단락이 저장되어 있다고 가정해 보겠습니다. 상자에 있습니다. 상자의 글꼴 크기는 20px
입니다. 텍스트 단락 글꼴 크기를 1em
으로 지정한 경우 단락 글꼴 크기는 20px
. 부모 요소의 글꼴 크기와 같습니다.
부모 요소의 글꼴 크기를 설정하지 않은 경우 브라우저는 해당 브라우저에 지정된 기본값을 사용합니다. 보통 16px
이므로 글꼴 크기를 지정하지 않으면 1em
def ault 16px
2em
기본 32px
.
웹 페이지의 글꼴 크기가 16px
. 모든 텍스트 단락이 이 글꼴 크기를 사용하여 표시되기를 원합니다. 즉, 1em
값을 사용해야 합니다. 또한 모든 헤드가 1.5em
과 동일한 24px
글꼴 크기로 표시되기를 원합니다.
다음을 사용할 수 있습니다. 이를 수행하는 코드:
우리 코드에서 모든 단락의 크기는 16px
(1em
= 16px
/ 기본값) 및 모든
요소는 24px
(1.5em
= 24px
)입니다.
웹 페이지에서 텍스트가 다음과 같이 표시됩니다.
Nell "위의 예에서 우리의 < h1>
및
가 글꼴 크기가 다르면
의 크기가 변경됩니다. 이는 em 값이 부모로부터 글꼴 크기를 상속받기 때문입니다.
Root를 사용하여 글꼴 크기 정의 em 법원 루트 em, rem
은 글꼴 크기를 설정하는 데 사용할 수 있는 CSS3에 도입된 새로운 측정 단위입니다. 값은 rem
은 상위 요소가 아니라 루트 요소
에 연결됩니다.
값은 다음을 수행할 수 있기 때문에 유용합니다. 전체 문서에 상대적인 값을 지정합니다. 이런 식으로 부모 요소에 다른 값이 있는 경우 텍스트 크기는 영향을 받지 않습니다. em
기본 글꼴 크기가 16px
인 웹페이지가 있다고 가정합니다. 이전 예에서와 같이 우리는 모두
가 24px
에 표시되고 모든 단락이 16px
에 표시되기를 원합니다. 다음 코드를 사용하여 이러한 글꼴 크기를 정의할 수 있습니다.
코드는 이전 예제와 거의 동일합니다. 유일한 차이점은 사용 측정 단위가 em
대신 rem
이라는 것입니다. 이 예에서 글꼴 크기는 항상 제목 및 최상위 단락에 대해 각각 24px
및 16px
입니다. 기본 웹 페이지 글꼴 크기가 16px
이기 때문입니다.
단어를 사용하여 글꼴 크기 설정 - 키 키에는 두 가지 유형이 있습니다. CSS에서 글꼴의 크기를 정의하는 데 사용할 수 있는 단어입니다.
절대 키워드는 웹페이지의 변경 사항에 관계없이 동일하게 유지되는 글꼴 크기를 정의하는 데 사용됩니다. 절대 글꼴 크기를 정의하는 데 사용할 수 있는 키워드는 다음과 같습니다.
xx-small
(9px) X- small
(10px)작은
(13px)중간
(16px) < 코드>대형(18px) x-large
(24px)xx-large
(32px) 괄호 안의 값은 기본 글꼴 크기가 16px
인 브라우저를 기반으로 합니다.
상대 키워드 반면 , 웹 페이지의 다른 곳에서 글꼴 크기에 따라 변경되는 글꼴 크기를 정의합니다. 사용할 수 있는 상대 키워드는 가장 작은 것과 가장 큰 것입니다. 이 키워드는 페이지의 다른 글꼴 크기가 변경될 때 글꼴 크기를 변경할 수 있기 때문에 유용합니다.
페이지의 모든
크기를 >24px
(x-large) 및 모든 ;
at 18px
(large). 이 코드를 사용하여 수행할 수 있습니다.
클릭 em> <너비 = 24" "높이 = 24 "클래스 = wp-image-13930 "스타일 = 너비: 24px; "src =" https://744025.smushcdn.com / 1245953 / wp-content / uploads / 2020/03 / iconfinder_play-circle-outline_326584.png? lossy = 1 & band = 1 & webp = 1 "alt =" key " execution code ", 원 안의 삼각형 "srcset =" https://744025.smushcdn.com/1245953/wp-content/ uploads / 2020/03/iconfinder_play-circle-outline_326584-20x20.png?lossy= 1 & 스트립 = 1 & webp = 1 20w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/0 -원 외곽선_326584.png? 손실 = 1 & 스트립 = 1 & webp = 1 24w "크기 =". (max -width: 24px) 100vw, 24px "> 버튼 noscript> HTML / CSS의 출력을 보려면 위의 편집기 코드에서 em>
및
는 각각 24px
및 18px
입니다. 그러나 우리는 이들을 지정하지 않았습니다. 크기는 픽셀을 사용합니다. 대신 - 브라우저에서 기본적으로 제공하는 글꼴 크기에 대한 키라는 단어를 사용했습니다.
표시 단위를 사용하여 글꼴 크기 설정 표시 단위는 다음과 같이 계산됩니다. 브라우저 창 크기의 백분율 CSS에서 지원하는 두 가지 표시 단위는 표시 높이(vh
)와 표시 너비(vw
)입니다.
표시 단위는 브라우저 창 크기의 백분율입니다. 예를 들어 1VH
는 창 높이의 1%입니다. 따라서 1000px 창이 큰 경우 1VH
는 10px입니다.
브라우저 창의 크기를 조정하면 글꼴 크기가 변경되므로 창 단위를 사용하면 유용합니다. 다양한 크기의 브라우저와 기기에 적용할 수 있는 보다 접근 가능한 사용자 환경을 제공합니다.
헤더가 창 너비의 4%인 사이트를 만들고 싶다고 가정해 보겠습니다. 그리고 그 포인트는 가시 영역 너비의 1%입니다. 다음 코드를 사용하여 수행할 수 있습니다.
24 noscript> 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인합니다.
브라우저 크기를 조정하면 이러한 헤더의 크기가 변경됩니다.
결론 글꼴 크기 속성은 CSS(따라서 HTML)에서 글꼴 크기를 수정하는 데 사용됩니다. 픽셀, em, rems, 키워드 및 표시 단위를 포함하여 글꼴의 크기를 볼 수 있는 여러 측정 단위를 허용합니다. CSS 및 ID 뿐만 아니라 요소 자체에도 적용할 수 있습니다.
이 튜토리얼에서는 CSS 글꼴 크기의 기본입니다. 이제 전문가처럼 글꼴 크기 속성을 사용할 준비가 되었습니다.
Shop
Learn programming in R: courses
$
Best Python online courses for 2022
$
Best laptop for Fortnite
$
Best laptop for Excel
$
Best laptop for Solidworks
$
Best laptop for Roblox
$
Best computer for crypto mining
$
Best laptop for Sims 4
$
Latest questions
NUMPY NUMPY
psycopg2: insert multiple rows with one query
12 answers
NUMPY NUMPY
How to convert Nonetype to int or string?
12 answers
NUMPY NUMPY
How to specify multiple return types using type-hints
12 answers
NUMPY NUMPY
Javascript Error: IPython is not defined in JupyterLab
12 answers
Wiki
Python OpenCV | cv2.putText () method
numpy.arctan2 () in Python
Python | os.path.realpath () method
Python OpenCV | cv2.circle () method
Python OpenCV cv2.cvtColor () method
Python - Move item to the end of the list
time.perf_counter () function in Python
Check if one list is a subset of another in Python
Python os.path.join () method