HTML & CSS

6. 레이아웃

작성자:

이미지 예제는 이미지 다운로드에서 내려받는다. [!INFO] CSS 레이아웃과 반응형 웹 디자인 기법을 다룬다. float로 텍스트 흐름을 조절하고, position으로 요소의 위치를 정한다. 이어서 flex와 grid로 현대적인 레이아웃을 구성한다. 미디어 쿼리, calc(), 반응형 이미지와 영상 예제로 화면 크기에 맞춰 배치를 바꾸는 방법도 확인한다. 1. float [!TIP] 요소를 일반적인 문서 흐름에서 제외하여 부모 요소의 왼쪽이나 오른쪽 가장자리에 배치한다. … 더 읽기

7. 트랜지션과-애니메이션

작성자:

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

4. 박스모델

작성자:

박스 모델은 모든 요소를 콘텐츠 → 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 전반에 남용 … 더 읽기

5. 배경

작성자:

이미지 다운로드 본 문서는 웹 페이지의 시각적 완성도를 높이는 핵심 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 … 더 읽기

3. 문단

작성자:

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

2. 문자

작성자:

문자관련스타일 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효과

작성자:

2.마우스 오버 효과 1.1. button-hover 1.1.1. mouse-hover1 HTML <a href="#"><span></span>hover me</a> CSS body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: verdana; background-color: #272727; } a { width: 220px; height: 80px; color: #ff0; background-color: transparent; font-size: 26px; text-decoration: none; text-transform: uppercase; text-align: center; line-height: 80px; transition: all 0.5s; position: relative; } … 더 읽기

반응형 햄버거메뉴

작성자:

8.반응형 햄버거메뉴 1. 자바스크립트 미리보기 index.html <!DOCTYPE html> <html lang="ko"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Responsive Navigation Bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <nav> <a href="#home" id="logo">Site Logo</a> <i class="fas fa-bars" id="ham-menu"></i> <ul id="nav-bar"> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a … 더 읽기