앱 만들기400

• 

  비쥬얼스튜디오 코드 html 기본 태그 생성방법 HTML 문서의 기본 구조 HTML 문서는 기본적인 구조를 가지고 있습니다. 예제를 통해 알아보겠습니다. 안녕하세요. 웹 문서 입니다. HTML 은 크게 3가지 태그 로 구분됩니다. 태그 란 기호를 가진 html 의 최소 단위로 html 요 soo0100.tistory.com 지난 시간 html 문서의 기본 구조를 알아보았습니다. 기본 태그 구조를 하나하나 코딩 하기에는 번거롭기도 하고 다 외우기도 쉽지 않습니다. 비주얼스튜디오 코드를 사용하면 손쉽게 html 기본 구조를 잡아줄 수 있습니다. 기본 구조 위에 자신이 작성하고 싶은 내용만 추가하면 되겠습니다. 1. 비쥬얼 스튜디오 코드에서 새로운 파일을 하나 만듭니다. - test.html 로 만들어 봅니다. 위처럼 test.html 파일에는 아무런 태그.. 앱 만들기/비쥬얼스튜디오 코드 2023. 1. 22.

• 

  HTML 문서의 기본 구조 HTML 문서는 기본적인 구조를 가지고 있습니다. 예제를 통해 알아보겠습니다. 안녕하세요. 웹 문서 입니다. HTML 은 크게 3가지 태그 로 구분됩니다. 태그 란 기호를 가진 html 의 최소 단위로 html 요소라고도 불리웁니다. 브라우저에서는 태그 안의 값만 실행되거나 표시되게 됩니다. 1. 웹 문서의 처음과 끝을 나타냅니다. 웹 문서의 시작과 끝이기에 해당 태그 사이에 웹문서의 정보와 실제 브라우저에 보여질 구조 및 내용을 코딩하면 됩니다. 위 예제에서 은 해당 웹페이지의 기본 언어가 영어라는 뜻 입니다. lang='kr' 한국어로 설정을 하면, 한글로 검색시 해당 웹페이지가 한글이라는 조건에 맞아 떨어져 검색이 되는 원리입니다. 2. 태그 사이에는 해당 웹 문서의 정보를 브라우저에게 알려줍니다... 앱 만들기/HTML5 study 2023. 1. 21.

