agencies

브라우저의 정책 상으로 autoplay가 되지 않기에, 마우스 클릭 이벤트를 주어 happysong을 재생하도록 했습니다. ※ 요약 : 이 코드는 움직이는 고양이 이미지와 음악을 재생하는 웹 페이지입니다. title : 웹 페이지 제목을 Happy Cat으로 지정합니다. id = move : GIF 이미지 id를 move로 설정하여, 실행할 애니메이션을 지정하도록 합니다. move라는 이름을 가진 애니메이션을 생성합니다. transform: translate(X , Y); 요소를 주어진 X축과 Y축 방향으로 이동합니다. document.addEventListener 를 통해 클릭 이벤트가 발생할 때 오디오가 재생하도록 합니다. *오디오의 id는 play로 지정하여 document.getElementByI..

HTML의 드롭다운 네비게이션을 만들어 보았습니다. MENU1에 커서를 올리면 위와 같이 나타나게됩니다. (소스코드) MENU1 SUB1 SUB1 SUB1 SUB1 MENU2 SUB2 SUB2 SUB2 SUB2 MENU3 SUB3 SUB3 SUB3 SUB3

text-overflow 속성 (넘치는 텍스트 표기하기) clip : 넘치는 텍스트를 자릅니다. ellipsis : 텍스트가 잘렸다는 의미로 밑 줄임표 표시 텍스트 들여쓰기 text-indent 속성을 이용합니다. 배경 이미지 고정하기 background-attachment 속성을 이용합니다. 1 1 1 1 1 1 1 1 1 1 1 1 1 1 드롭다운 내비게이션 만들기 * 드롭다운 메뉴란 메인 메뉴 위로 마우스 포인터를 올려놓으면 서브 메뉴가 메인 메뉴 아래로 펼쳐지는 메뉴를 의미합니다. 메뉴를 항상 화면에 표시하지 않고 필요할 때 펼쳐볼 수 있어 편리합니다. ul : 이 스타일은 요소에 적용됩니다. list-style-type:none 기본 목록 마커를 제거합니다. margin:0; padding:0 ..

출처 : 국가정보원(nis.go.kr) 밝은 이미지 부분을 클릭하면 nis로 이동하고, 어두운 이미지 부분을 클릭하면 ncsc로 이동하는 이미지 하나에 링크를 여러 개 연결해보는 미션이 주어졌습니다. keyword : 이미지 맵 - 이미지 맵이란? 이미지에서 링크로 사용할 영역을 표시하는 것입니다. 우선 선택할 부분의 좌표를 알아야 하는데 이미지 픽셀의 좌표는 윈도우 그림판 같은 프로그램을 이용하면 쉽게 알 수 있습니다. 남산타워를 클릭하면 페이지가 이동될 수 있도록 합니다. 좌측 하단에 위치 px 정보가 나타납니다. (좌측 상단 모서리 부분의 좌표값을 확인합니다, 그리고 우측 하단 모서리 부분의 좌표값을 확인합니다) 빨간색과 파란색 부분에 위치한 남산타워에 링크가 걸리게 되었습니다.