CSS3 mix-blend-mode

mix-blend-mode mix-blend-mode CSS 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다. 포토샵을 사용하지 않고 CSS코드만으로 image의 컬러 블렌딩이 가능하다. Syntax /* 키워드 값 */ .keyword{ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend..

2022.01.07

CSS 속성 해제 방법

반응형 웹 구축 시 지정된 CSS 속성을 해재해야 하는 상황이 발생한다. 이때 해당 속성에 맞는 해재 방법으로 스타일을 주면 된다. 고정->유동 .auto{width: auto;} float .float{ float : none } position .position{ position:static; left:0; top:0; } .position{ position:relative; left:0; top:0; /* 권장 */ } border .border{ border:0 none; } background .background{ background:none; } font .font{ font-style:normal; font-weight:normal;} margin/padding .mp{margin:0; p..

2022.01.05

반응형웹 - 미디어쿼리

반응형 웹 디자인 다양해지는 사용자 브라우저 환경에 따라 웹사이트를 제작하는 데는 한계가 있다. 미디어쿼리를 사용하여 화면 크기에 맞게 화면 요소들을 재배치하고 각 요소의 표시 방법만 다르게 해서 사이트를 구현할 수 있다. 미디어쿼리 미디어쿼리란 웹을 접속하는 기기의 화면 해상도에 따라 각각 다른 CSS를 적용해주는 기능을 한다. media 속성에는 all, screen, print 등의 값을 지정하고 웹이 표시되는 대상별로 디자인을 달리 지정해 줄 수 있다. 미디어쿼리는 같은 screen이라도 기기의 해상도에 따라 CSS를 다르게 지정할 수 있다. ＊ 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 함 ＊ 뷰포트(View Port) 너비 같은 여러 장치들의 조건에 맞춰 특정한 CSS 스..

2022.01.05

스크롤바 숨기기

스크롤바 숨기기 ul { scrollbar-width: none; -ms-overflow-style: none; } ul::-webkit-scrollbar { display: none; }

2022.01.04

div 팝업 시 body scroll 비활성화

div 팝업 시 body scroll 비활성화 $("html, body").css({"overflow":"hidden"}); // body scroll 비활성화 $("html, body").css({"overflow":""}); // body scroll 활성화

2022.01.03

youtube iframe 동영상 반응형 비율

youtube 동영상 반응형 비율 CSS .video-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;} .video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

2021.12.24