CSS 눈누 웹 폰트 사용하기, 티스토리 적용 방법 웹 폰트를 자체적으로 만들어서 사용할 수 있지만 인터넷에서 무료로 제공하는 웹 폰트를 간단히 링크를 통해서 사용할 수 있습니다. 이전 포스트에 구글에서 제공하는 웹 폰트를 사용하는 방법과 동일하게 눈누 사이트에서 제공하는 무료 웹 폰트를 사용하는 방법에 대해서 알아보고 티스토리 블로그에 웹 폰트를 적용하는 방법에 대해서도 알아보죠. ▶ 이전 […]
CSS 구글 웹 폰트 사용하기, 티스토리 적용 방법 웹 폰트를 자체적으로 만들어서 사용할 수 있지만 인터넷에서 무료로 제공하는 웹 폰트를 간단히 링크를 통해서 사용할 수 있습니다. 그중에서도 구글 폰트는 무료로 사용할 수 있는 여러 개 웹 폰트를 제공합니다. 그럼 구글 웹 폰트를 사용하는 방법과 티스토리에 구글 폰트를 적용하는 방법에 대해서 알아보죠. 구글 폰트 사용하기 1.
CSS 웹 폰트 사용하기 – @font-face 사용자 PC에 없는 글꼴을 대비하여 font-family 속성에 여러 개의 글꼴로 지정하여 사용할 수 있습니다. 하지만 다른 글꼴로 대체하는 게 아니라 원하는 글꼴을 그대로 보여주기 위해서는 웹 폰트를 사용하면 됩니다. 많은 기업들은 자체적으로 제작한 글꼴로 사용자에게 보여주기 원합니다. 그럼 웹 폰트를 사용하는 방법에 대해서 알아보죠. 웹 폰트 사용하기 ☞ 먼저
CSS 글꼴(폰트) 관련 스타일, font-family 속성 등 CSS(Cascading Style Sheet)에서 폰트 속성은 글꼴과 관련된 스타일 속성을 의미합니다. font로 시작하는 속성은 글꼴과 관련된 스타일이라고 생각하시면 됩니다. 그럼 font-family, font-size, font-style, font-weight 속성에 대해서 알아보죠. 글꼴(폰트) 스타일 font-family 속성 ☞ 글꼴을 지정하는 스타일 속성입니다. 사용자 컴퓨터에 설치된 폰트를 사용합니다. ▼ 사용자 PC에서 설치된 폰트 1. 소스 코드
CSS 스타일 적용 순서(우선순위) – !important CSS(Cascading Style Sheet)에서 스타일 적용 순서는 반드시 알고 있어야 됩니다. 예로 스타일을 지정했는데 적용이 되지 않는 경우에는 지정한 스타일이 우선순위가 낮아 적용이 되지 않는 경우가 발생합니다. 그럼 스타일이 적용되는 순서에 대해서 알아보죠. 스타일 우선순위 1. 적용 방법에 따른 우선순위 ☞ 웹 문서에 스타일 적용 방법들이 혼합되어 있는 경우에 스타일은
CSS 선택자 유형 – 전체, 태그, 클래스, ID, 그룹 CSS 선택자는 웹 문서의 어떤 요소를 스타일을 적용할지 정의합니다. 다시 말해 스타일을 적용할 대상을 지정하기 위해서 선택자(selector)를 사용합니다. 선택자 중에서 꼭 알아야 되는 기본적인 선택자인 전체, 타입(태그), 클래스, ID, 그룹 선택자에 대해서 알아보죠. ▼ 선택자 유형 ▼ CSS 블록 1. 전체 선택자 ☞ 웹 문서 전체
CSS 스타일과 스타일시트 적용 방법 그리고 티스토리 티스토리를 운영하면서 기본적으로 스킨 편집은 하게 됩니다. 스킨 편집을 할 때 HTML과 CSS에 대한 기본 지식이 있으면 어렵지 않게 변경할 수 있는데 전혀 지식이 없으면 변경하기가 겁이 날 수도 있습니다. 잘못 변경하여 블로그가 망가질까 봐 섣불리 변경을 못하는 경우가 있는 것 같습니다. HTML 관련하여 20개 게시글을 올렸는데 글
HTML 인라인(inline) 태그 vs 블록(block) 태그 비교 및 종류 태그는 공간 분할로 크게 인라인(inline) 태그와 블록(block) 태그로 분류할 수 있습니다. CSS을 적용하기 전에 먼저 태그의 display 속성이 inline 요소인지 block 요소인지 알아야 스타일을 쉽게 적용할 수 있습니다. 대표적인 인라인 요소는 span 태그, 블록 요소는 div 태그가 있습니다. 그럼 인라인(inline) 태그와 블록(block) 태그의 차이점 및 종류에
HTML 라디오(radio) 버튼, 체크박스(checkbox) 사용 예제 폼(form) 양식 요소 중에서 라디오 버튼과 체크박스는 아주 많이 사용되고 있습니다. input 태그 type 속성으로 만들 수 있고 하나만 선택(radio) 또는 여러 개 선택(checkbox) 하는 것 이외에는 기능면에서 동일합니다. 그럼 예제로 라디오 버튼과 체크박스를 만드는 방법에 대해서 알아보죠. 라디오(radio) 버튼, 체크박스(checkbox) 1. input 태그 type 속성의 종류 종류 성명
HTML fieldset, legend 태그 – 폼 요소 그룹으로 묶기 폼(form) 양식을 만들다 보면 서로 관련이 있는 폼 요소끼리 그룹으로 묶어서 작성하는 게 훨씬 직관적입니다. 그럴 경우에 fieldset 태그와 legend 태그를 사용하시면 됩니다. 그리고 legend 태그는 fieldset 태그 내부에서만 사용할 수 있습니다. fieldset, legend 태그 1. 사용법 <fieldset><legend> 제목 </legend> …</fieldset> 2. 태그 설명 종류 설명
