본문 바로가기

Front71

[Javascript] window.onload() 함수 사용 / 콜백함수 / addEventListener() widow.onload() 함수 자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백함수이며, 웹 페이지의 모든 요소들이 로드된 후 호출되며, 웹 페이지에서 여러번 사용해도 window.onload() 함수는 하나만 적용됩니다. 이를 대체할 수 있는 방안은 글 아래쪽에 작성해보겠습니다. 아래와 같이 코드를 작성했습니다. Hello world 위와 같은 코드의 실행순서는 자바스크립트의 document.getElementById( 'pTag1' )가 p 태그의 id인 pTag1이 생성되기 전에 실행되므로 에러가 발생하며, style.color.blue가 적용되지 않습니다. 에러 내용을 단어를 통해 뜻을 유추해본다면 정의되지 않은 개체의 속성을 읽을 수 없다.하려고 한다. 그렇다면 페이지가 로드되면 .. 2022. 9. 24.
[Jquery] 이벤트 등록 메서드/ 로딩 / 마우스 / 키보드 / load() / ready() / click() / hover() / keyup() 이벤트 등록 메서드란? 이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하며, 이벤트 핸들러는 이벤트가 발생했을 떄 실행되는 코드를 말함. 이벤트 등록 메서드의 종류 구분 종류 설명 로딩 이벤트 load() 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트 발생 ready() 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트 발생 마우스 이벤트 click() 선택한 요소를 클릭했을 떄 이벤트 발생 hover() 선택한 요소에 마우스 포인터를 올렸을 떄와 벗어났을 떄 이벤트 발생 키보드 이벤트 keyup() 선택한 요소에 키보드에서 손을 떼었을 떄 이벤트 발생 2022. 9. 24.
[javascript] <input type ="checkbox">의 checked 확인 / checkbox 전체 선택 / 전체 선택 취소 / 부분 선택 / getElementsByName() / onclick() 아래와 같은 체크 박스와 버튼이 있습니다. 전체코드는 아래와 같습니다. 사과 수박 딸기 축구 야구 배구 우선 어떻게 동작하는지 보겠습니다. 박스 체크 확인 버튼을 누른 후 사과, 수박, 딸기 중 체크가 되어있지 않는 박스에 체크되지 않았다고 경고창( alert)을 뛰웁니다. * 버튼 누르기 전 * 버튼 누르기 후 // getElementById를 통해 접근 후 onclick 이벤트 관련 함수 정의 document.getElementById( "matchBtn" ).onclick = function() { let fruitCheckBtn = document.getElementsByName('1row'); // for문을 통해 1 ~ 3 체크박스의 checked를 확인 // checked 상태라면 conso.. 2022. 9. 23.
[Javascript] checkBox에 체크된 value 값 console 출력 / checked.value 1)사과 선택 후 "내용 확인" 버튼 클릭시 console 창 value 값 출력 2) 수박 선택 후 "내용 확인" 버튼 클릭시 console 창 value 값 출력 3) 딸기 선택 후 "내용 확인" 버튼 클릭시 console 창 value 값 출력 * 전체 선택 후 "내용 확인" 버튼 클릭시 console 창 value 값 출력 전체 코드 사과 수박 딸기 2022. 9. 23.
[Javascript] 간단하게 구현한 라이트 모드(light)와 다크(dark) 모드 초기 화면 모드 변환(day.night) button 클릭 시 모드 변환(day.night) button 클릭 시 전체 소스 코드 2022. 9. 23.
[CSS] display: gird 를 이용한 계산기 디자인 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다. 아래와 같은 계산기를 CSS Grid를 활용해서 디자인을 해보겠습니다. html 소스코드는 아래와 같습니다. 아래와 같이 출력됩니다. display: grid를 선언해보겠습니다. body form { display: grid; } 컨테이너 요소( )를 지정해서 grid를 선언한다면 자식 요소들은 아이템(item)이 됩니다. grid를 통해 아이템들은 block이 되면서 위와 같이 출력됩니다. 이제 gird-template를 통해 row(가로)와 column(세로)를 정해보겠습니.. 2022. 9. 22.

티스토리툴바