본문 바로가기
728x90
300x250
SMALL

분류 전체보기1121

햄버거메뉴 코딩으로 만들기 이미지 없이 코딩으로 표현한 햄버거 메뉴 css12345678910111213141516171819202122232425262728293031323334353637.toggle{ position: absolute; top: 99px; z-index: 999999; width: 15px; height: 11px; left: 10px; } .toggle span{ position: relative; display: block; } .toggle span, .toggle span:after, .toggle span:before { width: 100%; height: 1px; background-color: #fff; transition: all 0.3s; backface-visibility: hidden; .. 2019. 2. 9.
제이쿼리를 이용한 노드찾기 var $변수이름 = $("css 선택자"); //기본적인 방법$()의 정체$()는 함수호출이다. 선택자에 해당하는 노드를 찾아주는 역할을 한다. css선택자찾고 싶은 선택자를 만들어 $() 함수의 매개변수 값으로 넣어주면 된다. var $변수이름$()함수에서 리턴해주는 값을 저장하기 위해 만든 변수 변수이름 앞에 $가 들어간 이유는 제이쿼리 기능이 들어있는 변수라는 것을 표현하기 위해서이다. $("div")라는 구문이 실행되면 $()함수는 문서에서 div 태그를 찾은 후 div 태그를 쉽게 다를 수 있게 jQuery에 넘겨 제이쿼리 클래스 인스턴스를 만들어 리턴해 준다이 리턴값은 $divs라는 변수에 저장된다 $divs.css()$div에는 $()함수 호출 후 리턴값으로 받은 jQuery인스턴스가 들어.. 2019. 2. 8.
반응형웹 모바일 해상도 아이폰4, 아이폰4S 640x960 아이폰5 640x1136 아이폰6 아이폰6S 750x1134 아이폰6 플러스, 아이폰 6S플러스 1080x1920 아이패드, 아이패드2, 아이패드 미니 768/1024 아이패드3, 아이패드4, 아이패드 에어, 아이패드 에어2, 아이패드 미니2 ~아이패드 미니4 1536x2048 아이패드 프로 2048x2732 갤럭시 S3, 갤럭시 노트2 720x1280 갤럭시 S4, 갤럭시 S5,갤럭시 S5네오, 갤럭시 노트3 1080x1920 갤럭시 S6, 갤럭시 S6 엥지+, 갤럭시 S7, 갤럭시 S7 엣지, 갤럭시 노트4, 갤럭시 노트 5 1440X2560 갤럭시 탭 E 800 X 1280 갤럭시 탭4 10.1 1280 X 800 갤럭시 탭 S2 1536 X 2048 G2 108.. 2019. 2. 7.
타원형태로 둥글게 코딩하기 가로 반지름 크기와 세로 반지름 크기를 함께 지정한다.border-top-left-radius: border-top-right-radius:border-bottom-right-radius:border-bottom-left-radius:border-radius: / border-radius 이용할시에는 사이에 "/" 붙여준다. 둥근박스 예시 12345678910111213141516171819202122232425 둥근박스 div { width:200px; height:100px; display:inline-block; margin:15px; border:2px solid black; background:#8055f3; } .round1 { border-top-left-radius:10px 50px; } .. 2019. 2. 5.
728x90
반응형
LIST

티스토리툴바