74일차(2)
-
Day74 - [js]태그의 추가 및 삭제
이번에는 java script 를 이용해서 태그를 만들고, 추가하는 방법과 삭제하는 법에 대해서 알아 봅시다. 태그의 추가 태그를 추가하는 것은 노드의 추가 라고도 하는데요, 태그를 만들고, 해당 태그의 자식 요소를 연결한 후 본문에 있는 특정 공간(태그) 에 붙여 줄 겁니다. 즉. 아래의 inner1 이라는 div 가 있을 때, inner1 이라는 버튼을 누르면 비어있는 안쪽 공간에 노드를 추가할 겁니다 먼저 해당 버튼을 가지고 와서, click 을 했을 때 이벤트를 만들어 줍니다. 그리고, inner1 의 태그 div 를 가지고 와서, 해당 안쪽 .innerHTML 에 아래처럼 작성을 해줍니다. html 파일을 브라우저 창으로 키고 F12 를 누른 후 버튼을 누르면 아래처럼 없던 태그 및 텍스트가 생..
2021.06.01 -
Day74 -[js]동적 기능을 하는 메뉴만들기
이번에는 java script를 이용해서 동적 기능을 하는 메뉴를 만들어 봅시다 위 처럼, 버튼을 가지고 있고 웹 에서 실행했을 때 메뉴가 열려 있는 상태로 실행이 되고, 버튼을 한번 더 누르면 메뉴가 닫히도록 만들 었고, 모바일 환경에서 할 경우에 반대로, 버튼이 있고, 한번 더 누르면 메뉴가 열리도록 구현을 했습니다 메뉴의 배경색이나 글씨색, padding 등이 필요하기 때문에 css 를 간단하게 만들었습니다. * {margin: 0; padding: 0; list-style: none;} .sidenav { position:fixed; left: 0; top: 50px; width: 200px; height: 100%; background-color: #263238; z-index: 30; padd..
2021.06.01