앱 만들기400

• 

  HTML 이란? HTML 이란? Hyper Text Markup Langauge 라는 뜻 입니다. Hyper 는 문서를 연결해준다는 의미이며, 마크업은 표시한다는 뜻 입니다. 즉, 인터넷 상에서 사용되는 웹 문서를 손쉽게 연결해주며, 표시해주는 언어라는 뜻 입니다. 웹페이지는 텍스트 , 이미지, 사운드, 영상 자료등으로 이루어지죠. 이런 모든 리소스들의 표시해준다는 의미 입니다. 웹이페이지를 표시 하기위해서는 태그 라고 불리는 HTML 언어를 사용하여서 페이지를 구성합니다. 예를 들면 하기와 같습니다. h1 이 가장 큰 제목 입니다 h2 두번째로 큰 제목 입니다 h3 세번째로 큰 제목 입니다 h4 네번째 제목 크기 입니다 h5 다섯번째 제목 크기 입니다 h6 가장 작은 제목 크기 입니다 태그로 구성된 웹페이지가 브라우저.. 앱 만들기/HTML5 study 2023. 1. 3.

• 

  자바스크립트 콘솔창 단축키 자바스크립트 콘솔창 은 디버그 및 여러용도로 사용될 수 있습니다. 가장 많이 사용되는 크롬 브라우저를 예시로 들겠습니다. 물론 파이어폭스 및 기타 브라우저도 유사하니 응용하면 되겠습니다. 브라우저가 열린상태에서 Ctrl + Shift + J 혹은 F12 번을 누르면 콘솔창이 열립니다. 콘솔창에서는 직접 자바스크립트 코드를 실행 및 테스트 해볼 수 있습니다. 간단한 연산식도 바로 확인 가능하며, 자바스크립트 함수들도 실행해 볼 수 있습니다. 물론, 콘솔창은 앱 구동시 상황 및 트레이스를 할수 있는 디버그 활용 용도로 가장 많이 사용됩니다. 오늘은 브라우저 콘솔창 단축키 를 알아보았습니다. 감사합니다. 앱 만들기/JavaScript study 2023. 1. 2.

• 

  자바스크립트 로그 함수 자바스크립트 에서 로그를 출력하는 방법을 알아봅니다. 로그는 디버깅 시에 매우 유용한 함수 입니다. 사용방법은 하기와 같습니다. console.log() 인자값으로 스트링 및 변수를 출력할 수 있습니다. 다만 태그는 동작하지 않고 스트링으로 출력 됩니다. console.log("입력받은 폰번호는" + phone + " 입니다."); 콘솔 로그 창에 로그가 나오는 예제를 만들어 봅니다. 1. 콘솔 로그를 위해서 자바스크립트 파일을 생성합니다. var phone = prompt('전화번호를 입력하세요', '010-1234-5678'); document.write("입력받은 전화번호는" + phone + "입니다"); console.log("입력받은 폰번호는" + phone + " 입니다."); - 지난시간에.. 앱 만들기/JavaScript study 2023. 1. 1.

