CSS

이미지 예제는 이미지 다운로드에서 내려받는다. CSS 레이아웃과 반응형 웹 디자인 기법을 다룬다. float로 텍스트 흐름을 조절하고, position으로 요소의 위치를 정한다. 이어서 flex와 grid로 현대적인 레이아웃을 구성한다. 미디어 쿼리, calc(), 반응형 이미지와 영상 예제로 화면 크기에 맞춰 배치를 바꾸는 방법도 확인한다. 1. float 1.1. 주요 속성 값 설명 left 요소를 왼쪽으로 부유시킴 right 요소를 오른쪽으로 부유시킴 … 더 읽기

이미지 다운로드 개요 본 학습 문서는 웹 페이지에 생동감을 불어넣는 CSS의 핵심 동적 효과인 트랜지션(Transition), 트랜스폼(Transform), 그리고 애니메이션(Animation) 기술을 심도 있게 다룹니다. 요소의 상태 변화를 부드럽게 이어주는 트랜지션의 기본 원리부터, 2D 및 3D 공간에서의 공간 변형을 제어하는 트랜스폼, 그리고 @keyframes를 활용한 정교한 시무브먼트 구현법을 체계적으로 학습합니다. 실무에서 즉시 활용 가능한 카드 뒤집기, 호버 확대, 경로 … 더 읽기

박스 모델은 모든 요소를 콘텐츠 → padding → border → margin 의 사각형으로 다루는 CSS 핵심 개념으로, 요소의 크기와 간격·정렬이 모두 이 구조에서 계산된다. 01. width,height 설명 요소의 가로 너비와 세로 높이를 지정한다. 최소/최대 크기를 제한하여 반응형 레이아웃에 활용할 수 있다. 값 설명 width 요소의 콘텐츠 가로 너비 height 요소의 콘텐츠 세로 높이 min-width 요소의 … 더 읽기

Apple이 WWDC25에서 공개한 Liquid Glass 디자인 언어의 핵심 효과를 CSS와 SVG 필터 조합구현 Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion, Chromatic Aberration 등 실제 유리 재질을 모방하는 다양한 레이어를 단계별로 CSS/SVG로 구현 주요 효과 구현에는 backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset, Blend 사용 Safari/Firefox에서는 SVG 필터가 동작하지 않아 Blur·Shadow만 적용 복잡한 효과일수록 GPU 사용량이 크고, UI 전반에 남용 … 더 읽기

이미지 다운로드 본 문서는 웹 페이지의 시각적 완성도를 높이는 핵심 CSS 속성인 불투명도(opacity)와 배경(background) 설정 방법을 다룬다. 기본적인 색상 및 이미지 적용부터 반복, 위치, 크기 제어, 그리고 복합적인 레이어링을 가능하게 하는 다중 배경 기법을 학습한다. 01. opacity 설명 요소 전체의 불투명도를 설정한다. 배경색뿐만 아니라 자식 요소와 텍스트 등 모든 콘텐츠의 투명도에 영향을 미친다. 값 설명 … 더 읽기

예시 CSS 코드 아래 예제는 vw 단위를 사용하여 다양한 요소의 폰트 크기를 설정한 것입니다. 이 예제에서는 calc()와 clamp()를 함께 사용하여 다양한 화면 크기에서의 최적의 폰트 크기를 제공합니다. css코드 복사 html { font-size: 62.5%; /* 1rem = 10px */ font-family: 'Pretendard', sans-serif; } body { font-size: calc(1rem + 0.5vw); /* 기본 텍스트 크기 */ } h1 … 더 읽기

이미지 다운로드 이번 장에서는 CSS로 글자와 문단을 꾸미고 배치하는 방법 을 배웁니다. 01. text-align 설명 블록 요소 안의 인라인 콘텐츠(텍스트·이미지 등)를 가로 방향으로 정렬한다. 정렬 대상이 아니라 그것을 담고 있는 부모 블록에 선언한다. 값 설명 left 왼쪽 정렬(기본값) right 오른쪽 정렬 center 가운데 정렬 justify 양쪽 끝 맞춤(단어 간격을 늘려 줄을 채움) 블록 자체를 가운데 … 더 읽기

문자관련스타일 01. font 단위 👁‍🗨 상대단위들 단위 기준 em 부모 요소 기준 단위환산사이트 rem :root(html) 기준 (루트→최상위) vh 브라우저 화면 높이기준 (viewportHeight→vh) (폰트크기 x 브라우저높이) / 100 vw 브라우저 화면 너비기준(viewportWidth→vw) (폰트크기 x 브라우저너비) / 100 % 부모요소 기준 <div class="parent"> 부모 요소 (font-size 20px, 400×300) <p class="em">em: 부모 폰트(20px) × 2 = 40px</p> <p … 더 읽기

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

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