Topic

CSS

A collection of 183 posts

CSS 커서를 적용하는 다양한 방법들. 비트맵 이미지와 이모지 아이콘으로 마우스 커서 만들기.

CSS 커서 속성 CSS에서 사용할 수 있는 기본 커서의 종류는 30가지가 넘습니다. 그중에서 실제로 CSS에서 사용하는 것은 몇 가지 되지 않으며, 대표적인 커서는 다음과 같습니다. CSS 속성 값 커서 모양 설명 default 기본 커서를 표시합니다. 대부분 화살표 모양입니다. 운영체제, 또는 사용자 설정에 따라 다를 수 있습니다. auto 커서가 위치한 컨텐츠,

CSS를 작성할 때 지켜야 하는 7가지 기본 원칙

1. 상대 크기 단위를 사용해라. CSS에서 픽셀 단위 크기를 사용하는 것은 더 이상 권장되지 않습니다. 레티나 디스플레이와 4K 이상의 화면이 서서히 자리를 잡아가고, 모바일 화면과 반응형 웹 지원이 필수가 되면서 다양한 ppi(Pixel Per Inch)를 가지는 기기 지원이 CSS 작성의 필수 요소가 되어가고 있습니다. 픽셀 단위인 px 표시보다는 상대

CSS만으로 별점 선택 기능 만들기. 형제 선택자(Sibling Selector) "~"를 활용한 별점 선택 기능 만들기.

1. 별점 선택 기본 구조 만들기 별점 기능을 구현하기 위한 별 이미지는 투명 배경 이미지인 PNG나 벡터 이미지인 SVG로 많이 만듭니다. 최근에는 다양한 기본 이모지가 사용 가능해지면서 이모지를 이용해서 별점 기능을 만들 수 있어서 별도의 리소스 제작을 하지 않고 만들 수 있는 이모지를 활용해서 만들어 보겠습니다. 이모지는 기본 시스템 글꼴로

CSS 카운터 함수(counter())로 목차형 순번 붙이기

CSS의 고급 활용 기법입니다. 초보자에게는 다소 어려운 내용일 수 있습니다. CSS의 기초적인 부분과 가상 요소에 대해서 알려면 먼저 다음 내용을 학습하시기 바랍니다. > HTML+CSS 기초 강의 - 27. CSS 선택자 기초 4 - 가상 요소 > CSS 선택자 고급 - 가상 요소(Pseudo Element)로 선택하기 > CSS 가상 요소를 활용해 삼각형

[CSS] eot, woff, ttf 웹 글꼴 포맷의 구분과 이해

웹용으로 사용하는 글꼴은 다양한 글꼴 포맷이 있습니다. 종류별로 용도가 조금씩 다르고, 또 현재 시점에서는 전혀 무쓸모인 것도 있습니다. 웹 글꼴 중 TTF와 WOFF는 대부분의 웹 브라우저에서 지원되는 범용 포맷으로 자리잡았기 때문에 2가지 글꼴만 정의해주면 호환성에 문제는 없습니다. CSS로 웹 글꼴을 정의해서 가져올 때는 다음과 같이 정의합니다. "eot"와 "svg" 포맷은

HTML+CSS 기초강의 목차

HTML+CSS 기초강의 목차 * HTML+CSS 기초 강의 - 1. HTML 의 시작 * HTML+CSS 기초 강의 - 2. HTML뷰어, 웹에디터, 웹브라우저 * HTML+CSS 기초 강의 - 3. HTML 문서의 기본 구조 알기 * HTML+CSS 기초 강의 - 4. HTML4와 HTML5 * HTML+CSS 기초 강의 - 5. 텍스트 태그로 기본

CSS font-display 속성으로 웹페이지 텍스트가 먼저 표시될 수 있도록 하기

웹에서 다운로드 가능한 웹 폰트를 사용하는 경우, 기본 설정은 웹 폰트가 모두 다운로드 되어 로딩될 때까지 텍스트 내용이 표시되지 않는 것입니다. 느린 인터넷 환경에서는 처음 웹 페이지가 로딩될 때 다소 미관상 보기 좋지 않을 수 있겠지만, 텍스트 내용이 먼저 표시되어 표시되는 것이 더 중요할 수 있습니다. 아마도 대부분의 웹 환경에서는

웹브라우저 개발자 도구로 CSS 애니메이션 디버깅 하기

웹브라우저의 개발자 도구를 이용하면 CSS 애니메이션 흐름을 확인할 수 있고, 다양한 디버깅 작업을 할 수 있습니다. 최신 웹브라우저들은 모두 CSS 애니메이션을 디버깅하고 조작할 수 있는 도구들을 제공하므로, 주로 사용하는 웹브라우저의 개발자 도구를 사용하면 됩니다. 여기서는 구글 크롬을 기준으로 CSS 애니메이션을 디버깅하고, 속성 값을 변경해 최적의 애니메이션을 찾는 방법을 알아보도록 하겠습니다.

CSS 애니메이션 기초

웹페이지를 풍부하게 만들어주는 가장 좋은 방법은 뭔가가 움직이는 것을 보여주는 것입니다. 과거에는 플래시나 실버라이트같은 애니메이션과 상호동작에 특화된 도구나 확장이 있었지만, 표준에서 벗어난 고유의 기술이었고, 뛰어난 기능적인 특징들에도 불구하고 보안과 성능 문제등 여러가지 문제점이 부각되면서 완전히 퇴출되었습니다. 플래시나 실버라이트 모두 웹에 애니메이션을 구현해주는 특화되고 독보적인 특징이 장점인 만큼 이 기술을 대체할

SVG 벡터 경로(Path)를 따라 이동하는 CSS 애니메이션 만들기

CSS 애니메이션을 만들어 사용할 때 대부분의 애니메이션은 직선 이동, 또는 크기 변경입니다. 전문적인 애니메이션이 아닌 이상 요소의 이동은 직선이 대부분입니다. 직선이 아닌 경우에도 직선을 여러개 이어 붙여서 표현하면 어색하지 않게 방향이 변하는 이동 경로를 만들 수도 있습니다. 예를 들어 다음처럼 여러 개의 직선 이동을 하나의 키프레임 애니메이션으로 표현할 수 있습니다.