• 

  자바스크립트 출력함수 document.write() 웹페이지에 바로 출력을 할때 사용하는 함수 doucument.write() 입니다. 디버그 로그를 사용하지 않고, 간략히 값들을 웹페이지에 출력할 수 있는 함수 입니다. 사용법은 하기와 같습니다. document.write() 인자 값으로 태그 혹은 변수 및 string 으로 출력내용을 기재할 수 있습니다. document.write("입력받은 전화번호는" + phone + "입니다"); 인자는 "" 쌍다옴표 와 '' 작은 따옴표를 모두 지원합니다. 관련 예제를 만들어 봅니다. 1. 필드 팝업창으로 값을 입력받는 자바스크립트 파일을 만듭니다. var phone = prompt('전화번호를 입력하세요', '010-1234-5678'); document.write("입력받은 전화번호는" + phone + ".. 앱 만들기/JavaScript study 2022. 12. 31.

• 

  자바스크립트 입력 팝업창 만들기 자바스크립트 함수 중 입력필드를 가진 팝업창을 만들어 봅니다. 바로, prompt() 함수입니다. 영어로 prompt라는 뜻은 입력을 받을 준비하고 있는 컴퓨팅 상태를 의미합니다. 결과를 먼저 본다면 하기와 같습니다. 예제를 만들어 봅니다. 1. 자바스크립트 파일을 만듭니다. var phone = prompt('전화번호를 입력하세요', '010-1234-5678'); prompt() 함수 대소문자에 주의해야 합니다. 인자값은 "" , '' 두 개다 지원합니다. 두 번째 인자값은 필드영역에 들어갈 기본 값입니다. 두 번째 인자값이 없을 때는 필드가 공란으로 보입니다. 2. HTML 파일에서 자바스크립트 파일을 연결합니다. 확인 버튼을 선택하면, 필드에 입력된 값이 phone 변수에 저장이 됩니다. 해당 값.. 앱 만들기/JavaScript study 2022. 12. 30.

• 

  자바스크립트 confirm 팝업 함수 지난 시간 자바스크립트 함수 중 기본 팝업창을 띄우는 alert() 함수를 알아보았습니다. 이번 시간에는 확인, 취소 버튼이 있는 팝업창인 confirm() 함수입니다. 확인, 취소에 따른 동작을 구현하기에 좋은 팝업 창입니다. 사용법입니다. 자바스크립트 파일을 만들고, 하기처럼 코딩합니다. alert() 팝업 창과 매우 유사합니다. 역시, 대소문자 구별에 주의를 해야 합니다. confirm("confirm 팝업창을 종료하시겠습니다까?"); 해당 파일과 연결되어 있는 HTML 파일을 실행시키면 하기와 같은 결과를 얻을 수 있습니다. 참고로, 확인 및 취소 버튼 동작에 따른 값을 받고 싶을때는 하기처럼 코딩 하면 됩니다. var result = confirm("confirm 팝업창을 종료하시겠습니다까?").. 앱 만들기/JavaScript study 2022. 12. 29.

• 

  자바스크립트 팝업창 함수 자바스크립트 함수 중 기본 팝업창을 띄우는 alert() 함수 입니다. 간단한 팝업 메뉴를 보여줄 때 사용하면 되겠습니다. 사용법 입니다. 자바스크립트 파일을 만들고, 하기처럼 코딩 합니다. 단 한 줄 이면 됩니다. [merryChristmas.js] alert("alert 팝업창 입니다."); 해당 파일과 연결되어 있는 HTML 파일을 실행 시키면 하기와 같은 결과를 얻을 수 있습니다. alert 는 "알리다" 라는 뜻을 가진 영단어 입니다. 뜻 그대로, 알림 팝업창을 호출하고 싶다면 alert() 함수를 사용하면 됩니다. 참고로, 자바스크립트에서는 대소문자를 구별하기에 Alert() 라고 잘 못 표기하면 안되겠습니다. alert() 인자 값을 줄때는, " " , ' ' 두가지를 혼용해서 사용 가능 합.. 앱 만들기/JavaScript study 2022. 12. 28.

• 

  HTML에 자바스크립트 연결 하기 자바스크립트 파일을 HTML 파일과 분리하여 만들면 소스 관리 및 유지보수에 유용합니다., 여러 HTML에 하나의 자바스크립트 파일을 연동해서 사용할 수 있고, HTML 에는 웹 문서의 구조만 표현하고, 동적인 처리 들은 별도의 파일인 자바스크립트에서 관리해 주면 유지 보수의 효율성이 높아집니다. HTML 파일에 자바 스크립트 파일을 연결하는 방법은 하기와 같습니다. 1. 자바스크립트 파일 생성 - 비주얼스튜디오 에디터에서 한 줄로 팝업창 노출 코드를 작성 후 JS 파일로 저장합니다. 2. HTML에 자바스크립트 연결. 자바스크립트 파일이 HTML과 다른 폴더에 있다면, "폴더명/스크립트 파일명"을 기재해주면 됩니다. 해당 HTML을 실행하면, 하기와 같은 결과가 나옵니다! 정리하자면 자바스크립트 를 H.. 앱 만들기/JavaScript study 2022. 12. 25.

• 

  CSS 스타일 시트 우선순위 CSS 스타일 시트 우선순위를 알아봅니다. 먼저, 테스트를 위해서 외부 스타일 시트를 만듭니다. h1{ padding : 20px; background-color: blueviolet; color: rgb(250, 248, 248); } p{ padding: 30px; background-color: green; color: black; } test.html 파일에 외부 스타일 시트를 위한 태그 및 태그 선택자 p 에 내부 스타일 시트 을 적용합니다. 그리고, 인라인 스타일 테스트를 위해서 동일하게 p 태그에 인라인 스타일을 적용합니다. DOCTYPE html> Document p{ padding: 30px; background-color: black; color: red; font-style: ital.. 앱 만들기/CSS study 2022. 11. 22.

• 

  CSS 외부 스타일 시트 란? 그리고 html 문서와 연동방법 알아보기 외부 스타일 시트 란? 외부에 별도의 파일로 저장된 스타일을 의미 합니다. 외부 CSS 파일을 사용하게 되면, 여러 웹문서에서 동일한 CSS 스타일 링을 한번에 적용할 수 있습니다. 즉, 내부 스타일 시트 혹은 인라인 스타일에 비해서 유지보수의 용이성 그리고 웹 문서의 파일 사이즈 등도 절약할 수 있기에 효율적입니다. 외부스타일 문법 외부 스타일 시트를 html 문서와 연결 시키는 방법은 head 태그사이에 link태그를 사용합니다. 태그 안에서는 rel 과 href 속성을 사용하여 stylesheet 와 css 파일 경로를 적어주면 됩니다. 외부스타일 시트 예제를 만들어 보겠습니다. [test.html] 외부 스타일 시트이란 외부 파일에 만들어둔 스타일 정보를 의미한다 해당 CSS파일을 연결하는 모든 .. 앱 만들기/CSS study 2022. 11. 18.