HTML & CSS

8. 마스크

작성자:

MDN 미리보기 이미지다운로드 1. 예제1-이미지 Figma 1. Figma 에서 마스크용 이미지를 그린다. 2. card.svg로 저장한다. ![alt](https://aabbee.cafe24.com/wp-content/uploads/2026/06/2026-03-08_221032.png) 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 … 더 읽기

containerQuery

작성자:

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

retina

작성자:

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

svg

작성자:

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 요소 디자인 1.1. 큰 체크박스,라디오버튼 HTML <form action="#" method="get"> <div class="checkbox"> <input type="checkbox" name="check1" id="check1" value="1" class="checkbox1" /> <label for="check1">큰체크박스</label> <input type="radio" name="radio1" id="radio1" value="1" class="checkbox1" /> <label for="radio1">큰라디오버튼</label> </div> </form> CSS .checkbox { margin: 2em 0; } /*big checkbox*/ .checkbox input.checkbox1 { font-size: 1em; width: 1.25em; /* 너비 설정 */ height: 1.25em; … 더 읽기

clamp(),min(),max()

작성자:

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

calc

작성자:

1. 개요 MDN CSS 속성의 값으로 계산식을 지정할 수 있다. 2. 기본문법 property: calc(expression); 예시: width: calc(100% – 80px); 3. 예제 3.1. 가변너비 요소 지정 [미리보기] 요소의 가변 너비를 쉽게 지정하기 HTML <div class="banner">이건 현수막입니다!</div> CSS .banner { position: absolute; left: 40px; width: calc(100% – 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; … 더 읽기

1. 선택자

작성자:

CSS PPT 01. 내부스타일시트 Info: 👁️‍🗨️ head 태그 사이에 style 태그로 작성하는 방식 “`html 우리를 기쁘게 하는 것들. “` “`text 내부스타일시트 우리를 기쁘게 하는 것들. “` 02. 외부스타일시트 “`html “` Info: 👁️‍🗨️ head 태그 사이에 link 태그에 css 문서의 주소를 링크하는 방식 “`html 우리를 기쁘게 하는 것들. “` ex2-2.html <!DOCTYPE html> <html lang="ko"> <head> <meta … 더 읽기

기능심화

작성자:

피그마 기능심화 1. 카드UI 만들기 <li> 프레임을 두 개 그립니다. 하단 프레임은 Alt + 드래그 드랍으로 복제 후 크기를 줄입니다. </li> <li> 두 개의 프레임을 한번 더 프레임 그룹으로 묶습니다. </li> <li> 프레임의 이름을 그림처럼 변경합니다. </li> <li> 표시된 순서대로 체크하여 모서리를 둥글게 만듭니다. </li> 1-1. 프레임 VS 그룹 같은 작업을 그룹으로 해봅니다. 사각형을 그려서 … 더 읽기

인터페이스예제

작성자:

피그마 인터페이스 예제 Info: 예제파일 다운로드: https://url.kr/5qeozf 1. 캔버스와 페이지 그리고 레이어 1-1. 캔버스 속성 설정 <li> 배경색 변경하기 </li> <li> 측정자 표시하기 우측 패널에서 설정: 좌측 패널 홈버튼에서 설정: </li> 2. 화면 명칭 좌측 패널 메인 메뉴 툴바 파일명 우측 패널 탭 버튼 3. 좌측 패널 3-1. 레이어 <li> 툴바에서 프레임(Frame) 클릭 </li> <li> … 더 읽기