본문 바로가기

전체 글589

CSS Icons 아이콘 라이브러리를 사용하여 HTML 페이지에 아이콘을 쉽게 추가할 수 있다. CSS 아이콘 추가하기 HTML 페이지에 아이콘을 추가하는 가장 간단한 방법은 Font Awesome과 같은 아이콘 라이브러리를 사용하는 것이다. 지정된 아이콘 클래스의 이름을 인라인 HTML 요소(예: 또는 )에 추가한다. 아래 아이콘 라이브러리의 모든 아이콘은 CSS(크기, 색상, 그림자 등)로 사용자 정의할 수 있는 확장 가능한 벡터이다 font awesome icons Font Awesome icon을 사용하려면 fontawesome.com 으로 이동하여 로그인한 후 HTML 페이지의 Font Awesome icon 라이브러리 Font Awesome icons: 스타일된 Font Awesome icons (size an.. 2023. 8. 10.
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.