2. Front-end

CSS - [ 3D 애니메이션 (요소 뒤집기) ]

마우스를 올리면 요소가 뒤집히고 뒤에 있는 요소의 내용이 출력되도록 3D 애니메이션을 설정해보자. 우선 Html에 아래와 같이 앞면을 나타낼 요소와, 마우스를 올리면 나타날 뒷면을 나타낼 요소를 만들어준다. CSS에서 우선 요소를 감싸고 있는 container에 가로 세로 너비를 지정해주고(뒤에서 container에 hover 가상 선택자를 주고 container에 마우스를 올리면 3D 애니메이션 효과가 나타나도록 할건데, block 요소이므로 너비를 지정해주지 않으면 item의 범위 밖에서도 마우스를 올리면 효과가 나타나버림!), 원근감을 느낄 수 있도록 perspective 속성을 준다. 그리고 item에는 크기를 지정해주고 border-box로 box-sizing을 변경 후 요소가 뒤집혔을 때 뒷면..

CSS - [ Easing ]

https://greensock.com/docs/v2/Easing 여기서 Type (easeIn, easeOut, easeInOut) 과 강도 (Power) 에 따라 요소의 움직임을 확인할 수 있다. 아래쪽에 보면 코드가 뜨는데, 여기서 to 메서드의 매개변수로 현재 화면에 나타나는 움직임의 (요소, 시간, 옵션)이 뜬다. easeInOut으로 반복 재생하면 움직임이 끊기는 듯한 느낌 없이 부드럽게 움직이는 느낌을 줄 수 있다. 떠다니는 이미지 효과를 줄 때 아래와 같이 코드를 작성했다. 위의 코드에서 TweenMax를 gsap으로 대체했다고 보면 된다.

CSS - [ YouTube iframe API ]

브라우저에 유튜브 영상 출력해보기! https://developers.google.com/youtube/iframe_api_reference?hl=ko API 문서 참조 우선 영상이 출력될 요소를 구성해보자. 영상은 일반적으로 16:9의 비율이므로 그에 맞춰보겠다. 먼저 Html에 item과, item을 감싸고 있는 container 요소를 만든다. 그리고 css에서 container 요소에 width 값을 주고, item 요소에 % 단위의 width와 patting-top를 주면 그에 맞는 비율의 요소 크기가 그려진다. 즉 아래에서 width : padding-top 이 100:56.25 이므로 16:9의 비율로 만들어졌다고 보면 된다! youtube ifram을 만들 때는 아래와 같이 html에 요소..

JS - [ Swiper 라이브러리 ]

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com HTML에 필요한 기본 구조 Slide 1 Slide 2 Slide 3 ... * swiper-button-prev, swiper-button-next 버튼은 swiper 태그 안에 있으면 swiper 의 가로 너비를 벗어나면 출력이 안됨. 그래서 swiper 태그 바깥쪽에 선언해서 사용했음! JS 코드 new Swiper('선택자', { // direct..

JQuery - [ DB정보 JSON 형태로 변경 ]

우선 라이브러리 설치가 필요하다. https://code.google.com/archive/p/json-simple/downloads 이동 왼쪽 카테고리에서 Downloads로 이동 제일 위에 json-simple-1.1.1.jar 다운 프로젝트에 라이브러리 설치하기! -------------------------------------------------- dbJSON.jsp -------------------------------------------------- - DB에서 데이터 가져와서 JSON 형태로 만드는 파일 - 아래쪽의 html 코드 내용은 지우고 작성 - contentType은 application/json; 으로 수정하기 JSON형태로 변경 // 1. 드라이버 로드 Class.forN..

JQuery - [ Ajax RSS ]

RSS는 "Rich Site Summary" 또는 "Really Simple Syndication" 이라 불리며, 사이트내 정보를 외부 채널에 전달하기 위한 기술이다. 사이트내 구성되어 있는 정보 단위를 디자인 없이 텍스트로만 간략하게 전달한다. JTBC에서 제공하는 뉴스 RSS를 ajax를 이용해 가져와보자. https://news.jtbc.joins.com/Etc/RssService.aspx 링크에서 원하는 카테고리의 뉴스 RSS를 가져와보자. 사이트에서 원하는 RSS를 복사해서 주소를 브라우저에 입력해보면 아래처럼 xml 파일로 뜨는걸 볼 수 있다. 보면 item 태그 안에 title 태그와 link 태그로 나뉘어 있다. ajax를 이용해 기사 타이틀과 타이틀을 클릭하면 해당 링크로 이동할 수 있도..