분류 전체보기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. '2020.03.26 | liquify | mosic | 입체Text | LongShadow | 머리 누끼 | ■ Liquify tool ■ Mosaic 선택영역 / 필터 pixelate - 모자이크 선택영역 / 필터 가오시안 블러 모자이크 최근 필터 단축키 ctrl + F ■ 입체글씨 / 긴그림자 1. text free transform (ctrl + T) 오른쪽 1칸 / 아래쪽으로 1칸 2. ctrl + alt + shift + T // 앞선 이동조건을 포함한 복사 ■ 피부보정 1. 원본 레이어 복사 2. 필터 - 가오시안 블러 10 3. 필터 - 노이즈 메디앙 5 4. 필터 - 필터 갤러리 - 텍스쳐 - 샌드스톤 50% 1 5. 레이어마스크(#000) 6. 브러쉬 opacity 10% ■ 머리카락 누끼따는 법 1. 레이어 옆 채널 조정 / 2. 레벨을 열어 양쪽 컨트롤 바를 줄임 3. 누끼 영역을 제외한 부.. 2020. 3. 26. metaviewport .... 위 소스를 해석하면 사용자가 현재 접속하고 있는 웹페이지의 너비를 기기 화면 너비에 맞추고 사용자가 브라우저의 확대/축소를 불가능하게 하고 처음 웹사이트를 방문했을 때, 초기, 최소, 최대 화면의 배율을 설정하지 못하게 막는 코드입니다. 즉, 사용자가 사용하는 스마트폰에 손가락으로 아무리 작게 하려고 해도 안되는 이유가 이것입니다. ※ content에 여러 속성값을 쓸 때 쉼표로 분리하여 표현할 수 있습니다. width=device-width 사용자가 접속한 기기 화면의 넓이에 따라 웹사이트의 넓이를 맞추겠다는 것을 의미합니다. 따라서 device-width는 100%의 크기로 화면에 출력됩니다. user-scalable=no 사용자가 브라우저의 확대/축소를 불가능하게 하는 기능입니다. yes와.. 2020. 3. 26. 이전 1 2 3 4 다음
