프로그래밍44 HTML, CSS 및 JavaScript를 사용하여 웹 아날로그 시계를 만드는 방법 HTML, CSS 및 JavaScript를 사용하여 웹 아날로그 시계를 만드는 방법 bing GPT로 생성한 AI코딩 아래는 HTML, CSS 및 JavaScript를 사용하여 아날로그 시계를 만드는 방법입니다. bing GPT로 질문하여 얻은 대답으로 만든 웹 아날로그 시계입니다. HTML, CSS 및 JAVASCRIP를 사용하여 만들어 달라고 했습니다. 위의 코드는 HTML, CSS 및 JavaScript를 사용하여 아날로그 시계를 만드는 방법을 보여줍니다. 이 코드를 사용하여 웹 페이지에 아날로그 시계를 추가할 수 있습니다. 시계의 크기와 색상을 변경하려면 CSS를 수정하십시오. 시계의 시, 분 및 초를 조정하려면 JavaScript를 수정하십시오. 아래는 웹 코딩으로 작업된 아날로그 시계 적용 시.. 프로그래밍/자바스크립트 2023. 11. 24. 안드로이드 스튜디오 설치하는 방법 이제 스마트폰 시대라해도 과언이 아닐정도로 스마트폰이 발전하였습니다. 스마트폰 OS(운영체체)는 애플의 IOS와 구글의 ANDROID 양파전으로 흐르고 있는데요. 많은 개발자들이 이 스마트폰 개발자로 뛰어들고 있습니다. 기존에는 이클립스에서 안드로이드 개발 작업을 했지만 이제 안드로이드 스튜디오로 개발 할 것을 권장하고 있습니다. 이미 많은 개발자들이 안드로이드 스튜디오로 개발을 하고 있습니다. ANDROID STUDIO(안드로이드 스튜디오)설치 방법에 대해서 알아보도록 하겠습니다. (참고로 이 포스트는 윈도우7 환경에서 작업 되었습니다.) https://developer.android.com/studio/index.html?hl=ko 안드로이드 스튜디오 설치파일을 위 사이트에서 다운 받습니다. 다운받기.. 프로그래밍/안드로이드 2017. 11. 20. [HTML] 이미지 태그 - <img></img> 이미지 태그 HTML에 사진(이미지)를 삽입할 수 있다. 이미지를 웹에 있는 이미지 또는 서버에 있는 이미지를 불러와 내가 원하는 곳에 삽입할 수 있다. 태그 속성 src : 이미지의 URL 또는 파일 경로를 입력한다. alt : 이미지의 설명을 설정한다. height : 이미지의 세로 높이를 설정한다. width : 이미지의 가로 너비를 설정한다. align : 이미지의 정렬 또는 이미지 기준으로 텍스트 정렬을 설정한다. - (left, right, top, middle, bottom) border : 이미지 테두리 두께를 설정한다. hspace : 이미지의 좌우 여백을 설정한다. vspace : 이미지의 상하 여백을 설정한다. title : 이미지의 말풍선을 설정한다. 기본 이미지 삽입. src="h.. 프로그래밍/HTML 2017. 9. 6. [HTML] 목록 태그 - <ol><ul><dl> 목록 태그 순서대로 또는 순서 없이 리스트 목록을 만들 때 사용하는 태그이다. 태그 태그 태그 태그 ol 은 Ordered List 의 약자이다. 순서대로 리스트 목록으로 만들 때 사용한다. 각 하위 목록은 태그로 감싼다. type (= A, a, i, I, 1) 속성과, start(= 시작할 숫자) 속성으로 여러가지 순서 표기와 순서를 지정할 수 잇다. - 속성값 type="1" start="1" 첫번째 리스트 두번째 리스트 세번째 리스트 - 속성값 type="a" start="1" 첫번째 리스트 두번째 리스트 세번째 리스트 - 속성값 type="A" start="1" 첫번째 리스트 두번째 리스트 세번째 리스트 - 속성갑 - type="i" start="1" 첫번째 리스트 두번째 리스트 세번째 리스트 .. 프로그래밍/HTML 2017. 9. 5. [HTML] 문단/문장에 사용되는 태그들 문단/문장에 사용되는 태그들 HTML태그로 문장의 중요 글자를 굵게, 또는 이텔릭체 글꼴로, 또 어떤 때는 밑줄 등의 표시 등을 해야 할 때가 있다. 그런 여러가지 태그 사용법에 대해 알아본다. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 태그 를 사용한 태그 - 텍스트가 굵게 표시된다. 를 사용한 태그 - 텍스트가 굵게 표시된다. 태그 를 사용한 태그 - 텍스트가 굵게 표시된다. 를 사용한 태그 - 텍스트가 굵게 표시된다. 태그 를 사용한 태그 - 이텔릭체로 표시된다. 를 사용한 태그 - 이텔릭체로 표시된다. 태그 를 사용한 태그 - 이텔릭체로 표시된다. 를 사용한 태그 - 이텔릭체로 표시된다. 태그 를 사용한 태그 - 글에 밑줄이 표시된다. 를 사용한 태그 - 글에 밑줄이 표.. 프로그래밍/HTML 2017. 9. 4. [HTML] marquee와 그 속성 - <marquee></marquee> 태그 html 태그 공부 중 가장 관심 많은 태그가 아닌가 생각된다. 간단한 작업으로도 눈에 확 띄는 태그라서 그런가 싶다. 태그는 많이 보았다싶이 텍스트를 좌우상하로 움직이는 태그이다. 그러면 좀 더 자세한 사용법을 알아본다. (여기서 텍스트의 이동을 스크롤이라고 표현하겠다.) 1. width 2. height 3. scrolldelay 4. scrollmount 5. bgcolor 6. behavior 7. direction 8. loop width : 스크롤 영역의 가로 넓이를 설정한다. (단위 : px) marqee width="100px" 입니다. marqee width="100px" 입니다. marqee width="200px" 입니다. marqee width="200px" 입니다. marqe.. 프로그래밍/HTML 2017. 9. 3. [HTML] font 태그 속성 - <font></font> 태그 태그는 글자(텍스트)의 글꼴, 글자색, 글자 크기를 지정할 수 있다. HTML5 에서는 태그가 지원하지 않는다고 한다. 하지만 아직 까지는 많이 사용하고 있으므로 알고 있어야 한다. 속성 face : 글꼴을 입력한다. - 굴림체, 궁서체, 돋움체, 바탕체 중에서 선택할 수 있다. color : 글자색을 입력한다. - "#000000 ~ #FFFFFF" 처럼 (16진수 값 6자리) 으로 색을 선택할 수 있다. size : 글자 크기를 입력한다. - 기본값은 3이고, 1~7 까지의 크기를 선택할 수 있다. 아래는 샘플 소스이다. font 태그 속성 적용없는 글 입니다. font 태그 속성중 'face' 속성에 '바탕체'를 입력한 글 입니다. font 태그 속성중 'color'에 'green'을 입력한 .. 프로그래밍/HTML 2017. 9. 2. [HTML] 문단 태그 -<br><p><hr><h> 문단 태그 HTML 태그중에 개행 혹은 문단 개행을 할 때 쓰이는 태그에 대해 알아본다. : 개행(줄바꿈) 사용된다. 시작태그/끝태그 로 이루어지지 않아 또는 로 사용한다. 속성은 없다. : 문단을 나눌때 사용된다. 문단을 정렬할 때 자주 사용된다. 속성 align : 문단 정렬 속성 - left, right, center 값이 있다. 속정 미입력시 기본으로 left속성값을 가진다. : 문단과 문단을 나눌 때 수평선을 그려준다. 속성 width : 수평선의 길이(px이나 %)을 정한다. align : 정렬방식(left, right, center)를 정한다. color : 수평선의 색상값을 정한다. size : 수평선의 굵기(px)를 정한다. : 해드라인 같은 제목을 표시할 때 많이 사용된다. 1~6까지 .. 프로그래밍/HTML 2017. 9. 1. [HTML] <body></body>태그 속성에 대해 알아본다. HTML 태그 사용법 HTML 태그는 기본적으로 크게 태그와 태그로 나누어져 있다. 그 중에 태그가 본문 내용으로 쓰이는 부분이다. 이 태그의 속성에 대해 알아본다. 태그에 속성을 추가하는 방법은 아래와 같다. 본문 내용.. 태그 속성 background : 배경이미지를 출력한다. 배경이미지의 파일 경로나 URL경로값을 입력한다. bgcolor : 배경색을 출력한다. 색상값을 입력한다. link : 링크가 있는 텍스트의 클릭을 하기 전 색상값을 입력한다. vlink : 이미 방문을 한적이 있는 링크의 텍스트 색상값을 입력한다. alink : 링크가 있는 텍스트를 클릭하는 순간의 색상값을 입력한다. text : 글의 색상값을 입력한다. 색상값을 입력할 때에는 "#000000 ~ #FFFFFF" 까지의 형태.. 프로그래밍/HTML 2017. 8. 31. [자바스크립트] 예외 처리 - try catch finally 문 예외 처리 프로그래밍을 하다 보면 예상치 않은 곳에서 오류가 발생할 때가 있다. 그 오류가 문법적인 오류일 때도 있고, 정상적인 문법인데도 오류가 발생할 때가 있다. 에러 (Error) - 문법적 오류일 때 발생하는 오류. try{}catch{} 문으로 해결할 수 없는 오류. 예외 (Exception) - 정상적인 문법인데 프로그램 실행 중 발생하는 오류. try{}catch{} 문으로 해결할 수 있는 오류. 예외 처리 방법 프로그램에서 예외가 발생하면 프로그램이 멈춰버리는 상황이 발생한다. 그래서, 프로그램에서 예외 발생시 이를 처리하기 위해 try{}catch{}finally문을 사용한다. 1. try{}문 : 예외가 발생될거라는 의심가는 부분에 try{}문으로 감싸고, 2. catch{}문 : 그 .. 프로그래밍/자바스크립트 2017. 8. 30. [자바스크립트] 문서 객체 가져오기 문서 객체 가져오기 정적인 HTML 를 자바스크립트를 사용하여 동적으로 가져온다. getElementById(id) 매개변수 id가 태그 속성의 id와 같은 값일 때 문서 객체를 가져온다. 한번에 하나씩만 가져올 수 있다. getElementsByName(name) 매개변수 name가 태그 속성의 name과 같은 값일 때 문서 객체를 가져온다. 동일한 값이 여러개 있으면 배열로 가져온다. getElementsByTagName(tag) 매개변수 tag가 태그 와 같은 값일 때 문서 객체를 가져온다. 동일한 값이 여러개 있으면 배열로 가져온다. querySelector(선택자) 가장 처음 선택되는 문서 객체를 가져온다. (#id)에서 id와 같은 id를 가진 태그를 찾는다. querySelectorAll(선.. 프로그래밍/자바스크립트 2017. 8. 29. [자바스크립트] window.moveBy() window.moveTo() - window 이동하기 윈도우 이동 - window.moveTo(x, y) | window.moveBy(x, y) window객체의 멤버 메소드(moveTo(), moveBy())로 윈도우를 이동 시킨다. window.moveTo(x1, y1) : 윈도우를 화면 (x1, y1) 에 위치시킨다. window.moveBy(x2, y2) : 윈도우를 화면 현 위치에서 (x2, y2) 만큼 이동시킨다. 사용 예 [script] // 윈도우 객체를 생성한다. var childWindow = window.open('','','width=200px, height=200px'); childWindow.document.write('window move'); // 윈도우 시작 좌표 - 단위 px childWindow.moveTo(100, 100.. 프로그래밍/자바스크립트 2017. 8. 28. 이전 1 2 3 4 다음 💲 추천 글