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..

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