웹 프로그래밍/기초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일 chatGPT와 코드잇 강의를 보며 공부.개인적으로 HTML - CSS - JS 순으로 공부하는게 좋을 것 같아서 HTML, CSS를 병행하고 JS는 차차 공부해볼 생각.우선, 평소에 궁금해 했던 내용들 먼저 질문 1.Q. html에선 태그를 왜 붙여야할까?A. 가독성, 유지보수도 있지만 검색엔진에 효과적으로 노출될 수 있음. SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정 이라고 함. 2.Q. 이 부분에서 으로 수정했더니, css파일이 제대로 링크되지 않았어. 'rel'이 의미하는건 무엇이고, rel에는 정해진 이름들로만 대입해야하는거야?A. 네, rel 속성은 HTML 문서와 외부 리소스의 관계를 정의하는 속성입니다. rel 속성에 사용되는 값은 미리 정의된 값.. 2024. 5. 18. 이전 1 다음
