전체 글(295)
-
Day75 - [js]노드의 전체선택 , 선택삭제
이번에는 java script 를 이용해서 체크박스를 이용한 전체선택 및 선택삭제 에 대해서 알아 봅시다. 전체선택 위 그림에서, 왼쪽위를 누르면 아래의 체크박스에도 선택이 되도록 할 건데요 먼저, 틀을 만들어 줄게요 번호 이름 내용 1 홍길동 안뇽하세용~ 2 강감찬 안뇽하세용~ 3 홍길자 안뇽하세용~ 4 신사임당 안뇽하세용~ 5 이순신 안뇽하세용~ 방금 노드회전 할 때 알아본 함수들을 이용하면 됩니다. 전체선택 체크 박스를 클릭하면, 아래의 체크박스들을 가져와서, checked 속성을 true 로 바꿔주면 됩니다. 이 때, 만약 전체선택 체크 박스가 클릭되어 있는 경우에 다시한번 누른 경우인지 확인해서 if else 문으로 만들어 주면 됩니다. 선택삭제 위의 체크박스들이 선택되어 있는 행을 삭제할 건데..
2021.06.02 -
Day75 - [js]노드회전
이번에는 java script를 사용해서 노드가 회전하는 걸 만들어 봅시다. 노드회전 위와 같이 있을 때, 이동에 있는 버튼들을 클릭하면 버튼에 해당하는 위치로 이동하도록 만들어 볼거에요 먼저 테이블을 만들어 주세요. 이동 번호 이름 내용 ↑ ↓ 1 홍길동 안뇽하세용~ ↑ ↓ 2 강감찬 안뇽하세용~ ↑ ↓ 3 홍길자 안뇽하세용~ ↑ ↓ 4 신사임당 안뇽하세용~ ↑ ↓ 5 이순신 안뇽하세용~ 위와 같은 기능을 구현하려면, 안에 있는 의 위치를 변경해주면 되겠죠? 그러면 이제부터 노드를 회전시키기 위한 함수들을 알아 봅시다. parentElement : 순수한 부모요소(노드) parent : 부모요소(노드) text 포함 특정 태그(노드)에 접근해서 부모요소를 가지고오면 됩니다. 뒤에, Element가 붙는..
2021.06.02 -
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 -
Day73 - [js]DOM(Document Object Model) , css속성 변경
이번에는 java script의 DOM 에 대해서 알아 봅시다 DOM DOM 은 Document Object Model 라고 하는데, 문서 객체 모델 이라고 하는, Document 객체를 의미 합니다. DOM 은 Element(요소) 들의 선택, 삭제, 생성, 수정 등을 위해서 사용하는 것 입니다. Document 에는 위와 같이 특정 태그 및 요소들을 선택하는 방법이 있습니다., ※ 빨간색은 자주 사용하는 것 위와 같은 코드가 있을 때, 특정 태그를 가져오는 방법으로 id를 사용해서 가져왔었죠? 해당 방법은, id 가 btn1 인 태그를 가져오는 방법 입니다. 이 태그를 가져와서, onclcik 이벤트를 걸어 줍니다. 그리고 위에 있는 input 태그 type="checkbox" 를 전부 가져올 건데요..
2021.05.31 -
Day72 - [js]이벤트
이번에는 java script 의 이벤트에 대해서 알아 봅시다. 이벤트 이벤트는 어떠한 동작을 의미 합니다. 예를 들면, 마우스 클릭 같은 것. 이벤트의 종류 이벤트의 종류에는 여러가지가 있지만, 중요한 몇가지와, 사용하는 것만 알고 있으면 됩니다. 보통, click , load , keyup 정도를 많이 사용한다고 해요. 이벤트를 사용할 때는 앞에 on 을 붙여서 사용해주면 됩니다. ex) onclick ※ 이를 이벤트 핸들러 라고 합니다. 이벤트의 모델 이벤트의 모델에는 인라인 모델, 기본 모델, 표준 모델이 있습니다. 인라인 모델 인라인은 태그안에 직접 이벤트를 명시해서 사용하는 방법 입니다. 이렇게, 태그 안에 onclick 을 했을 경우 어떤 함수가 동작을 하도록 해주고, 안에서 함수를 정의 하..
2021.05.30