• 

  var 과 let 예약어 차이점 자바스크립트 ES6버전(2015년 발표) 이후에는 let 예약어를 사용해서 변수를 선언하는 것을 추천하고 있습니다. var 를 사용한다고 해서 큰 일이 나는 것은 아니나, var 예약어가 가지는 예상치 못한 코딩 실수를 줄여주기 위한 기능이 let 에는 들어있기에 권장하고 있다고 생각됩니다. 오늘은 var 과 let 의 차이점을 알아 보겠습니다. 먼저, 하기 예제로 var 예약어가 가지는 약점들을 확인 해 봅니다. let 예약어 예제 var 약점은 3가지로 뽑아 볼 수 있습니다. 위 주석처럼, 첫버째는 변수 선언시 예약어를 적지 않으면 전역변수로 선언이 되기에, 나의 의도와 별개로 동작을 할 가능성 이 있습니다. 두번째, 자유도가 높은 자바스크립트가 가지는 특색 중 하나라고 생각합니다. (자바에서는 생각.. 앱 만들기/JavaScript study 2023. 1. 13.

• 

  윈도우 창 닫기 함수 자바스크립트 를 활용하여 윈도우 창을 닫는 예제를 만들어 보겠습니다. 먼저 지난시간, 팝업창을 여는 open() 함수 예제를 재사용 하겠습니다. 코드는 하기와 같습니다. 1. 윈도우 창 열기 새 윈도우 팝업창 열기예제 2. 해당 윈도우 창에서 닫기 예제 새로운 팝업창 입니다 닫기 2번 항목에서 중요한 것은 바로 close() 함수 입니다. 자바스크립트 함수로도 윈도우 창을 닫는 역할을 수행 합니다. 닫기 예시를 위해서 닫기 버튼을 만들고, 태그 안에 이벤트 설정을 해줍니다. 버튼이 눌렀을때 이벤트 이기에 onclick 를 기재하고 뒤에는 자바스크립트 함수임을 알려주기 위해서 "javascript: 자바스크립트 함수" 이런식 으로 코딩 합니다. 위 처럼 닫기 창을 선택하면, 팝업창이 사라지고 1번 예제의 .. 앱 만들기/JavaScript study 2023. 1. 12.

• 

  자바스크립트 함수만들기 자바스크립트 에서 함수를 만드는 방법 입니다. 우선, 함수는 여러번의 실행 코드를 하나의 단위로 만들어서 필요할때 마다 편리하게 여러번 사용할 수 있는 장점이 있습니다. 예제를 살펴보겠습니다. 자바스크립트 함수 만들기 위 코드는 두수의 합을 구하는 소스 입니다. 결과는 하기처럼 팝업창에 합을 보여 줍니다. 그런데 이런 동작을 여러 파일 혹은 여러 곳에서 사용하려고 한다면, 같은 코드를 여러번 적어야 할까요? 그 답이 바로 함수 입니다. 함수를 만들어 놓으면 언제든 함수를 호출하여 편리하게 사용할 수 있습니다. 함수로 변경한 예제는 하기와 같습니다. 자바스크립트 함수 만들기 더하기 코드 부분을 함수로 만들었습니다. 자바스크립트에서 함수를 만드는 방법은 첫째, 함수를 정의 합니다. function 이라는 예.. 앱 만들기/JavaScript study 2023. 1. 11.

• 

  새로운 윈도우 창 열기 함수 자바스크립트 를 사용해서 새로운 윈도우 창을 열 수 있습니다. 새로운 윈도우를 여는 함수는 window.open() 입니다. window는 자바스크립트 최상위 클래스 이며 기본 클래스로써 편의상 window 를 생략하고 사용할 수 있습니다. 예제를 통해 알아보겠습니다. 1. 신규 팝업창을 호출할 웹 문서를 만듭니다. 새 윈도우 팝업창 열기예제 여기서 중요한 것은 바로. open 함수 입니다 window.open("testPopup.html","popup" , "width=300, height=400, left=300 , top=300"); 첫번째 인자는 열고자 하는 파일명. 두번째 인자는 윈도우에 이름을 주어서 여러번 열리는 것을 방지하는 것 입니다. 세번째 인자는 윈도우의 크기 및 좌측 상단에서 얼마나.. 앱 만들기/JavaScript study 2023. 1. 10.

• 

  비쥬얼스튜디오 코드 웹문서 실행하기 웹 문서를 만들고 실행하기 위해서는 해당 html 파일을 더블클릭 해야 합니다. 하지만, 에디터에서 바로 실행할 수 있으면 더 편리하겠죠? 비주얼스튜디오 코드에서는 확장 프로그램을 통해서 웹 문서를 바로 실행이 가능합니다. 실행 결과값은 브라우저를 통해서 확인이 가능합니다. Live sever 설치 확장 프로그램의 이름은 바로, Live server입니다. 다운로드해보겠습니다. 비주얼스튜디오 코드 왼쪽 사이드바의 하단 확장아이콘을 선택 후 검색 창에 live로 검색합니다. 첫 번째 Live Server를 설치합니다. 설치가 완료되었습니다. 웹 문서 실행 웹 문서를 실행해봅니다. 작성한 웹문서 에디터 창 혹은 파일에서 오른쪽 마우스 클릭 >> Open with Live Server를 선택합니다. 기본으로 .. 앱 만들기/HTML5 study 2023. 1. 8.

• 

  비주얼스튜디오코드 색 테마 변경 하기 색 테마변경 비주얼스튜디오 코드 에디터의 색 테마 변경 입니다. 에디터 사용시 장시간 사용하다보니 눈이 편한 색상으로 변경하는 것이 좋습니다. 비주얼스튜디오 코드 를 실행 후, 왼쪽 하단 톱니바퀴 아이콘(설정) 을 클릭 -> 서브메뉴 '색 테마' 를 선택 합니다. 하기처럼 여러가지 색상 테마 리스트가 나옵니다. 테마에 따라 여러 색상을 선택이 가능합니다 개인마다 차이는 있겠지만, 에디터는 일반적으로 검정색 테마가 많이 사용되어지는 편 입니다. 아무래도 검정 톤이 눈의 자극이 적습니다. 오늘은 비주얼스튜디오 코드 에디터 색상을 변경하는 방법을 알아 보았습니다. 감사합니다. 비쥬얼 스튜디오 코드 한글팩 적용하기 "비쥬얼 스튜디오 코드"에서 한글 팩 설치 방법 입니다. "비쥬얼 스튜디오 코드" 왼쪽 하단 확장.. 앱 만들기/비쥬얼스튜디오 코드 2023. 1. 7.

• 

  비쥬얼 스튜디오 코드 한글팩 적용하기 한글팩 설치하기 "비쥬얼 스튜디오 코드"에서 한글 팩 설치 방법 입니다. "비쥬얼 스튜디오 코드" 왼쪽 하단 확장 아이콘을 선택하고, 검색창에 korea 라고 입력 합니다. 그럼 리스트에 한글과 관련된 확장 프로그램들이 나옵니다. 거기서 가장 첫번째 korean Language Pack for Visual Studio Code 를 설치 합니다. Install 하고 나면 설치버튼이 하기처럼 Uninstall 로 바뀝니다. 오른쪽 하단 팝업 창에서 Change Language and Restart 버튼을 선택합니다. 비주얼 스튜디오 ui 언어를 한글로 바꾸고 재 실행 하겠느냐는 의미입니다. 비쥬얼 스튜디오 코드가 재실행 되고, 한글이 적용 되었습니다. 해당 한글팩은 마이크로소프트에서 배포되는 것으로 안전 합.. 앱 만들기/비쥬얼스튜디오 코드 2023. 1. 5.

• 

  비쥬얼 스튜디오 코드 다운로드 받기 웹 언어를 공부하거나, 개발시 무료 에디터가 필요하다면 "비쥬얼 스튜디오 코드"를 추천드립니다. 비쥬얼스튜디오 코드는 마이크로 소프트 사에서 제작한 무료 개발 에디터 입니다. 하기 사이트에서 다운로드 받으면 됩니다. 비쥬얼스튜디오 코드 다운로드 사이트 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Win.. 앱 만들기/비쥬얼스튜디오 코드 2023. 1. 4.