반응형

html 4

구글 폰트를 웹 폰트로 사용하는 방법

구글 폰트를 웹 폰트로 사용하는 방법에 대해 알아보겠습니다. 구글 폰트는 웹사이트에서 사용이 가능한 무료 오픈소스 웹 폰트 라이브러리입니다. 다양한 폰트를 제공하며, 웹 디자이너 및 개발자가 웹 페이지에서 원하는 폰트를 사용할 수 있도록 지원합니다. 구글 폰트의 장점으로는 무료로 사용할 수 있으며 상업적으로도 이용이 가능합니다. 모든 폰트는 오픈소스 라이선스로 제공되므로 원하는 대로 수정하고 배포할 수 있고, 다양한 언어와 스타일을 지원하는 1,000개 이상의 서체를 제공합니다. 사용하는 방법도 어렵지 않아서 웹사이트에 쉽게 추가할 수 있으며, 코드를 복사하여 붙여넣기만 하면 됩니다. 구글 폰트에서 원하는 폰트를 클릭해줍니다. Noto Sans Korean 폰트를 선택하겠습니다. Noto Sans Kor..

html 2024.03.14

CSS로 형광펜(하이라이터) 효과를 주는 방법

CSS를 사용해서 형광펜 효과를 주는 방법 2가지를 알아보겠습니다. 형광펜 효과를 사용하면 텍스트의 내용을 눈에 띄게 만들어 해당 내용을 강조해 주목도를 높일 수 있습니다. 하지만, 형광펜 효과를 남용해서 사용하면 오히려 아무 것도 강조하지 않았을 때보다 좋지 않으므로 필요한 부분에만 사용하는 것이 좋습니다. 위에 보이는 이미지처럼 효과를 주겠습니다. 빨간 형광펜 효과는 그라이언트를 이용했고, 파란 형광펜 효과는 가상 요소를 이용해 만들었습니다. Highlighter Pen Highlighter Pen 우선, HTML 구조입니다. 간단하게 body, div, p태그만 사용했습니다. 첫 번째 방법입니다. *,*::after,*::before{margin: 0; padding:0} body{display: ..

html 2024.01.03

CSS로 글자에 그라디언트 색상 넣는 방법

CSS로 글자에 그라디언트 색상 넣는 방법입니다. 어렵지 않고 간단하게 글자에 그라디언트를 넣을 수 있어, 포인트를 줘야할 때 사용하면 좋습니다. 글자에 그라디언트를 넣기 위해서는 위의 이미지처럼 배경 색상을 그라디언트로 넣어주면 됩니다. background: linear-gradient(to left,#b0d9ff,#3528e6,#ef9dff); 배경 색상을 그라디언트로 넣어 줬다면, 글자 색을 투명하게 만들어 배경 그라디언트만 보여지도록 만들어 주세요. color:transparent; 글자를 투명하게 만들었으면 background-clip:text; 속성을 사용해서 배경 색을 글자 기준으로 잘라줍니다. 배경을 글자 기준으로 자르면 글자에 그라디언트가 들어가게 됩니다. background-clip: ..

html 2023.08.03

html에서 제목 요소인 <h1>~<h6> 태그 알아보기

html에서 제목 요소로 사용되는 ~태그를 사용하는 방법입니다. ~ 태그에서 h는 'heading'의 약자이고 h태그는 블록요소입니다. 블록요소의 가장 큰 특징은 일반적으로 태그가 끝나면 자동으로 줄이 바뀝니다. h태그는 기본적으로 글자가 볼드로 설정되어 있습니다. 제목의 글자 크기와 중요도에 따라 부터 까지 나누어 지고. 숫자가 낮을수록 글자 크기와 중요도가 높아집니다. 따라서 의 글자 크기가 가장 크고 의 글자 크기가 가장 작습니다. 안녕하세요. 안녕 하세요. 안녕 하세요. 안녕 하세요. 안녕하세요. 안녕하세요. 태그에는 띄어쓰기나 줄 바꿈을 사용하지 않고 태그에는 띄어쓰기를 한번, 태그에는 띄어쓰기를 여러번 주고 태그에는 줄 바꿈을 주었습니다. 결과를 출력한 이미지입니다. 띄어쓰기가 없는 태그와 띄..

html 2021.01.16
반응형