html만으로 아코디언 메뉴 만들기(details와 summary태그)
html만으로 아코디언 메뉴 만들기 HTML5에 새로 추가된 details, summary 태그만으로 아코디언 메뉴를 제작할 수 있다. 아코디언 메뉴란? 한번쯤은 다들 사용해봤을 것이다. 상단 메뉴가 있고 하단 메뉴는 최초에 숨겨져 있는 상태. 상단 메뉴를 클릭하면 하단 메뉴가 짜잔! 하고 보여지는 메뉴를 아코디언 메뉴라고 한다. 왜? 아코디언이냐고하면 이미지 보면된다. 하여튼 details와 summary를 사용해서 만들어보자. HTML summary가 없으면 타이틀이 '세부정보' html만으로도 가능합니다. 클릭하세요 02 아직 크롬, 파이어폭스만 가능합니다. 태그가 없으면 타이틀이 '세부정보'로 보여진다. CSS section { max-width: 500px;}details { background..
HTML 특수 문자 처리하기 HTML 문서에서는 특수 문자 처리를 해주지 않으면 오류가 발생하는 경우가 있다. 예를 들어 이런 식으로 사용하면 오늘의 날씨를 확인하려면 클릭하세요 >'>' 태그를 열고 닫을 때 사용하기 때문에 구문 에러를 발생시킨다. 또한 html 내에서 여러 번 띄어쓰기를 해도 적용되지 않으니, 이러한 특수 문자에 대한 처리가 필요하다.+태그 내에서는 작성 가능 [많이 쓰는 특수기호] > & & ⓒ © 띄어쓰기 &npsp; [사용법 예제]>오늘의 날씨를 확인하려면 클릭하세요&npsp;> [더 많은 특수 기호에 대한 엔티티 테이블 참고 링크들]Character Entity Reference Chart - http://dev.w3.org/html5/html-author/ch..
CSS animate 가위바위보 연속 움직이는 애니메이션 만들기
크롬에서만 확인했고 타 브라우저 안될 수 있습니다. (ie 하위는 당연히 안됩니다.) 비율을 맞춘 이미지가 준비물로 필요합니다. 제가 사용한 이미지는 무료 icon 사이트에서 가져왔고 찾아보면 많습니다. (출처 http://www.freepik.com) 저는 step을 3등분해서 보여줄거라 다운로드 받은 이미지를 포토샵으로 비율을 맞춰줬습니다. 사용한 이미지 예시↓ CSS .hands{ // 이건 애니메이션 보여지는 크기 width:125px; height: 175px; // 연결된 이미지 bg로 깔고 이미지 크기 정함. background:url('/images/hands2.jpg')no-repeat; background-size:384px; // 0.5초동안 step 3으로 나누어서 무한 실행 ani..
유튜브 영상 너비(width)값에 맞추어 높이(height)값 비율 맞추기 가로 세로 비율을 이용하여 스타일을 적용하는 방법입니다. html css .wrap{ width:500px; } .content{ position:relative; padding-top:56%; width:100%; } iframe{ position:absolute; top:0; left:0; width:100%; height:100%; } 적용 사항은 아래와 같습니다.