본문 바로가기
728x90
300x250
SMALL

Front-end/HTML78

햄버거메뉴 코딩으로 만들기 이미지 없이 코딩으로 표현한 햄버거 메뉴 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.
반응형웹 모바일 해상도 아이폰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.
에밋 키워드 emmet 코딩을 빠르게 해주는 에밋 키워드 https://docs.emmet.io/cheat-sheet/ 위에 사이트에서 확인가능하다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112div#wrap>div#*3----> .container--> div#*4--> ul>li*4>a[href="#"]{icon$} icon1 icon2 icon3 icon4 ul>.. 2019. 1. 31.
728x90
반응형
LIST