본문 바로가기

WWWEB109

picture 태그와 figure 태그 차이점? 태그는 IE 미지원의 영향으로 그동안 존재도 잘 모를 정도로 잘 사용하지 않고 있었던 태그였으나, 이리저리 외국 사이트들을 둘러보다가 태그를 쓰고 있어서 공부(?)해 봄. 를 쓰려고 보니 가장 헷갈리는게 바로 언제 를 쓰고 언제 를 쓰는가였는데, 도대체 언제 써야하는지 잘 느껴지지가 않음. (나름 마크업에 진심~ ㅎㅎ) picture는 사진이고, figure는 그림인가 의문이 들어 구글 번역으로 돌려보았는데... figure도 그림이고, picture도 그림이었던... ㄷㄷㄷㄷ 어쨌든 이리저리 찾아보니 이미지가 그림이던, 사진이던 의미와 크게 상관없이 설명글과 함께 사용해야 하는 경우.. 즉 이 필요한 경우 를 사용하고, 반응형을 할 때 이미지 형식이나 품질을 여러 벌로 지원하는 경우 를 쓰면 됨. 태그.. 2023. 5. 8.
[css] 모서리 종이 말려지는 효과를 만들어봄. (쏘 이지~) 간단하지만 효과가 좋아보이는 종이 말리는 효과를 줘 보았음. 일단 아래에 결과물을 보면 굉장히 자연스러운 듯. ㅎㅎㅎㅎ 제작방법 ① 일단 이미지를 준비해야 함. 아래와 같이 커져있는 png 이미지 하나를 만듦. ② 만든 이미지를 position으로 띄우고, size를 0으로 줄여야 함. 본인은 transform: scale(0, 0); 으로 줄여놓았음. 이때! 이미지가 왼쪽 위에서 커져야하기 때문에 transform-origin: 0 0; 을 같이 줌. (만약 오른쪽에서 커져야 한다면, transform-origin: 100% 0; 으로 사용하면 되겠죵?) ③ 사이즈를 원래대로! transform: scale(1, 1); 으로 주면 끄읕~ (본인은 animation으로 효과를 만들어 봄) 코드 추천 포스.. 2023. 5. 8.
[UI/UX] gent.midea (패럴럭스, SVG, canvas 등) https://www.gent.media/ 사이트를 보고, 다양하게 참고해볼만한 것들이 많아 이러저리 살펴봄. ABOUT - 타이틀인 "award-winningdesigner/creativedeveloper" 글자는 각 글자를 태그로 감싸서 animation-delay를 이용. - 나머지 작은 글자들을 모두 으로 감싸기는 어려우니 아래에서 위로 올라오는 모션을 줌. - GENT - about 페이지와 동이한 타이포 애니메이션. - 스크롤다운 아이콘 효과. - canvas로 구현한 우주 효과... 아마도 three.js인 듯 - 스크롤을 없애고, 페이지 길이를 오른쪽 bar로 줌. - 포폴사이트들의 패럴럭스 효과가 괜춘~ 2023. 5. 4.
[css] clip-path를 이용한 텍스트 안 wave 애니메이션 열심히 일하며 달려오다가 잠깐 시간이 되서, 그동안 생각만 하고 있던 wave 효과들을 한 번 나중에 써먹어볼 생각으로 구글링 하던 중 지금까지 생각하지 못한 clip-path 방법으로 wave 효과를 주는 방법이 있어서 따라해 봄~ 일단 결과물은... 직접 해보니 쉽게 구현이 가능함.🙀 예시 코드 minitoy 코드를 보면 글자 안에 들어가있는 것처럼 보이게 하는 핵심 코드는 바로 clip-path임. clip-path clip-path는 inset, circle, ellipse, polygon와 같이 기본적인 도형부터 직접 도형을 그릴 수 있는 path()도 가능함. (포토샵의 path툴처럼!) 이제 왠만해서 포토샵에 있는 기본적인 기능들은 브라우저에서 가능한 느낌이... 혹시 크롬에서만 되는게 아닌.. 2023. 4. 26.
[ js ] 스크립트 동적 생성하기 - 스크립트는 동적으로 추가하여 실행하는 경우 async와 같이 비동기로 실행됨. - 즉, 스크립트가 추가가 되는 즉시 다운로드를 시작하며, 다운로드가 완료되면 바로 실행함. - 아래와 같이 "js.async=false"를 주는 경우에 스크립트는 문서에 추가된 순서대로 실행하게 됨. let js = document.createElement( "script" ); js.src = "async-script.js"; js.async = false; // 문서에 추가된 순서대로 실행해야 하는 경우 사용. document.body.append(script); // body에 추가. 2023. 4. 25.
[ js ] defer vs async 브라우저는 HTML을 읽을 때 태그를 만나면 DOM생성을 멈추고 스크립트를 먼저 실행하는데, 이런 경우 아래와 같은 문제점이 발생함. 1. 스크립트가 먼저 작성된 경우 DOM요소에 접근할 수 없음. 2. 스크립트의 크기가 큰 경우 해당 스크립트를 다운받고 실행할 때까지 아래쪽 페이지를 볼 수 없음. 이런 문제를 해결할 수 있는 속성이 바로 defer와 async임. 두 속성은 기본적으로 페이지 렌더링을 막지 않는 공통점을 갖고 있으나 아래와 같은 차이점이 있음. defer - 페이지 생성을 막지 않아 페이지 콘텐츠가 바로 출력됨. - DOM이 준비된 후 실행됨. - DOMContentLoaded 이벤트 발생 전 실행됨. - 스크립트 크기와 상관없이 작성 순서에 맞게 실행됨. - 에 src 속성이 없으면 .. 2023. 4. 25.
단어가 짧을 때 양쪽 정렬(text-align: justify) 방법 [only css] 글의 길이가 길지 않을 때 justify 속성이 잘 먹지 않는데, 해당 요소에 width 값과 text-align: justify를 주고, 가상요소인 :after가 핵심인데, display: inline-block 및 width: 100%를 주면 justify 속성을 적용할 수 있다. 아래 코드를 참고해보자. 코드 이 름 휴 대 전 화 이 메 일 ※ 주의: 강제로 준 width보다 글자의 길이가 큰 경우를 깨질 수 있음~ ※ 수동으로 길이를 맞춰야하다 보니 2023. 4. 11.
[ css ] position: sticky가 안 먹는 경우, 적용 조건 기존에 스크립트를 이용해서 스크롤 이벤트로 만들었던 sticky 네비는 css에서 "position: sticky"을 쓰는 것만으로도 간단히 적용할 수 있는데, 가끔 요 스티키를 써도 안 먹는 경우가 있는데, position: sticky가 동작이 안되는 경우, 아래 체크 리스트를 참고해! check list ① sticky 속성을 준 엘리먼트에 top, left, right, bottom를 같이 줘야 함. → sticky는 top, left, right, bottom 중 하나 이상 같이 사용해야 한다. ② 부모 노드에 height를 확인해 보자. → height: OO%와 같이 퍼센트로 설정하면 동작하지 않음. (height: auto, height: OOpx, height: OOem, height: .. 2023. 3. 28.
[ js ] 크로스도메인에서 iframe 높이값 자동 처리하기 서로 다른 도메인을 가진 아이프레임 페이지를 부른 후 높이값을 맞춰주고 싶은데, top.document, parent.frame 등과 같이 직접 접근이 불가하다. 이 경우 window.postMessage() method를 사용하면 되는데, 이 method는 윈도우 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 한다. 아래 예시 코드로 확인해보자. 부모 페이지 (parent-site) function fn_postMessageController( e ){ if( e.origin === "http://child-site.com" ){ document.querySelector( "#iframe-id" ).setAttribute( "height", parseInt( e.data ) );.. 2023. 3. 2.
728x90
반응형