프로그래밍
-
Javascript - 이벤트(event)프로그래밍/Javascript 2021. 12. 22. 09:00
이벤트 웹 브라우저에서 마우스 클릭을 했을 때나 어떤 요소에 포커스가 주어지거나 변경될 때 입력해놓은 event를 발생시키는 것이다. 예시1) "안녕하세요"라는 글자가 담긴 버튼을 클릭할 때, alert창에 "반가워요!"라는 메시지 띄우기 안녕하세요 예시2) 입력창에 내용을 입력했을 때(비어있던 칸 -> 채워진 칸), alert창에 "변경했어요!" 메시지 띄우기 예시 1, 2에서 사용한 onclick="", onchange=""가 자바스크립트의 이벤트이다. 예시에서는 alert이라는 간단한 기능을 사용했지만, 더 복잡한 기능을 사용해서 코드가 길어질 때도있다. 이럴 때는 아래와 같은 인라인 방식으로 이벤트를 입력시켜주면 코드가 간결해진다. 자주 사용하는 이벤트 onclick - 마우스를 클릭했을 때 이벤..
-
자바스크립트란?프로그래밍/Javascript 2021. 12. 21. 20:59
자바스크립트(Javascript)는 객체 기반의 스크립트 프로그래밍 언어이다. HTML이 웹 내용을 작성하고, CSS가 웹을 디자인한다면 자바스크립튼 웹의 동작을 구현하는 기능을 맡고 있다. 주로 웹 브라우저에서 사용하지만, Node.js 프레임워크를 이용해 백엔드 쪽 프로그래밍에서 사용하기도 한다. 또한, 자바스크립트는 객체 기반의 스크립트 언어이자, 인터프리터 언어라 컴파일 작업없이 소스 코드를 바로 실행할 수 있다. 참고로 자바와 자바스크립트는 이름만 놓고는 C와 C++처럼 연관이 있을 것 같지만, C언어를 기반으로 만들어졌다는 점 외에 서로 직접적인 관련은 없다. 마치 코끼리와 바다코끼리와 같은 경우라고 생각하면 될 것 같다. HTML과 Javascript 안녕하세요 위의 이미지를 보면 HTML과..
-
[IDE]비주얼 스튜디오 코드 설치 및 실행하기프로그래밍/프로그램 설치 2021. 12. 21. 17:14
HTML 에디터로 "Atom"을 추천한 적이 있는데, 이번에 소개할 것은 Visual Studio Code이다. HTML뿐만 아니라 C, Phyton 등 다양한 언어 지원과 오픈소스가 제공, 다양한 확장 기능에 게다가 무료인 IDE로 코딩을 공부하기 시작한 분들은 아마 한 번쯤 들어봤을 것 같다. 바로 설치를 시작해보자! 1. 설치 먼저 아래 사이트에 접속한 뒤 각자 운영체제에 맞게 다운로드 한다. 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. Visua..
-
[CSS]css 박스 모델프로그래밍/HTML&CSS 2021. 12. 21. 14:27
오늘은 CSS 기본 설정 중 하나인 박스 모델에 대해 알아보고자 한다. HTML 콘텐츠는 다음과 같이 구성되어있다. - 높이(height) - 너비(width) - 패딩(padding) - 테두리(border) - 여백(margin) 웹페이지에서 우클릭-검사(inspect)를 클릭하면, CSS라는 콘텐츠가 [높이 : 21.500px, 너비 : 158.750px, 마진 : 8px]로 구성된 것을 확인할 수 있다. CSS에서 박스 모델이 중요한 이유는 웹 페이지는 모두 박스들로 구성되어있기 때문이다. 우리 모두가 애용하는 NAVER 홈을 살펴보면, 아래와 같이 박스들로 구성된 것을 볼 수 있다. 물론, 더 세부적으로 NAVER 로고 부분과 검색창 부분으로 나누는 것도 가능하다. 사람에 따라서 박스를 나누..