폴리프레임

@apply는 Tailwind CSS 유틸리티 클래스를 재사용 가능한 커스텀 스타일로 그룹화할 때 사용됩니다. 중복 제거: 동일한 유틸리티 클래스를 여러 곳에서 사용할 때 반복되는 코드를 줄일 수 있습니다.가독성 향상: 클래스가 많아지면 코드가 복잡해지기 때문에, @apply를 사용해 코드를 더 깔끔하게 유지할 수 있습니다.재사용성: 자주 사용하는 스타일을 하나의 클래스처럼 관리하여 유지보수성을 높입니다.index.css 또는 globals.css 파일에 작성합니다.Tailwind의 기본 스타일과 충돌할 수 있으므로 클래스 이름을 명확하게 정의 /* index.css */.btn-primary { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;}..

html + css 2024. 11. 28. 07:54

대부분의 브라우저는 "브라우저의 자동 재생 정책" 으로 인하여, 첫 로드시에는 자동재생이 허용되지 않습니다. 따라서 muted 속성을 true 설정하고, 사용자와 상호 작용해서 play 를 할 수 있습니다. 아래 코드는 background-image로 video를 깔고, 별도의 audio파일을 아이콘을 이용하여 ON/OFF 토글하도록 설정한 코드입니다. background-image 는 overlay 처리를 하고, audio 의 음량을 고정시켜서 배경음악으로 만 사용 합니다.import { useRef, useState } from "react";import bgVideo from "../assets/background/seokang-background.mp4";import MainText from "...

html + css 2024. 11. 26. 15:26

전체 컨테이너를 설정할때 유용하게 사용할 수 있었습니다..container { width: min(1200px, 90%); margin: 0 auto; /* 수평 중앙 정렬 */} 요소의 너비를 화면 크기의 90%와 1200px 중 작은 값으로 설정합니다.예를 들어, 화면 크기가 1000px일 경우 요소의 너비는 900px(90%)이 됩니다. 화면 크기가 1400px일 경우 요소의 너비는 1200px로 고정됩니다.margin의 첫 번째 값 0: 상하 방향 여백을 0으로 설정.두 번째 값 auto: 좌우 여백을 동일하게 설정해 요소를 수평 가운데 정렬. body { display: flex; justify-content: center; /* 수평 중앙 정렬 */ align-items: center..

html + css 2024. 11. 25. 11:28

요소용도: 비디오 콘텐츠를 웹 페이지에 삽입하고 재생하기 위해 사용됩니다.속성:src: 비디오 파일의 URL을 지정합니다.controls: 비디오 컨트롤(재생, 일시정지, 볼륨 등)을 표시합니다.autoplay: 페이지 로드 시 자동으로 비디오를 재생합니다.loop: 비디오가 끝나면 처음부터 다시 재생합니다.muted: 비디오를 음소거합니다.poster: 비디오가 로드되기 전에 표시되는 이미지 URL입니다. 브라우저가 video 태그를 지원하지 않습니다. 요소용도: 다른 HTML 문서나 웹 페이지를 현재 페이지에 삽입하기 위해 사용됩니다. 예를 들어, 다른 웹 사이트, 유튜브 비디오, 구글 맵 등을 임베드할 때 사용됩니다.속성:src: 임베드할 콘텐츠의 URL을 지정합니다.width 및 height: ..

html + css 2024. 11. 21. 12:51

unset 키워드 는 속성을 기본 상태로 되돌리거나 상속된 속성을 제거합니다. 즉, 상속되는 속성의 경우 부모의 스타일을 상속받지 않고, 사용자 에이전트 스타일(브라우저의 기본 스타일)로 돌아갑니다. 상속이 없는 경우 초기값(브라우저가 기본으로 지정한 값)으로 돌아갑니다. button { all: unset; background-color: #3498db; color: white; padding: 10px 20px; border-radius: 5px;} 예제에서는 all: unset;을 통해 버튼의 브라우저 기본 스타일을 없앤 후, 원하는 스타일로 다시 지정했습니다. 이제 버튼은 브라우저마다 달라지는 기본 스타일을 가지지 않고, 지정된 스타일만 적용받습니다. 비교all: uns..

html + css 2024. 10. 30. 18:41