🍁변수의 스코프 변수의 스코프는 변수 생명주기 혹은 영역이라고 부른다. Java와 JavaScript의 변수 Java 멤버 변수: 클래스 전역에서 사용할 수 있다. 지역 변수: 메서드 또는 제어문 전역에서 사용할 수 있다. static 변수도 멤버 변수의 일종이므로 Java에는 멤버 변수와 지역 변수만 존재한다. JavaScript 전역 변수: 한 페이지 내에서 사용할 수 있다. 변수 선언문이 실행될 때 생성이 되었다가 브라우저의 페이지가 바뀌는 경우(종료되는 순간) 사라진다. 지역 변수: 함수 내에서만 사용할 수 있다. 자바스크립트의 지역 변수는 함수 단위 지역 변수이므로 함수만 자기 영역으로 인식하고, 제어문은 영역으로 인식하지 못한다. 지역 변수는 함수만 자기 영역으로 인식한다는 점에서 함수 스코프..
🍁Function Java Method 자바의 메서드는 아래의 양식으로 만들어진다. public [static] int m1 (int num) { return 10; } 자바스크립트는 접근 지정자 표현이 없으므로 public을 생략한다. static은 정적인지를 묻는 키워드인데, 이 또한 클래스가 있어야 작성하는 것이므로 클래스가 없는 자바스크립트에서는 생략한다. 자바스크립트에서는 자료형(number, string, boolean, object)을 명시적으로 표현이 불가능하다. 돌려주는 자료형을 선언하고 싶어도 명시적인 표현이 불가능하기 때문에 자바스크립트에서는 메서드 이름이 가장 처음에 나온다. JavaScript Function function m1(num) { return 10; } num 앞에 v..
🍁자료형 JavaScript에서 자료형은 메모리를 따지지 않는다. JavaScript는 Java보다 훨씬 단순한 자료형을 가지고 있다. number 숫자형(정수, 실수) var num; num = 10; var num2 = 3.14; var num3, num4; var num5 = 10, num6 = 20; string 문자/문자열 var name1 = 'Isaac'; var name2 = "Isaac"; 선언을 할 때 홑따옴표와 큰따옴표 둘 다 사용할 수 있다. boolean 논리형 var flag = true; object 객체형 var now = new Date(); JavaScript에는 클래스가 없지만 객체 개념은 있다. 그리고 JavaScript에는 이미 만들어진 클래스의 객체가 있다. 이 말..
🍁JavaScript Front-end 1. HTML HTML에서 골격을 인라인 태그로 만들고, 내용물을 인라인 태그와 텍스트로 만든다. 2. CSS CSS에서는 서식을 만든다. 3. JavaScript JavaScript에서는 프로그래밍 기능을 만든다. JavaScript는 브라우저에서 동작하는 프로그래밍 언어이다. Netscape에서 자사 브라우저에 동작하는 프로그래밍 언어를 만들 목적으로 JavaScript를 만들게 되었다. C 계열 언어이기 때문에 기본 구문은 자바와 유사하지만, 문법은 Java와 전혀 무관하다. JavaScript의 원래 이름은 LiveScript였는데, 점유율을 높이기 위해서 Java의 이름을 빌려 쓰기로 협약을 하고 JavaScript라는 이름이 되었다. JavaScript의..
🍁Responsive Web 해상도에 따라 다른 화면을 구현하는 CSS 기술이다. 해상도에 반응하여 다른 CSS를 적용한다고 해서 반응형 웹이라고 한다. max-width: 1000px이 들어간 부분은 해상도의 조건이다. max-width는 너비가 최대 1000px 일 때까지는 서식을 적용해 달라는 의미이다. 전체 화면일 때에는 화면의 배경색이 gold지만, 1000px 아래로는 cornflowerblue로 배경색이 바뀐다. 미디어 유형 1. all: 모든 유형 2. screen: 컴퓨터(스마트폰) > 기본값 3. print: 인쇄 장치 4. tv 5. projection 6. 기타 등등 미디어 유형을 print로 변경 @media 뒤의 screen을 print로 하면 인쇄장치에만 적용이 된다. 미디어 ..
🍁display: grid grid는 표의 다른 말이라고 봐도 된다. 아래는 grid에 대한 예시이다. https://www.printablee.com/post_10-by-10-grids-printable_402493/ 10 Best 10 By 10 Grids Printable - printablee.com What is a Number Grid? Number grids are square grids worksheets that have rows and columns with numbers arranged in them. Well, all the numbers in the row and column have a relationship with each other. So, actually, the main..
🍁display: flex flex 속성 하나만으로도 다른 속성 여러 개를 합쳐 놓은 정도로 분량이 크다. flex는 flex box 또는 flexiable box라고도 부른다. 레이아웃을 작성할 때, 즉 내부의 요소를 어떻게 배치할지를 결정할 때 사용한다. flex는 float와 position, maingin, padding을 합친 느낌이 든다. [CSS] display: 인라인 요소의 개행, float 🍁display [CSS] overflow, visibility, display 🍁오버플로우 (overflow) 박스에 담을 수 있는 내용을 초과하면 초과한 내용이 박스를 빠져나간다. 하지만 height: auto; 값을 주면 그만큼 박스가 커지기 때문에 isaac-christian.tistory.c..
🍁animation CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다. animation은 그보다 더 나아가 움직임을 세밀하게 통제할 수 있는 옵션이 존재한다. [CSS] transition (전환) 🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하 isaac-christian.tistory.com transition에 대해서는 위 글을 참고하도록 하자. 🍁animation의 사용 animation-name: 프레임(움직임)을 정의 animation-duration: 소요 시간 animaiton-fill-..
