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