Setup & Example/HTML CSS JavaScript 3

[HTML/CSS/JavaScript] 실시간 시계 제작

Javascript를 이용해서 웹에 실시간 시계를 구현하는 코드를 설명하겠다. 위 시계는 자바스크립트를 이용한 코드로 구현된 시계이다. 세 가지 방법에 대해서 소개하겠다. if 조건문을 이용하여 만드는 방법 조건부 연산자를 이용하여 만드는 방법 조건부 연산자와 백틱을 이용하여 만드는 방법 세 가지 방법은 대부분의 틀은 동일한데 시각 형식(YYYY-MM-DD HH:MM:SS)을 출력하기 위해 전처리 과정을 거칠 때만 다르다. 따라서 우선 첫 번째 방법으로 만드는 코드를 설명하고, 조건부 연산자를 이용하는 방법과 백틱까지 이용하여 만드는 방법을 추가적으로 소개하겠다. 먼저 html 파일에서 h1 스타일의 시계가 표현될 time 이라는 이름의 클래스를 할당한다. 그리고 우리가 원하던 YYYY-MM-DD HH:..

[HTML/CSS/JavaScript] 관리자도구(F12)를 통해 버튼 작동 URL 확인하기

관리자도구(F12)를 통해 웹 상의 특정 버튼이 실행하는 URL 주소를 확인하는 방법에 대해서 소개하겠다. 기존에 window.location.href 를 통해서 웹페이지의 url 값을 가져올 수 있지만, 웹사이트에 내장된 버튼을 클릭할 때 특정 행동을 실시하는 경우, 버튼이 불러오는 URL을 알 수 없는 경우가 있다. 이 방법은 위처럼 실행 URL을 확인하기 어려운 경우에 사용할 수 있다. 예를 들어서 네이버 책에서 4차산업혁명을 검색했을 때, 해당 웹의 url은 링크 주소에서도 확인 할 수 있고 이를 복사하면 된다. URL 복사 값 https://book.naver.com/search/search.naver?sm=sta_hty.book&sug=&where=nexearch&query=4%EC%B0%A8..

[HTML/CSS/JavaScript] window.open() 을 이용해서 특정 웹페이지를 여는 버튼 만들기

html 파일에서 버튼을 만들고 Javascript를 이용해서 특정 웹페이지를 띄우는 코드를 설명하겠다. naverButton.html 1행 - Webpage 라는 이름의 버튼을 만들고, 버튼을 누를 경우 openWeb() 함수 실행 4~6행 - openWeb() 함수 정의 window.open() 은 window.open("열고자 하는 URL", "사용자 지정 URL명", "옵션") 으로 구성된다. 옵션에는 top : 모니터 상단으로부터 떨어진 거리 ex) top=100 : 모니터 상단으로부터 100px 떨어진 거리에서 새 창 열기 left : 모니터 좌측으로부터 떨어진 거리 ex) left=100 : 모니터 좌측으로부터 100px 떨어진 거리에서 새 창 열기 width : 새 창의 폭 ex) widt..

728x90
반응형