animation-name : 좌우왔다갔다; animation-duration : 1s; animation-timing-function : linear; /*베지어 주기*/ animation-delay : 1s; /*시작 전 딜레이*/ animation-iteration-count : 3; /*몇회 반복할것인가*/ animation-play-state : paused; /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/ animation-fill-mode: forwards; /*애니메이션 끝난 후에 원상복구 하지말고 정지*/}​ %와 transform을 잘 사용한다면 여러가지 애니메이션을 사용할수 있다. 해당 애니메이션을 적용하고 싶을 땐  좌우로 하는 애니메이션@keyframe..

텍스트가 너무 길때 ...처리하는 방법을 알아보자. text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical 원하는 곳의 class에 해당 css 넣어 주면 끝난다.wekit-line-clamp를 3으로 변경하면 세번째 줄 이상은 ...처리가 된다    vh 사용할때 모바일에서 오류가 날 경우 해결방안 vh 사용할때 모바일에서 오류가 날 경우 해결방안모바일에서는 상단의  url과 하단의 뒤로가기 앞으로가기가 스크롤에 따라 나타나기도 없어지기도 한다...

tap 만들기1. 제이쿼리 cdn 가져와서 사용하기$(document).ready(function() { function setupTab(tabMenuSelector, tabContentSelector) { // 초기 설정: 첫 번째 탭만 보이도록 설정 $(tabContentSelector).hide(); $(tabContentSelector).first().show(); // 탭 메뉴 클릭 이벤트 등록 $(tabMenuSelector + " li").click(function() { $(tabMenuSelector + " li").removeClass("on"); $(this).ad..

이제 javascript로 해당 data이름을 통해 가져와서 컨트롤 할 수 있다.      자바스크립트 탭만들기 html 코드에 data 값넣어서 제어하기 html 코드에 data 값넣어서 제어하기이제 javascript로 해당 data이름을 통해 가져와서 컨트롤 할 수 있다.ineedurhelp.tistory.com

모바일에서는 상단의  url과 하단의 뒤로가기 앞으로가기가 스크롤에 따라 나타나기도 없어지기도 한다. 이때 vh를 사용하면 가려지는 오류가 발생하기도 한다. 이를 수정하기 위해 아래 코드를 넣어주면 잘작동한다.   .box{ height:100vh; height: -webkit-fill-available; height: -moz-available; /* for Firefox */ height: fill-available; /* standard */}.

반응형적용하기 가져가서 쓰시오. 브라우저가 1200px 이상일 때 적용되는 css @media screen and (max-width: 1200px){ 브라우저가 1200px 이하일 때 적용되는 css } @media screen and (max-width: 768px){ 브라우저가 768px 이하일 때 적용되는 css } 그냥 이거 가져가서 사용하면 반응형 너도 할 수 있어! @media 밖에 쓴 코드는 브라우저 전체화면일 때 적용되는 css들이다. 브라우저 좌우 아무곳이나 잡고 줄였을 때 브라우저가 1200px이 된다면 첫번째 @media 안의 코드들이 작동된다. 같은 코드라고 해도 아래에 있는 것이 작동되기 때문에 큰 @media px이 위에 작은게 아래에 있어야 작동된다. ++만약 style.cs..

퍼블리싱을 하는 사람이라면 꼭 사용해야 할 gsap을 알려드리도록 하겠습니다. 간단하면서 화려한 애니메이션을 제공하는 gsap 사용법을 알려드리도록 하겠습니다. 목차 사용환경설정 gsap 애니메이션의 범위 설정하기 gsap 애니메이션 반복 설정 사용환경 설정 우선 cdn을 가져와서 붙여준다. gsap cdn 복사하러 가기 애니메이션 범위 설정하기 기본 정의 gsap. 범위(’ 타깃’, {옵션(오브젝트)}) gsap.to() ~까지 —> 타깃을 오브젝트로 설정한 위치까지 옮겨라. ex) gsap.to('. hero', {x:100, y:100,}); === 해석: 클래스 hero을 x로 100y로 100만큼 이동해라. gsap.from() ~부터 —> 움직인 타깃을 오브젝트를 사용하면서 원래 위치로 옮겨라..

html의 기초, html의 다양한 태그들, html이란? 정의 프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어입니다. 웹개발의 가장 기초가 되는 언어입니다. 쉽게말해서 브라우저라는 빈 스케치북에 밑그림을 그릴 수 있게 해주는 연필 같은 존재라고 생각하면 됩니다. 기초 태그들 1. 잘 꾸며지는 것 vs 안꾸며지는 것 display: block VS display :inline css는 나중에 알려드리겠습니다. 지금은 block은 태그를 잘 꾸며주고 inline은 꾸미기가 어렵다고 이해하시면 됩니다. block 태그들은 등등이 있습니다. html의 div태그는 하나의 박스라고 생각하면 됩니다. 현재 div에 강제적으로 크기를 넣어서 색이 칠해졌지만 기본적으로 크기를 안주면 가로의 길이가 100..