메뉴의 텍스트를 마우스로 오버시 위 아래로 움직이며 텍스트가 변경되는 효과를 부여하려고 할 때 이용하세요. Home About Gallery Notes Contact .SMN_effect-31 {display:flex;}.SMN_effect-31 li {margin-right:30px;width:120px;}.SMN..
홈페이지를 제작할 때 전체 페이지를 한번에 스크롤할 수 있는 라이브러리를 찾고 있다면 fullpage.js 를 사용해보세요.해당 라이브러리를 이용하면 간편하게 스크롤 한번에 위아래로 이동이 가능합니다. 해당 라이브러리는 3 버전 이후 부터는 유료이며 무단으로 사용시 개발자 도구에서 라이센스를 등록하라는 경고문이 뜨기 때문에 이 점 유의해주시구요. 3 버전 이전 2.9.7 버전은 무료로 사용할 수 있기 때문에 상황에 맞게 사용해보시길 바랍니다. fullpage.js 다운로드 우선 유료 버전이나 무료 버전을 다운로드 받으신 다음에해당 폴더에 들어가 dist 폴더에 접속합니다. 여기서 이제 필요한 파일은 크게 두가지 입니다. fullpage.cssfullpage.js (2.9.7버전은 jquery.fullp..
웹페이지 작업을 하다 유튜브 영상 삽입을 위해 iframe 을 사용할 일이 있습니다.하지만 기본적으로 유튜브에서 공유 버튼을 눌러 iframe 태그 내용을 불러올 수 있지만 기본 사이즈가 정해져 있어 아쉬운 부분이 있습니다. 1. 유튜브 동영상 가져오기 2. 반응형 사이즈에 맞춰 사이즈 조절하기해당 소스를 바로 복사 붙여넣기하면 반응형에 따라 달라지는 화면 사이즈에 따라 유튜브 화면 공간이 검은 배경 부분으로 잘리기 때문에 해당 문제를 해결하기 위해 아래 코드를 적용해보길 바랍니다. .video_container {position:relative;padding-top:56.25%;height:0;width:100%;}.video_container iframe {position:absolute;top:..
웹사이트의 구조를 구성할 때 예전같은 경우 float 또는 inline-block 등의 속성을 이용해 도움을 받았지만 시간이 갈수록 반응형 웹디자인이 대중화되면서 Flex 속성을 많이 이용하는 것 같습니다. 이번 포스팅에서는 Flex에 대해 공부하고 어떤 속성들이 있는지 확인해보겠습니다. Flex 적용하는 방법Flexible Box, Flexbox 라고 불리기도 하는 Flex는 적용하는 방법이 매우 간단합니다.정렬시키고 싶은 요소들의 부모 속성에 display:flex; 만 입력해주면 끝! .container { display:flex;} display : flex Flex 속성에 대해이번에는 Flex를 적용한다면 어떠한 속성을 추가로 부여할 수 있을지 알아보도록 하겠습니다. 속성의미displayFl..