전체 글32 test TEST TEST 2021. 7. 17. iframe Youtube 반응형 만들기 참조 : http://triki.net/prgm/1491 [CSS] 삽입된 유튜브 동영상을 반응형(Responsive)으로 만들기 – 모두의매뉴얼 워드프레스 블로그를 사용하면서 유튜브 동영상을 주소만 넣으면 아주 간단하게 삽입할 수 있습니다. 하지만 이 유튜브 동영상을 사용자에게 보여주는 과정에서 문제가 발생하는데 크기가 자동으로 조절 되지 않고 굉장히 크거나 작게 표현되는 것입니다. 구글링 해보니 그 문제점을 CSS 로 해결 할 수 있는 방법이 있어 기록으로 남겨 봅니다. (워드프레스의 경우를 예로 하고 있지만 유튜브 동영상이 임베드 된 경우면 거의 비슷할테니 같은 방식을 적용하면 워드프레스가 아 triki.net ■ 중요한 부분은 16:9 비율을 맞추기 위하여 iframe(position:absolu.. 2020. 3. 27. mix-blend-mode 참조 : https://developer.mozilla.org/ko/docs/Web/CSS/mix-blend-mode mix-blend-mode mix-blend-mode CSS 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다. developer.mozilla.org ■ 포토샵의 블렌딩 모드를 가져왔다고 보면됨. 2020. 3. 27. lightbox ■팝업창에서 이미지 갤러리 제공하는 라이브러리 link : lightBox Lightbox Examples Two individual images Four image set Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones lokeshdhakar.com lightbox.css / lightbox.js 2개의 파일 필요 다운로드 바로가기 lokesh/lightbox2 THE origi.. 2020. 3. 27. .clearfix float 속성에 따라 포지션이 망가지는 것을 막기 위한 방법 주로 :after 가상 요소를 사용하는 것이 권장됨.(혹은 befrore) 즉 float 속성을 사용한 개체 뒤에 clear:both를 사용하여, float 속성을 초기화 하는 방식. ex) div:after {content:''; display:block; clear:both;} - 아니면 그냥 flex를 쓰던가. 참조 : https://takeuu.tistory.com/60 2020. 3. 27. '2020.03.27 이미지도장만들기 ■ 이미지도장 만들기 1. w2000px/h2000px 30dpi 2. 가이드선 센터 / 도형 원그리고 (적당히 꽉 차게) 3. 해당 도형에 스트로크(인사이드) 80px 붉은색 계열 3. 텍스트 집어넣고 / 텍스트를 rasterize type / 선택영역을 잡고 ctrl T 를 통하여 원부분에 닿게 늘임 4. 원과 텍스트 영역이 완성되면 2개의 레이어를 복사 후 병합 5. 병합된 레이어에 브러쉬질(내츄럴 영역에서 적당한 것) opacity 20% 을 하여 얼룩같은 부분을 줌 2020. 3. 27. 이전 1 2 3 4 ··· 6 다음
