[JavaScript] 자료형, 형변환, 연산자, NaN

1. 자료형(값의 타입) - 자바 스크립트에서는 변수의 타입은 따로 없고 값의 타입만 있다. 숫자(Number) - 정수와 실수를 구분하지 않음 문자열(String) - 큰 따옴표와 작은 따옴표의 차이가 없음 불린(Boolean) - true / false 객체(Object) - 자바와 다르게 클래스 없이 객체 만들 수 있음 - 여러 변수 혹은 메소드를 선언한 집합의 주소를 가지는 타입 - 필드 접근 시 .(마침표)을 사용 undefined - 타입이 정해지지 않은 것을 의미하는 값 - let num; --> 출력했을 때 undefined가 나옴 null - 주소값이 정해지지 않은 것을 의미하는 값 - let num = null; --> null로 변수를 초기화한 경우 - ` `(백쿼트) 사이에 엔터를 ..

[JavaScript] 스코프, 호이스팅, 변수의 선언 방식

1. 스코프(scope)와 호이스팅(hoisting) 스코프(scope) - 변수에 접근할 수 있는 범위 - 변수의 생명주기 - 변수의 유효 범위 { } 호이스팅(hoisting) - 변수나 함수의 선언이 어디에 있든 상관없이 다른 코드들보다 가장 먼저 끌어올려져서 실행되는 특징 - 변수는 선언 단계, 초기화 단계, 할당 단계 이 세 가지를 거친다. var num = 10; ① 선언 단계 : 공간 확보 ② 초기화 단계 : undefined 넣기 ③ 할당 단계 : 10이 대입 - 선언 단계가 무조건 맨 처음에 실행된다는 것이 호이스팅이다. 2. 변수의 선언 방식 var 변수명 = 값; let 변수명 = 값; const 상수명 = 값; - 변수의 선언 방식으로는 var, let, const 세 가지가 있음 ..

[JavaScript] 자바 스크립트(JavaScript)와 선언 및 출력

1. 자바 스크립트(JavaScript) 정의 - 웹의 동작을 구현하기 위한 언어 - 웹 브라우저에 자바스크립트 인터프리터(JS 코드를 해석)가 내장되어 있음 - 객체 기반 스크립트 언어 특징 - 자바 스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 - 객체 지향형 프로그래밍과 함수형 프로그래밍 모두 표현 가능, 그래서 객체 지향이 아닌 객체 기반 - HTML의 내용, 속성, 스타일 등 변경 가능 주의사항 - ; (세미클론) 생략 가능 - 스크립트 태그 위치는 어디든 상관없음 - 대소문자 구분 2. 자바 스크립트의 선언 과거 현재 - 과거에는 다양한 스크립트 언어가 있었기 때문에 language로 자바 스크립트라는 것을 명시해줬지만 현재는 표준이 자바 스크립트가 되었기 때문에 따로 명시해..

[CSS] 미디어 쿼리(Media Query) - 반응형 개발, 가상 요소

1. 미디어 쿼리(Media Query) - 반응형 개발 : 접속하고 있는 기기들마다 다르게 반응하여 표현되도록 개발하는 것 - 웹 페이지에 접속하고 있는 기기마다 원하는 형태로 스타일을 조정할 수 있는 기술 - 기기의 화면 너비, 높이 등으로 판단 - 장점 : 업데이트, 유지관리, 디버깅이 쉬워지며 업데이트 비용이 감소 - 단점 : 구현이 어렵고, 브라우저가 서버에서 다운로드하는 속도(코드)가 느려짐 (사용자에게 보여주는 화면의 로딩이 느려진다.) - 위에서부터 내려오면서 하나하나 적용시키면서 지나가는 것 2. 문법 @media screen and (조건문) { 스타일 적용 } ① @media : 미디어 쿼리가 시작됨을 표시 ② screen : 미디어 쿼리의 적용 기기 / all : 모든 기기 ③ an..

[CSS] CSS position, z-index

