본문 바로가기

HTML/CSS문법79

CSS 어울리는 글꼴 조합 훌륭한 글꼴 쌍은 훌륭한 디자인에 필수적이다. 글꼴 쌍 규칙 다음은 훌륭한 글꼴 쌍을 만드는 몇 가지 기본 규칙이다: 1. 보완(complement) 서로 보완하는 글꼴 쌍을 찾는 것은 항상 안전하다. 훌륭한 글꼴 조합은 너무 비슷하거나 너무 다르지 않게 조화를 이루어야 한다. 2. 수퍼 패밀리 글꼴 사용 글꼴 수퍼 패밀리는 서로 잘 작동하도록 설계된 글꼴 집합이다. 따라서 동일한 수퍼 패밀리 내에서 서로 다른 글꼴을 사용하는 것이 안전하다. 예를 들어 Lucida 수퍼 패밀리에는 다음 글꼴이 포함되어 있습니다: 루시다 산스, 루시다 세리프, 루시다 타자기 산스, 루시다 타자기 세리프, 루시다 매스. 3. 대비가 왕 너무 비슷한 두 글꼴은 종종 충돌한다. 그러나 올바른 방식으로 수행된 대비는 각 글꼴에서.. 2023. 8. 9.
CSS google fonts CSS google fonts HTML의 표준 글꼴을 사용하지 않으려면 Google 글꼴을 사용할 수 있다. Google 글꼴은 무료로 사용할 수 있으며 1000개 이상의 글꼴을 선택할 수 있다. google fonts 사용하기 h1 제목 : 구글 폰트 Sofia on Fire h1 제목 : 구글 폰트 Sofia on Fire. 123456790 구글 폰트 sofia에 effect를 fire 설정하기 위해 Sofia&effect=fire로 설정하고 font-effect-fire를 class로 설정하면 아래 그림과 같이 sofia 폰트에 불이 난것 같은 효과가 표시된다. 여러 글꼴 효과를 요청하려면 다음과 같이 파이프 문자(|)로 효과 이름을 구분한다: Neon Effect Outline Effect Em.. 2023. 8. 8.
CSS font-size 속성 CSS font-size 속성 font-size 속성은 텍스트 크기를 설정한다. 텍스트 크기를 관리할 수 있는 것은 웹 설계에서 중요하다. 그러나 글꼴 크기 조정을 사용하여 문단을 머리글처럼 만들거나 머리글을 머리글처럼 만들면 안된다. 제목에는 항상 - 과 같은 적절한 HTML 태그를 사용하고 문단에는 를 사용한다. 글꼴 크기 값은 절대 또는 상대 크기일 수 있다. 절대 크기: 텍스트를 지정된 크기로 설정한다 사용자가 모든 브라우저에서 텍스트 크기를 변경할 수는 없다(접근성 이유로 좋지 않음) 절대 크기는 출력의 물리적 크기가 알려진 경우에 유용하다 상대 크기: 주변 요소를 기준으로 크기를 설정한다 사용자가 브라우저에서 텍스트 크기를 변경할 수 있다 px로 폰트 크기 설정하기 픽셀 크기를 사용하여 텍스트.. 2023. 8. 7.
CSS font-style 속성 CSS font-style 속성 font-style 속성은 대부분 기울임꼴 텍스트를 지정하는 데 사용된다. 이 속성에는 세 가지 값이 있다: normal - 텍스트가 정상적으로 표시됩니다 italic - 텍스트가 기울임꼴로 표시됩니다 oblique - 텍스트가 "편향"입니다(사선은 기울어짐). 이탤릭체와 비슷하지만 덜 지원됨) CSS font-weight 속성 font-weight 속성은 글꼴의 가중치를 지정한다: font-weight 속성 font-weight normal. font-weight lighter. font-weight bold. font-weight 900. CSS font-weight 속성값에 normal, lighter, bold, 900값을 설정하였을 경우 아래 그림과 같이 화면에 .. 2023. 8. 6.