검색 상자에 키워드를 입력하면 목록에서 일치하는 링크만 실시간으로 걸러 보여주는 기능은 웹사이트의 사용자 경험을 크게 높여 줍니다. 이 글에서는 순수 JavaScript만으로 링크를 필터링하는 검색 메뉴를 만드는 방법을 전체 예제 코드와 함께 자세히 살펴보겠습니다. 전체 예제 코드 다음은 왼쪽 메뉴의 검색 상자에 입력된 값에 따라 동물 링크 목록을 필터링하는 전체 코드입니다. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu
반응형 웹 디자인에서 내비게이션 바는 필수 요소이며, 여기에 검색 상자를 함께 배치하면 사용자 편의성이 크게 향상됩니다. 아래 예제에서는 HTML과 CSS만으로 데스크톱과 모바일 환경 모두에서 자연스럽게 작동하는 검색 상자를 내비게이션 메뉴에 추가하는 방법을 살펴봅니다. 예제 다음은 반응형 내비게이션 메뉴 안에 검색 상자를 추가하는 전체 코드입니다. <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"
웹 페이지에서 스크롤과 상관없이 화면 왼쪽에 항상 고정되어 있는 사이드 내비게이션 메뉴는 position: fixed 속성을 활용하면 간단하게 구현할 수 있습니다. 이 글에서는 순수 CSS만으로 고정 측면 탐색 메뉴를 만드는 방법을 예제 코드와 함께 단계별로 살펴보겠습니다.예제 코드아래는 CSS를 사용하여 고정 사이드 내비게이션 메뉴를 구현한 전체 코드입니다.<!DOCTYPE html> <html lang=en > <head> <meta charset=UTF-8 /> <meta nam
웹 페이지에서 버튼을 눌러 슬라이드 형태로 열리고 닫히는 사이드 내비게이션 메뉴는 사용자 경험을 높이는 대표적인 UI 요소입니다. CSS의 transition 속성과 간단한 JavaScript만 활용하면 부드러운 애니메이션 효과가 적용된 사이드 메뉴를 손쉽게 구현할 수 있습니다.전체 예제 코드다음은 애니메이션이 적용되고 닫기 기능까지 갖춘 사이드 내비게이션 메뉴를 만드는 완성된 코드입니다.<!DOCTYPE html> <html lang="en" > <head> <meta cha
반응형 웹 디자인에서 사이드 탐색 메뉴는 화면 크기에 따라 레이아웃이 자동으로 조정되어야 합니다. 이 글에서는 JavaScript 없이 순수 CSS만 사용하여, 데스크톱에서는 세로형 사이드바로 표시되고 화면이 좁아지면 가로형 상단 메뉴로 자동 전환되는 반응형 내비게이션을 만드는 방법을 소개합니다. 핵심 원리 반응형 사이드 내비게이션의 핵심은 미디어 쿼리(@media)입니다. 화면 너비가 특정 기준값(여기서는 700px) 이하로 줄어들면, 화면 왼쪽에 고정되어 있던 세로 사이드바가 상대적 위치의 가로 메뉴로 전환됩니다. 주요 CSS
CSS만 사용하면 마우스 커서를 올렸을 때 화면 가장자리에서 슬라이드되어 나타나는 호버형 사이드 내비게이션(Hoverable Sidenav)을 손쉽게 구현할 수 있습니다. 핵심 원리는 각 내비게이션 링크를 position: fixed로 고정한 뒤 left 값을 음수로 지정해 화면 밖으로 숨겨두고, :hover 선택자를 통해 left: 0으로 이동시키는 것입니다. 여기에 transition 속성을 더하면 부드러운 애니메이션 효과까지 얻을 수 있습니다. 예제 코드 <!DOCTYPE html> <html lang=&quo
CSS font-size 속성이란?CSS의 font-size 속성은 웹 문서에서 글꼴(텍스트)의 크기를 지정할 때 사용하는 핵심 속성입니다. 값은 백분율(%)뿐만 아니라 픽셀(px), 센티미터(cm), 포인트(pt), em 등 다양한 단위로 지정할 수 있으며, smaller, larger 같은 절대 키워드도 사용 가능합니다.특히 상대값(em, %, rem 등)을 활용하면 사용자가 브라우저 설정으로 글자 크기를 조절할 수 있어 접근성(accessibility)이 크게 향상됩니다.기본값: 16px (12pt)상속 여부: 부모 요소로부터
CSS 선택자란 무엇인가?CSS로 스타일을 적용하려면 먼저 어느 HTML 요소를 꾸밀지 지정해야 하는데, 이 역할을 하는 것이 바로 선택자(selector)입니다. 그중에서도 가장 널리 쓰이는 두 가지가 마침표(.)를 사용하는 클래스 선택자와 해시(#)를 사용하는 아이디 선택자입니다. 두 선택자는 비슷해 보이지만 용도와 동작 방식이 분명히 다릅니다.. 선택자 — 클래스 선택자. 선택자는 클래스(class) 단위로 스타일을 적용하는 선택자입니다. 마침표 연산자로 스타일 클래스를 정의하면, 이 클래스를 여러 HTML 요소에 반복해서 재
웹사이트에서 자주 사용되는 아이콘 바(Icon Bar)는 CSS만으로도 손쉽게 만들 수 있습니다. 이 글에서는 Font Awesome 아이콘과 CSS를 활용해 가로형 아이콘 바와 세로형 아이콘 바를 만드는 방법을 예제 코드와 함께 소개합니다.가로형 아이콘 바 만들기먼저 화면 상단에 배치되는 가로형 아이콘 바를 만들어 보겠습니다. 각 링크를 왼쪽으로 띄워(float) 나란히 정렬하는 방식입니다.예제 코드<!DOCTYPE html> <html> <meta name="viewport" cont
웹사이트에서 흔히 볼 수 있는 메뉴 아이콘(햄버거 아이콘)은 이미지 파일 없이도 CSS만으로 간단하게 만들 수 있습니다. 핵심 원리는 가로로 긴 직사각형 막대(bar) 세 개를 세로로 쌓아 올리는 것입니다. 기본 원리 메뉴 아이콘은 다음과 같은 구조로 이루어집니다. <div> 요소 세 개를 사용해 막대 세 개를 만듭니다. 각 막대에는 width(가로 길이)와 height(세로 두께)를 지정합니다. background-color로 막대의 색상을 설정하고, margin으로 막대 사이의 간격을 조절합니다. CSS 메뉴 아이
CSS와 JavaScript를 활용하면 클릭할 때마다 내용이 펼쳐지고 접히는 아코디언(Accordion) UI를 손쉽게 만들 수 있습니다. 아코디언은 FAQ 섹션, 사이드바 메뉴, 공지사항 목록 등에서 널리 사용되는 컴포넌트로, 제한된 화면 공간을 효율적으로 활용할 수 있다는 장점이 있습니다. 아코디언의 동작 원리 아코디언은 크게 두 가지 요소로 구성됩니다. 버튼(헤더) – 사용자가 클릭하는 영역입니다. 클릭 시 active 클래스가 토글되어 활성 상태임을 시각적으로 표시합니다. 패널(내용) – 버튼 바로 아래에 위치한 콘텐츠 영
CSS를 활용하면 HTML 테이블에 원하는 스타일을 자유롭게 정의할 수 있습니다. <table> 요소와 그 하위 요소들을 꾸밀 때 주로 사용되는 대표적인 CSS 속성은 다음과 같습니다.border테두리의 두께(border-width), 스타일(border-style), 색상(border-color)을 한 번에 정의할 수 있는 속성입니다.border-collapse테이블 셀들의 테두리를 서로 공유(병합)할지, 아니면 각각 분리해서 표시할지 지정합니다.caption-side테이블 캡션(<caption>) 박스를 위
CSS의 border-style 속성은 요소의 테두리(보더) 스타일을 지정하는 데 사용됩니다. 실선, 점선, 이중선 등 다양한 스타일로 테두리를 표현할 수 있으며, border-top-style, border-right-style, border-bottom-style, border-left-style 속성을 활용하면 각 변(면)마다 개별적으로 다른 테두리 스타일을 적용할 수도 있습니다.주요 border-style 값border-style 속성에 사용할 수 있는 대표적인 값은 다음과 같습니다.solid – 기본 실선dashed – 파
CSS의 border-color 속성은 HTML 요소의 테두리 색상을 지정하는 데 사용됩니다. 이 속성을 활용하면 네 면 전체에 하나의 색상을 적용할 수 있고, border-top-color, border-right-color, border-bottom-color, border-left-color 속성을 사용하면 각 면마다 다른 색상을 개별적으로 지정할 수도 있습니다.기본 문법CSS border-color 속성의 기본 문법은 다음과 같습니다.Selector { border-color: /*값*/ }border
CSS의 font-size 속성은 절대 키워드와 상대 키워드를 사용해 설정할 수 있습니다. 이를 활용하면 별도의 수치 계산 없이도 원하는 크기에 맞춰 텍스트를 손쉽게 확대하거나 축소할 수 있습니다. 문법(Syntax) CSS font-size 속성의 기본 문법은 다음과 같습니다. Selector { font-size: /*value*/ } 아래 표는 CSS에서 사용되는 표준 키워드를 정리한 것입니다. 번호값 및 설명 1medium중간 크기의 글꼴로 설정합니다. 기본값(default)입니
CSS의 font-variant 속성은 텍스트에 다양한 글꼴 변형 효과를 적용하는 데 사용됩니다. 이 속성 하나로 font-variant-caps(대소문자 변형), font-variant-numeric(숫자 스타일), font-variant-alternates(대체 글리프), font-variant-ligatures(합자), font-variant-east-asian(동아시아 글자 형태) 등 여러 세부 속성을 한 번에 지정할 수 있습니다.기본 문법(Syntax)font-variant 속성의 기본적인 작성 형식은 다음과 같습니다.Se
CSS의 일반 형제 선택자(general sibling selector)는 특정 요소 뒤에 위치하는 모든 형제 요소를 선택하는 데 사용됩니다. 이때 두 요소는 반드시 같은 부모 요소를 공유해야 합니다. 인접 형제 선택자(+)가 바로 다음에 오는 하나의 요소만 선택하는 것과 달리, 물결표(~)를 사용하면 뒤따르는 모든 해당 요소가 한꺼번에 스타일링됩니다.기본 문법CSS 일반 형제 선택자의 기본 문법은 다음과 같습니다.element ~ element { /* 선언부 */ }물결표(~) 기호를 기준으로, 앞쪽 요
CSS의 그룹 선택자(grouping selector)는 여러 개의 요소를 동시에 선택하여 동일한 스타일을 한꺼번에 적용할 때 사용합니다. 각 요소마다 같은 스타일을 반복해서 작성하지 않아도 되므로 코드가 간결해지고, 유지보수에 드는 노력도 크게 줄어듭니다.그룹 선택자를 만들려면 여러 선택자를 쉼표(,)로 구분하여 나열하면 됩니다.기본 문법CSS 그룹 선택자의 기본 문법은 다음과 같습니다.element, element { /*스타일 선언*/ }아래 예제들을 통해 CSS 그룹 선택자의 실제
CSS의 color 속성은 요소의 텍스트 색상을 변경할 때 사용합니다. 색상 값은 표준 색상 이름, rgb(), rgba(), hsl(), hsla(), 그리고 16진수(hex) 코드 등 다양한 방식으로 지정할 수 있습니다.구문(Syntax)CSS color 속성의 기본 구문은 다음과 같습니다.Selector { color: /*value*/ }아래 예제들을 통해 CSS color 속성의 사용법을 살펴보겠습니다.예제 1첫 번째 예제에서는 div 요소에 흰색 텍스트와 배경색을 지정하고, p 요소에는 rgba()
CSS를 활용하면 요소의 텍스트, 테두리(border), 배경(background)에 원하는 색상을 자유롭게 정의할 수 있습니다. 그중에서도 color 속성은 요소의 텍스트 색상을 지정하는 데 사용되는 가장 기본적인 속성입니다.기본 문법(Syntax)CSS color 속성의 기본 문법은 다음과 같습니다.Selector { color: /*값*/ }색상 값은 seashell, blue처럼 색상 이름으로 지정할 수도 있고, HEX 코드, RGB 값 등 다양한 방식으로 표현할 수 있습니다.예제