- CSS 요소들의 위치를 결정하는 방식을 설정 1. 정적(static)위치 지정방식 - 기본값으로 HTML 요소의 위치를 결정하는 기본적인 방식 - top, left, right, bottom 속성값을 사용할 수 없음 - 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식 2. 상대(relative)위치 지정방식 - HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식 - 기본 위치는 정적위치 지정방식일 때 결정되는 위치를 의미함 - 설정한 위치로부터 출발해 반대쪽으로 가는 px값을 설정 ex) left: 100px; - 왼쪽에서부터 오른쪽으로 100px만큼 감 top: -70px; - 위쪽에서부터 아래로 -70px만큼 감 z-index - position 속성과 함께 쓰이며..

[CSS] CSS display, box-sizing, border(radius)

1. CSS display block - 한 줄을 차지 - width, height, padding, margin 지정 가능 inline - 요소를 가로로 나열 - width, height, padding, margin 지정 불가능 - line-height : 글자 한 줄의 높이 inline-block - 위에 있는 모든 성질들을 다 적용받는 요소 - inline처럼 가로로 나열되면서 width, height, padding, margin 지정 가능해짐 none - 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐 2. box-sizing - 위에 예시처럼 두 개의 width나 height를 똑같이 만들어주기 위해서는 border 크기나 padding, margin 크기를 계산해서 width나..

[CSS] background(배경)

1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) - HTML 요소의 배경으로 나타날 배경 이미지를 설정 https://unsplash.com/ Beautiful Free Images & Pictures | Unsplash Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. unsplash...

[CSS] font(폰트)

- 과거 HTML 내용 1. 글꼴(font-family) - font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러개의 글꼴을 같이 설정할 수도 있음 - font-family 속성값이 여러개의 글꼴로 설정되어 있다면, 첫번째 글꼴부터 찾은 후 없으면 그 다음 글꼴을 적용시킴 font-family: "폰트명","폰트명",... 2. 굵기(font-family) - 텍스트의 굵기를 조절할 수 있으며, 숫자가 올라갈수록 굵어짐 100~900 / normal(400), bold(700) font-weight:숫자값 혹은 bold/normal; 3. 크기(font-size) - font의 기본 크기는 16px 절대적 크기 - 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용 - 절대적 크기..

[CSS] CSS 적용하는 방법, 우선순위 및 상속

1. CSS 적용하는 방법 인라인 스타일 - 요소의 style 속성의 값 안에 CSS 문법으로 스타일을 적용하는 방법 ex) "나 선택자를 두개 써서 사용하게 되면 각 점수가 더해져서 우선순위가 정해진다. - 그래서 "ul>li>.li-class"를 보면 태그 선택자 2개 클래서 1개이기에 총 12점으로 점수가 정해진다. 상속 - CSS 속성은 상속되는 속성과 상속되지 않는 속성이 있음 - 상속되는 속성은 포하마고 있는 자식 요소에 영향을 미치며 상속되지 않는 속성은 영향을 미치지 않음 https://www.w3.org/TR/CSS22/propidx.html Full property table 'cursor' [ [ ,]* [ auto | crosshair | default | pointer | move..

[CSS] CSS와 CSS 선택자

1. CSS(Cascading Style Sheets) CSS란? - CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어 - 스타일을 HTML 문서로부터 따로 분리하는 것이 가능 CSS를 사용하는 이유 - HTML만으로 웹 페이지를 제작할 경우 HTML 요소 세부 스타일을 하나하나 따로 지정해 주어야 하기 때문에 매우 많은 시간이 걸리며, 완성된 후에도 스타일의 변경 및 유지보수가 매우 힘들어짐 - 이 문제를 해결하기 위해 지정된 스타일 시트 언어가 바로 CSS이고, 웹 페이지의 스타일을 별도 파일로 저장할 수 있게 해주므로 사이트의 스타일을 손 쉽게 제어할 수 있음 2. CSS 문법 선택자 { 속성명: 속성값; 속성명: 속성값; ... } CSS는 선택자와..