junnnhhh

hover란 마우스를 어떤 요소 위에 올렸을 때의 동작을 의미한다. CSS 에서는 hover 선택자를 사용해서 hover 동작 시 적용되는 스타일을 구성할 수 있다. hover 선택자에 대한 스타일 정의를 하지 않고 td 태그에 마우스오버 했을 때hover 선택자에 대한 스타일 정의 후, td 태그에 마우스오버 했을 때

HTML 요소들을 사용하다 보면 해당 요소에 style 속성을 부여하여 사용하는 경우가 많다.이 때, 중복되는 요소들을 사용하다 보면 style 속성에 같은 값을 넣어주게 되는데 이 부분을좀 더 효율적으로 사용하기 위해 기본 사용법은 스타일을 적용할 요소 (ex 태그, 클래스, 아이디)를 명시해주고정의할 속성들을 중괄호로 묶으면 된다. 태그의 경우는 태그명클래스의 경우 .xxx아이디의 경우 #xxx 클래스의 경우, 다중 상속이 가능하기 때문에 여러 클래스를 같이 사용할 수 있다. 제목 이름

태그는 행과 열로 이루어진 2차원 테이블을 정의할 때 사용한다.  태그는 자식요소에 , , , , 등을 활용하여정의할 수 있다.  : 태그 내에서 헤더 콘텐츠를 하나의 그룹으로 묶을 때 사용. : 태그 내에서 내용 콘첸츠를 하나의 그룹으로 묶을 떄 사용. : 테이블 헤더를 정의. : 테이블 한 셀에 들어가는 데이터를 정의. : 태그를 그룹화 하여 한 행으로 묶어주는 역할. 첫번째 제목 두번째 제목 1 2 3 4  또한, th에 style="widht:~"를 주어 셀의 열 너비를 조정할 수 있다. ..

Map 객체는 key-value로 이루어진 데이터 구조이다. Map에 key-value는 모든 타입에 대해서 사용 가능하다. const map1 = new Map(); map1.set('a', 1); map1.set('b', 2); map1.set(1, 3); console.log(map1.get('a')); // Expected output: 1 console.log(map1.get('b')); // Expected output: 2 console.log(map1.get(1)); // Expected output: 3 Map은 한 객체 내에서 key는 오직 단 하나만 존재해야 한다. ex) { 'a': 1, 'a': 2 } → X Map 객체는 for .. of 구문을 사용하여 내부 요소를 참조할 수 ..

String은 다들 알다시피 문자열을 나타내는 객체이다. JavaScript에서 사용하는 String의 주요 내장 메서드는 무엇이 있는지 살펴보자. String - JavaScript | MDN The String object is used to represent and manipulate a sequence of characters. developer.mozilla.org 공식 문서에 나와있는 주요 메서드는 String의 길이를 반환하는 length, String 객체에 뒤에 추가로 붙여주는 +, += 연산자, 부분 문자열 포함 여부 및 그 위치를 알려주는 indexOf(), 부분 문자열을 추출해주는 substring()이 있다. String 인스턴스 생성 방법 const string1 = "A str..

배열이란 리스트처럼 다수의 값들을 순차적으로 포함하고 있는 하나의 객체이다. 배열 만들기 var shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; 배열은 보통 대괄호를 사용하여 표시를 한다. 또한, JavaScript의 경우, 배열 내부의 한 타입으로만 이루어지는 것이 아닌 다양한 형태의 요소들을 함께 넣을 수 있다. var sequence = [1, 1, 2, 3, 5, 8, 13]; var random = ["tree", 795, [0, 1, 2]]; 배열 내부 요소의 총 개수를 알고 싶은 경우 array.length 를 통해 알 수 있다. ※ 간혹 length()로 헷갈릴 수 있는데 이 부분은 조심하자! var sequence = [1, 1..

타입스크립트에서는 .ts 파일을 모듈이라고 한다. 단일 타입스크립트 파일 하나로 프로젝트를 구현해도 되지만, 기능이 다양하고 많은 경우에는 한 파일로 관리하기에 코드 관리 및 유지 보수 등 관리 측면에서 효율성이 좋지 않다. 이를 위해서 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할하는 '모듈화(modulization)' 라는 작업을 하는데 타입스크립트에서는 import 및 export를 사용하여 모듈화를 할 수 있다. hello.ts const hello = function() { // 보낼 키워드 앞에 export 키워드를 작성한다. console.log("안녕하세요") } const bye = function() { console.log("안녕히 가세요") } 이 hello.ts 라는 파..

JavaScript에서 값을 비교할 때, 보통 동등 연산자(==, !=)를 사용하여 비교할 두 변수의 값 일치 여부를 판단한다. 이 때, 변수 타입에 상관없이 값만 비교하여 일치 여부를 판단하게 되는데 값 뿐만 아니라 타입 일치 여부도 비교를 하고 싶은 경우에 사용하는 것이 '일치 연산자'이다. let a = 1; let b = '1'; console.log(a == b); // true console.log(a != b); // false console.log(a === b); // false console.log(a !== b); // true

웹 서버 호스트에서 경로를 통해 정적 파일을 참조하는 경우가 있다. ex) localhost:3000/public/css/test.css → public/css/test.css 파일을 보여줌. 이미지, css 파일 및 javascript 파일 같으 정적 파일을 제공하려면 epxpress.static 함수를 사용해야 한다. 정적 파일이 포함된 디렉토리의 이름을 express.static 함수의 전달하면 파일의 직접적인 참조를 할 수 있다. app.use(express.static('public')); // public 이라는 이름의 디렉토리를 정적 파일을 제공하는 디렉토리로 설정 public 디렉토리 구조가 다음과 같다고 하자. 그러면 다음과 같이 public 디렉토리에 있는 정적 파일을 로드할 수 있다...

Cookie 란? → 웹 서버가 생성해서 웹 브라우저로 전송하는 작은 정보 파일. cookie-parser 사용하기 1) 모듈 설치 npm install cookie-parser 2) 모듈 임포트 const cookieParser = require('cookie-parser'); 3) 사용법 const express = require('express'); const cookieParser = require('cookie-parser'); const app = expres(); app.use(cookieParser()); app.get('/', (req, res) => { req.cookies; // 쿠키에 저장된 내용을 가져옴 res.cookie( key, value, options ); // 쿠키에 k..