반응형

프로그래밍/CSS 5

CSS 다크모드 처리 2가지 방식

다크모드를 처리하는 두 가지 방식에 대해서 설명드립니다. 일반적인 방법은 "@media"태크의 "prefers-color-schem"를 사용하는 방법이며, 또 다른 방법은 ""에 사용하는 파일로딩 방식입니다. 스크립트 방식 시스템에 설정된 light, dark 모드에 따라서 스타일시트가 적용됩니다. 파일로딩 방식 로딩한 파일중에서 시스템에 설정된 모드에 따라서 적용됩니다. JavaScript 다크, 라이트모드 변경 이벤트 처리하기 사용자가 시스템의 화면모드를 라이트 혹은 다크 모드로 변경시 이에 따른 처리를 위해서 자바스크립트로 해당 이벤트를 받아서 처리하는 방법입니다. CSS 다크모드 처리 2가지 방식 다크모드를 ccusean.tistory.com Node.js Prefers-color-scheme 서..

프로그래밍/CSS 2022.07.23

CSS 햄버거 메뉴에 애니매이션 효과 넣기

흔히 햄버거 메뉴라고 하는 접혔다 펼쳐졌다가 하는 메뉴 버튼입니다. 이 메뉴 버튼에 애니매이션 효과를 주는 방법 입니다. 메뉴가 접혀 있을 때는 햄버거 모양에서 펼쳐지면 X모양으로 자연스럽게 변하는 소스입니다. HTML 삽입 미리보기할 수 없는 소스 클릭해서 확인 해 보세요. CSS .container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); trans..

프로그래밍/CSS 2022.07.19

CSS 네온사인 효과내기

CSS 스타일 시트를 이용한 네온사인(Neon sign)효과를 내는 소스입니다. 핵심 소스 .neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff0080; } HTML 삽입 미리보기할 수 없는 소스 네온사인 효과 예제 예제 소스 css .neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff00..

프로그래밍/CSS 2022.07.18

CSS 접근자

css 접근자 정의 및 예시입니다. .class .intro class="intro"인 모든 요소 선택 .class1.class2 .name1.name2 class 속성 내에 name1 과 name2 가 모두 설정된 모든 요소를 선택합니다 . .class1 .class2 .name1 .name2 name1 을 가진 요소의 자손인 name2 를 가진 모든 요소를 선택합니다 . #id #firstname id="firstname"인 요소를 선택합니다. * * 모든 요소 선택 element p 모든 요소를 선택합니다. element.class p.intro class="intro"인 모든 요소를 선택합니다. element,element div, p 모든 요소와 모든 요소를 선택합니다. element eleme..

프로그래밍/CSS 2022.06.27
반응형