이 기사에서는 CSS 를 사용하여 텍스트 스타일링을 마스터하기 위한 과정을 시작합니다. 여기에서는 글꼴
굵기, 종류 및 스타일, 글꼴 약식 (shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여, 텍스트/글꼴 스타일링의 모든 기본 사항에 대해 자세히 설명합니다. HTML 및 CSS 를 사용한 작업에서 이미 경험한 것처럼 요소 내부의 텍스트는 요소의 내용 박스안에 배치됩니다. 콘텐츠 영역의 왼쪽 상단 (또는 RTL 언어
콘텐츠의 경우, 오른쪽 상단) 에서 시작하여 행의 끝으로 흐릅니다. 끝까지 도달하면 다음 줄로 내려가서 모든 내용이 박스에 들어갈 때까지 다음 줄로 계속 진행합니다. 텍스트 내용은 일련의 인라인 요소처럼 효과적으로 작동하며, 서로 인접한 줄에 배치되면 줄 끝에 도달할 때까지 줄 바꿈을 만들지 않거나, 참고: 위의 단락으로 인해 혼동을 느끼게 되더라도 상관없이 — go back and review our
박스 모델 (en-US) 기사를 검토하여, 박스 모델 이론을 정리하십시오. 텍스트 스타일을 지정하는 데 사용되는 CSS 속성은 일반적으로 두 가지 카테고리로 분류되며, 이 기사에서는 별도로 살펴보겠습니다.properties used to style text generally fall into two categories, which we'll look at separately in this article: 참고: 요소 내부의 텍스트는 모두 하나의 단일 entity 로 영향을 받습니다. 텍스트의 하위 섹션은 적절한 요소 (예: 글꼴 스타일링의 속성을 살펴보도록 하겠습니다. 이 예에서는 동일한 HTML 샘플에 몇 가지 다른 CSS
속성을 적용합니다: 완성된 예제는 Github 에서 찾을 수 있습니다 (소스 코드 참조.) 색상
이렇게하면 다음과 같이 표준 브라우저 기본값이 검은색이 아닌 빨간색으로 표시됩니다:
글꼴 종류텍스트에 다른 글꼴을
설정하려면,
이렇게하면 페이지의 모든 단락이 임의의 컴퓨터에 있는 arial 글꼴을 채택하게 됩니다. 웹 안전 글꼴글꼴 사용가능 여부에 대해 말하자면, 일반적으로 모든 시스템에서 사용할 수 있는 글꼴의 수는 한정되어 있으므로 큰 걱정없이 사용할 수 있습니다. 이른바 웹 안전 글꼴 입니다. 대부분의 경우, 웹 개발자로서 텍스트 내용을 표시하는 데 사용되는 글꼴을 보다 구체적으로 제어하려고 합니다. 문제는 웹 페이지를 보는 데 사용되는 컴퓨터에서 어떤 글꼴을 사용할 수 있는지 알 수 있는 방법을 찾는 것입니다. 모든 경우에 이것을 알 수 있는 방법은 없지만, 웹 안전 글꼴은 가장 많이 사용되는 운영 체제 (윈도우, 맥, 가장 일반적인 리눅스 배포판, 안드로이드 및 iOS) 의 거의 모든 인스턴스에서 사용할 수 있는 것으로 알려져 있습니다. 실제 웹 안전 글꼴 목록은 운영 체제가 발전함에 따라 변경될 수 있지만, 최소한 다음과 같은 웹 안전 글꼴을 고려하는 것이 좋습니다 (이중 많은 글꼴이 90 년대 후반과 2000 년대 초에 웹 initiative 를 위한 Microsoft Core 글꼴 덕분에 많은 사람들이 대중화 되었습니다): 참고: Among various resources, the cssfontstack.com website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage. 참고: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. This is a little bit more complex, and we will be discussing this in a separate article later on in the module. 기본 글꼴CSS 는 글꼴의 일반적인 다섯 가지 이름: 5 개의 이름은 다음과 같이 정의됩니다: Font stacks웹 페이지에서 글꼴의 사용가능 여부를 보장할 수 없으므로 (어똔 이유로 웹 글꼴이 실패할 수 있음) 브라우저에서 선택할 수 있는 글꼴 스택 (font stack) 을 제공할 수 있습니다. 여기에는 여러 글꼴 이름으로 구성된
이 경우, 브라우저는 목록 시작 부분에서 시작하여 해당 글꼴이 시스템에서 사용 가능한지 확인합니다. 이 글꼴이 있으면, 해당 글꼴이 선택한 요소에 적용됩니다. 그렇지 않으면, 다음 글꼴로 이동합니다. 나열된 글꼴 중 사용 가능한 글꼴이 없는 경우, 브라우저가 최소한 대략 비슷한 것을 제공할 수 있도록 스택 끝에 적절한 일반 글꼴 이름을 제공하는 것이 좋습니다.이 점을 강조하기 위해 다른 옵션 — 일반적으로 Time New Roman — 을 사용할 수 없는 경우 단락에 기본 serif 글꼴이 제공됩니다. 이는 san-serif 글꼴에 적합하지 않습니다! 참고: font-family 예제단락에 sans-serif 글꼴을 제공하여 이전 예제에 추가하겠습니다:
결과는 다음과 같습니다:
글꼴 크기In our previous module's CSS values and units article, we reviewed
length and size units. Font size (set with the
The Things become more tricky when you start altering the font size of nested elements. For example, if you had an
You would need to set its em value to 20/24, or A simple sizing exampleWhen sizing your text, it is usually a good idea to set the base Our new result is like so:
Font style, font weight, text transform, and text decorationCSS provides four common properties to alter the visual weight/emphasis of text:
Let's look at adding a couple of these properties to our example: Our new result is like so:
Text drop shadowsYou can apply drop shadows to your text using the
The four properties are as follows:
참고: Positive offset values move the shadow right and down, but you can also use negative offset values to move the shadow left and up, for example Multiple shadowsYou can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:
If we applied this to the
텍스트 레이아웃With basic font properties out the way, let's now have a look at properties we can use to affect text layout. 텍스트 정렬The
If we applied
Line heightThe Applying this to the
Letter and word spacingThe So as an example, if we applied the following to the first line of the
We'd get the following:
볼 가치가 있는 다른 속성들The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you've become used to using the above, you should also explore the following: Font styles:
Text layout styles
글꼴 약식 (shorthand)Many font properties can also be set through the shorthand property Among all those properties, only A forward slash has to be put in between the A full example would look like this:
Active learning: Playing with styling textIn this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce! You can either do this using offline HTML/CSS files, or enter your code into the live editable example below. If you make a mistake, you can always reset it using the Reset button.
SummaryWe hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.
In this module |