🔗https://developer.mozilla.org/ko/docs/Web/CSS/CSS_nesting CSS에서도 scss 처럼 중첩선택자를 사용할수 있다. & 2023년도에 추가 되었으며 사용방법은 scss와 같다 다른점이 있다면 전처리기의 사용없이 브라우저에서 바로 해석이 가능하므로 더욱 편리하다는 점이다. parentRule { /* 부모 규칙 스타일 속성 */ & childRule { /* 자식 규칙 스타일 속성 */ } } 위와 같이 작성하면 & 은 parentRule 문자열을 그대로 받아온다 .card { … 더 읽기
1.이미지다운로드 2. 기본 구조작성 2-1. html 구조작성 실행화면 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <section> <div> <h1><span>가로</span><span>스크롤</span><span>페이지</span></h1> <p>css만으로 구현해보자</p> </div> </section> <section id="sectionPin"> <div class="pin-wrap-sticky"> <figure class="pin-wrap"> <figcaption> <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, quod, minus adipisci cupiditate quo dolor veniam molestiae … 더 읽기
4장: 컴포넌트와 UI 요소 4-1. 재사용 가능한 컴포넌트 패턴 @utility — v4 커스텀 컴포넌트 클래스 v3 → v4 변경사항 — @layer components { .btn { @apply … } } 방식 대신 @utility를 사용한다. v4에서도 @apply는 동작하지만 @utility가 권장된다. @utility란? — Tailwind의 유틸리티 클래스처럼 동작하는 나만의 클래스를 정의하는 문법이다. bg-blue-600 같은 기본 유틸리티와 동일한 우선순위로 적용되므로, … 더 읽기
반응형 디자인과 접근성 1. Tailwind의 반응형 시스템 Tailwind는 모바일 우선(Mobile First) 방식을 사용한다. 접두사가 없는 클래스는 모든 화면에 적용되고, 접두사가 붙은 클래스는 해당 브레이크포인트 이상에서 적용된다. 1.1. 기본 브레이크포인트 접두사 최소 너비 대상 기기 (없음) 0px 모든 화면 (모바일 기본) sm: 40rem (640px) 큰 모바일·소형 태블릿 md: 48rem (768px) 태블릿 lg: 64rem (1024px) 노트북·데스크톱 xl: … 더 읽기
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. 작은 화면에서 다크모드로 변경 [미리보기] 미디어쿼리를 사용해서 반응형 웹을 … 더 읽기
예제1 HTML “`html <div class="frame-wrap"> <img src="https://placedog.net/400" class="photo"> </div> “` CSS “`css .frame-wrap { width: 400px; padding: 20px 40px; /* 액자 두께 */ background: #8B4513; /* 액자 색 (갈색) */ box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* 입체감 */ } .photo { width: 400px; height: 300px; object-fit: cover; /* 이미지 가장자리를 잘라서 액자가 더 잘 … 더 읽기
MDN 미리보기 이미지다운로드 1. 예제1-이미지 Figma 1. Figma 에서 마스크용 이미지를 그린다. 2. card.svg로 저장한다.  html “`html <div class="flex"> <figure class="item"> <a href="#"> <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /> <figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis minima veniam vel mollitia reprehenderit velit explicabo impedit officiis iusto, in ducimus eius esse! Quia aliquid … 더 읽기
1. 컨테이너쿼리 VS 미디어쿼리 미디어 쿼리(Media Query): 미디어 쿼리는 CSS3에 소개된 기능으로, 브라우저의 뷰포트 너비와 같은 조건에 따라 스타일을 적용할 수 있게 해주는 기능입니다. 따라서 브라우저 창의 크기에 따라 다른 스타일을 적용하거나, 특정 뷰포트 크기에서만 특정 CSS를 적용하는 등의 작업이 가능합니다. 예를 들어, 미디어 쿼리를 사용해서 브라우저 창의 너비가 600px 미만일 때는 배경색을 빨간색으로, 600px … 더 읽기
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 … 더 읽기