CSS

웹 페이지에서 마우스 커서를 요소 위에 올렸을 때 나타나는 시각적 반응을 호버(hover, 마우스 오버) 효과라고 부른다. 호버는 사용자의 조작 상태를 감지하여 스타일을 동적으로 변경하는 가상 클래스(pseudo-class)이며, 스위치에 손을 대면 불이 들어오는 감지 센서와 같은 역할을 한다. 이 글에서는 CSS의 트랜지션(transition, 전환)과 트랜스폼(transform, 변형), 그리고 가상 요소(pseudo-element, 의사 요소)를 결합하여 입체적인 버튼 및 이미지 마우스 오버 … 더 읽기

8.반응형 햄버거메뉴 반응형 웹(Responsive Web) 디자인에서 화면 너비에 맞춰 내비게이션(Navigation) 메뉴의 구조를 전환하는 방법을 다룬다. 데스크톱 환경에서는 전체 메뉴 항목을 가로로 나열하고, 화면 폭이 좁은 모바일 기기에서는 햄버거 메뉴(Hamburger Menu) 아이콘 형태로 축소하여 화면 공간을 절약한다. 순수 자바스크립트(JavaScript)와 제이쿼리(jQuery) 라이브러리를 각각 활용하여 메뉴의 열림과 닫힘 상호작용을 구현한다. 1. 자바스크립트 미리보기 index.html 웹 문서의 뼈대를 구성하는 … 더 읽기

1. 개요 MDN var()함수는 사용자지정 속성(–*)을 값으로 지정할 때 사용된다. 사용자 지정 속성을 사용하면 반복되는 경우 사용자 지정속성을 변경함으로써 Var()함수를 이용해 지정한 속성의 값을 한번에 변경할 수 있다. 2. 기본문법 var(custom-property-name>, <declaration-value>) 예시: root { –main-bg-color: pink; } body { background-color: var(–main-bg-color); } 3. 예제 3.1. 작은 화면에서 다크모드로 변경 [미리보기] 미디어쿼리를 사용해서 반응형 웹을 … 더 읽기

이 글은 CSS의 clip-path 속성으로 이미지의 표시 영역을 자르는 방법을 다룬다. 다각형 모양으로 고정해서 자르는 예제부터 마우스를 올렸을 때 영역을 펼치는 예제, 페이지가 열리면 애니메이션으로 이미지를 드러내는 예제까지 차례로 확인한다. HTML 구조는 같지만 CSS에 지정한 도형과 변화 방식에 따라 화면이 어떻게 달라지는지 비교할 수 있다. 예제1: 다각형 모양으로 이미지 자르기 clip-path(클립 패스)는 요소에서 화면에 표시할 … 더 읽기

CSS 마스크(Mask)는 특정 그래픽의 알파 채널(투명도)이나 휘도를 기준으로 요소의 표시 영역을 제어하는 속성이다. 마스크는 종이 위에 모양 틀을 대고 원하는 부분만 오려내는 스텐실 공정과 같아서, 사각형 틀을 벗어난 독창적인 외곽선을 웹 요소에 부여할 때 활용된다. 이 문서에서는 벡터(Vector) 형식인 SVG(에스브이지) 그래픽을 마스크 이미지로 지정하여 카드 레이아웃과 비디오 재생 영역에 적용하는 방법을 설명한다. MDN 미리보기 이미지다운로드 … 더 읽기

1. 컨테이너쿼리 VS 미디어쿼리 미디어 쿼리(Media Query): 미디어 쿼리는 CSS3에 소개된 기능으로, 브라우저의 뷰포트 너비와 같은 조건에 따라 스타일을 적용할 수 있게 해주는 기능입니다. 따라서 브라우저 창의 크기에 따라 다른 스타일을 적용하거나, 특정 뷰포트 크기에서만 특정 CSS를 적용하는 등의 작업이 가능합니다. 예를 들어, 미디어 쿼리를 사용해서 브라우저 창의 너비가 600px 미만일 때는 배경색을 빨간색으로, 600px … 더 읽기

7. retina 1. 해상도별 이미지 출력 준비 1.1. 개요 해상도별로 이미지를 출력하는 기술은 다양한 장치와 환경에서 웹 페이지의 사용자 경험을 향상시키기 위해 중요합니다 현재는 다양한 종류의 디바이스(데스크탑, 노트북, 스마트폰, 태블릿 등)와 화면 크기가 존재합니다. 각 디바이스와 환경에 맞는 이미지를 제공하여 사용자가 최적화된 경험을 얻을 수 있도록 해야 합니다 또한 고해상도 이미지를 모든 디바이스에 동일하게 제공하면 … 더 읽기

1. 개요 [SVG 예제사이트] [SVG 한글 예제사이트] SVG(Scalable Vector Graphics) 는 웹용 벡터방식 이미지 포멧입니다. 다양한 해상도에 대응하는 웹서비스 제작시 용이하게 사용할수 있습니다. 2. 예제 2.1. viewbox viebox 는 일러스트레이터의 아트보드와 유사합니다 [미리보기] <svg width="50" height="50" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="25" fill="red" /> </svg> <svg width="100" height="100" viewBox="0 0 100 100"> <circle … 더 읽기

1. form 요소 디자인 폼(form) 요소는 웹 페이지에서 사용자의 입력을 받아 서버로 전송하는 서식 태그다. 사용자가 데이터를 입력하거나 선택하면 브라우저는 해당 값을 전송 가능한 데이터 형태로 처리한다. 일상생활에서 신분 확인이나 설문 조사를 위해 작성하는 서류 양식과 같다. 기본 폼 컨트롤은 운영체제와 브라우저 환경에 따라 서로 다른 외형으로 렌더링되므로 일관된 사용자 인터페이스를 제공하기 위해 CSS를 활용한 … 더 읽기

1. min() min() 함수는 하나 이상의 쉼표로 구분된 연산을 포함하며 최소값을 지정한다. 보통 최대값 설정시 사용한다. [미리보기] .element { width: min(50%, 500px); } 브라우저는 뷰포트 너비에 따라 두 값(50%, 500px) 중에서 가장 작은 값을 선택한다. 2. max() max() 함수는 하나 이상의 쉼표로 구분된 연산 중 가장 큰 값을 나타낸다. 보통 최소값을 설정할 때 사용한다. [미리보기] .element … 더 읽기