세상과 연결

백분율과 em의 조합 사용 모든 브라우저에서 작동하는 솔루션은 요소의 기본 글꼴 크기를 백분율로 설정하는 것입니다. body { font-size: 100%; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } p { font-size: 0.875em; } This is heading 1 This is heading 2 This is a paragraph. Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!

css Em로 글꼴 크기 설정 Set Font Size With Em 사용자가 브라우저 메뉴에서 텍스트 크기를 조정할 수 있도록 많은 개발자가 픽셀 대신에 엠을 사용합니다. em 크기 단위는 W3C에서 권장합니다. 1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16 픽셀입니다. 따라서 1em의 기본 크기는 16px입니다. 크기는 다음 수식을 사용하여 픽셀에서 em까지 계산할 수 있습니다. pixels / 16 = em h1 { font-size: 2.5em; /* 40px/16=2.5em */} h2 { font-size: 1.875em; /* 30px/16=1.875em */} p { font-size: 0.875em; /* 14px/16=0.875em */} This is hea..

css Font Size 글자 크기font-size속성은 텍스트의 크기를 설정합니다. 텍스트 크기를 관리 할 수 ​​있다는 것은 웹 디자인에서 중요합니다. 그러나 단락을 표제처럼 보이게하거나 머리글을 단락처럼 보이게하려면 글꼴 크기 조정을 사용하면 안됩니다. 제목에는 - , 단락에는 과 같은 적절한 HTML 태그를 사용하십시오. font-size 값은 절대 크기 또는 상대 크기 일 수 있습니다. 절대 크기 : 텍스트를 지정된 크기로 설정합니다.사용자가 모든 브라우저에서 텍스트 크기를 변경할 수 없도록합니다 (접근성상의 이유로 불량)절대 크기는 출력의 물리적 크기가 알려진 경우 유용합니다.상대 크기 : 주변 요소를 기준으로 크기를 설정합니다.사용자가 브라우저에서 텍스트 크기를 변경할 수 있습니다.참고 : ..

Font Style 글꼴 스타일이 font-style속성은 주로 기울임 꼴 텍스트를 지정하는 데 주로 사용됩니다. 이 속성에는 세 가지 값이 있습니다. normal - 텍스트가 정상적으로 표시됩니다.기울임 꼴 - 텍스트가 기울임 꼴로 표시됩니다.oblique - 텍스트가 기울어 져 있습니다 (비스듬한 기울임 꼴과 유사하지만 덜 지원됩니다).예p.normal { font-style: normal;} p.italic { font-style: italic;} p.oblique { font-style: oblique;} This is a paragraph in normal style.This is a paragraph in italic style.This is a paragraph in oblique style.

Font Family 글꼴 모음 텍스트의 글꼴 모음은 font-family속성 으로 설정됩니다 . 이 font-family속성은 "대체 시스템"으로 여러 글꼴 이름을 포함해야합니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도합니다. 다른 글꼴을 사용할 수없는 경우 브라우저에서 일반 글꼴로 비슷한 글꼴을 선택하도록 원하는 글꼴로 시작하고 일반 글꼴로 끝냅니다. 참고 : 글꼴 패밀리의 이름이 두 단어 이상인 경우 "Times New Roman"과 같이 따옴표로 묶어야합니다. 하나 이상의 글꼴 군이 쉼표로 구분 된 목록에 지정됩니다. Examplep { font-family: "Times New Roman", Times, serif;} CSS font-familyThis is a paragr..

Text Shadow 문자 그림자 이 text-shadow속성은 텍스트에 그림자를 추가합니다. 다음 예제는 수평 그림자 (3px), 수직 그림자 (2px) 위치 및 그림자 색상 (빨간색)의 위치를 ​​지정합니다. Exampleh1 { text-shadow: 3px 2px red;} Text-shadow effectNote: Internet Explorer 9 and earlier do not support the text-shadow property.

Word Spacing 단어 간격 이 word-spacing속성은 텍스트의 단어 사이 간격을 지정하는 데 사용됩니다. 다음 예제에서는 단어 사이의 간격을 늘리거나 줄이는 방법을 보여줍니다. Exampleh1 { word-spacing: 10px;} h2 { word-spacing: -5px;} This is heading 1This is heading 2

Line Height 라인 높이 이 line-height속성은 줄 사이의 간격을 지정하는 데 사용됩니다. Examplep.small { line-height: 0.8;} p.big { line-height: 1.8;} This is a paragraph with a standard line-height. The default line height in most browsers is about 110% to 120%. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a bigger line-height. This is a paragraph ..

Letter Spacing 글자 간격 이 letter-spacing속성은 텍스트의 문자 사이 간격을 지정하는 데 사용됩니다. 다음 예제에서는 문자 사이의 간격을 늘리거나 줄이는 방법을 보여줍니다. Exampleh1 { letter-spacing: 3px;} h2 { letter-spacing: -3px;} This is heading 1This is heading 2

Text Indentation 텍스트 들여 쓰기 이 text-indent속성은 텍스트의 첫 번째 줄의 들여 쓰기를 지정하는 데 사용됩니다. 예p { text-indent: 50px;} In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'