CSS 배경색(background-color) 및 범위 지정 방법 웹 페이지 전체에 백그라운드 색을 지정할 수 있지만 텍스트, 목록, 버튼 등 태그 요소에도 백그라운드 색을 지정할 수 있습니다. 그리고 백그라운드 색을 지정할 때 적용 범위도 조절할 수도 있습니다. 그럼 예제를 통해서 백그라운드 색 지정 및 범위를 조절하는 방법에 대해서 알아보죠. ▼ 백그라운드 색 지정 속성 속성 설명 background-color […]
CSS 표(table) 스타일 정리 및 예제, border 속성 등 HTML에서 표(table)를 만들 때 CSS을 이용하면 표 테두리, 셀 테두리, 표 색상, 셀 색상, 셀 사이의 여백 등 원하는 스타일을 지정할 수 있습니다. 그럼 예제를 통해서 표(table)와 관련된 스타일에 대해서 알아보죠. ▼ 표 스타일 중에서 대표적인 속성 ▼ 속성 설명 border 표와 셀에 테두리를 지정합니다. border-spacing
CSS 목록 리스트 스타일 정리 및 예제, list-style 속성 웹 사이트를 제작할 때 리스트(목록)는 자주 사용됩니다. 특히 사이트 메뉴를 리스트와 링크로 조합해서 많이 만듭니다. 리스트는 순서 없는 리스트와 순서 있는 리스트로 구분할 수 있습니다. 그럼 예제로 리스트를 만드는 스타일에 대해서 알아보죠. ▼ 리스트 스타일 속성 ▼ 속성 설명 list-style-type 불릿 모양과 번호 스타일을 지정합니다. list-style-image
CSS a태그 링크 밑줄 없애기, 밑줄 스타일, 색상 변경 웹의 가장 큰 특징은 웹 페이지 링크를 통해 인터넷에서 원하는 정보를 찾는 겁니다. HTML 앵커(a) 태그를 사용하여 다른 웹 사이트 또는 특정 웹 페이지로 이동할 수 있습니다. 앵커(a) 태그를 추가하게 되면 구분할 수 있게 파란색 글자에 밑줄이 생깁니다. 하지만 일반적으로는 웹 페이지에서 밑줄을 제거합니다. 그럼 예제로
CSS 텍스트 정렬(text-align), 줄 간격 조절(line-height) 웹 페이지를 읽을 때 좀 더 가독성 있게 하기 위해서 워드 문서와 같이 텍스트를 정렬할 수 있고 줄 간격도 조절할 수 있습니다. 텍스트를 정렬할 때에는 text-align 속성을 사용하고 줄 간격을 조절할 때에는 line-height 속성을 사용하면 됩니다. 그리고 텍스트를 세로로 가운데 정렬하려면 line-height 속성을 사용하시면 됩니다. 그럼 예제를 통해서 텍스트
CSS 색상 지정하기(6가지 방법), 티스토리 글자색 지정 모든 웹 페이지에서 색상은 필수로 들어갑니다. 대표적으로 글자에 색상을 지정할 수 있고 테두리 및 박스에도 색상을 지정할 수 있습니다. 그럼 텍스트에 color 속성을 사용하여 글자색을 지정하는 방법과 티스토리 블로그에 글자색을 지정하는 방법에 대해서도 알아보죠. 텍스트 color 속성을 사용하여 글자색 지정 방법 color 속성 값으로는 “색상 이름, 16진수, rgb(또는
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. 소스 코드
