분류 전체보기84 키워드 : keyword 키워드 : 컴퓨터 프로그램용으로 고정된 예약어이자 식별자로 사용할 수 없는 단어 2024. 6. 8. [HTML/Javascript] 자바스크립트로 HTML의 요소에 자식 요소 추가하기 자바스크립트로 HTML 요소에 자식 요소를 추가할 수 있다.부모요소.appendChild(자식으로 넣을 요소)버튼을 누르는 등의 이벤트가 발생했을 때, 새로운 요소를 추가함으로써 사용자에게 새로운 정보를 보여줄 수 있을 것 같다.const parent = document.getElementById("parent_element");const childElement = document.createElement("div");childElement.innerText = "요소가 새로 추가됐습니다!"parent.appendChild(childElement);다양한 활용 예시알림 메시지 표시사용자가 버튼을 눌렀을 때 화면에 알림 메시지를 표시하는 기능새로운 입력 폼 추가사용자가 버튼을 눌렀을 때 새로운 입력 포을 .. 2024. 6. 8. [HTML/Javascript] 🖱️클릭 이벤트 처리 하는 방법 이나 나 무엇이든, html로 표현하여 웹에 보여지는 것들은 '클릭 이벤트'를 처리할 수 있다.이벤트리스너 설정하기(addEventListener)*HTML*Javascriptdocument.getElementById('id 이름').addEventListener('click', 실행할 함수);ex) document.getElementById('cell1').addEventListener('click', colorCilckedLocation)document.getElementById('cell1').addEventListener('click', colorCilckedLocation) 코드에서 함수 뒤에 괄호로 매개변수를 주지 않는 이유는 함수의 참조를 전달하기 위해서이다.괄호를 붙이면 함수가 즉시 실행되.. 2024. 6. 1. 웹 프로그래밍 기초 4일 - 피아노 건반 구현🎹 '키보드로 피아노 건반 연주를 할 수 있으면 좋겠다'는 생각에서 시작한 아이디어 + 외부 혹은 내부 파일을 가져다가 써보는 작업을 해보고 싶었음 완성본 : https://jshman.github.io/web/simulator/inArmy/piano/index.htmlgithub source : https://github.com/Jshman/web/tree/main/simulator/inArmy/piano 추가하면 좋을 패치지금이 몇 octave인지 알 수 없어 불편함.낮은 음, 높은 음 건반을 한 세트 씩 더 만들어 두면 옥타브를 동시에 play하는 데에 지장이 크지 않을 듯함.>> 그러면 키로 매핑 하는데에 한계가 있음input 을 받아서 input 받은 순서대로 연주음의 길이(박자) 추가당장 떠오르는.. 2024. 5. 26. HTML - 클래스 특징 1. 클래스 이름을 여러 이름으로 쪼갤 수 있다.* HTML * CSS.key { width: 40px; height: 200px; border: 1px solid #000; margin: 1px; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; cursor: pointer;}.white { background: #fff; z-index: 1;}.black { background: #000; width: 30px; height: 120px; margin-left: -15px; margin-right:.. 2024. 5. 26. 웹 프로그래밍 기초 3일 - 스도쿠 채점기 3일차인 오늘은 스도쿠 채점기를 만들었다.위 링크를 누르면 새창에서 조금 더 쾌적하게 이용할 수 있을 것같다. 추가하면 좋을 패치 방향채점할 때 빈자리라도 넘어가도록 하고어디에서 겹치는 숫자가 있는지 칸에 색을 칠해서 check해주고채점하기 옆에 있는 '테스트', '초기화' 버튼들을 오른쪽으로 밀던가 쉽게 터지하기 어려운 곳으로 옮기면 사용자에게 더 좋은 채점기가 되지 않을까 싶다.각 요소들 설명숫자를 입력하는 각각의 칸에 id를 부여했다.채점, 테스트, 초기화를 할 때에 위치를 특정하기 위해서 필요하다. ... . .채점하기 버튼을 누르면 모든 칸을 돌면서 그 경우에 .. 2024. 5. 22. HTML - 하이퍼링크 걸기 1. 요소로 감싸기 로 감싸고, 웹 주소를 포함하는 href(Hypertext Reference) 속성을 사용해 생성한다. 단어들에 네이버 홈페이지로 이동하는 링크를 걸었습니다.결과 단어들에 네이버 홈페이지로 이동하는 링크를 걸었습니다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 로 감싸면 어떤 내용(h1, h2, ..., header, em, strong, tr, td, ...)이든 그 내용에 link를 걸 수 있다고 한다. 2024. 5. 22. 웹 프로그래밍 기초 2일 오늘은 갑자기 강화 시뮬레이터 이런게 만들어보고 싶어졌다.'웹에 만들면 좀 재밌을까' 싶었는데 훨씬 재밌는 것 같다.UI 만들 생각을 따로 안해도 돼서 좋고, 사지방이라는 한정적인 곳에서 비교적 덜 노력해도 더 이쁜 퀄리티를 뽑아낼 수 있기 때문이다. 240519 : 75% 확률로 +1이 되고 실패하면 0으로 초기화 된다. 2024. 5. 19. 이전 1 2 3 4 5 ··· 11 다음
