분류 전체보기 (269) 썸네일형 리스트형 [Node] Prototype vs Class 차이점 알아보기 먼저 Prototype을 활용한 서버 생성 소스 const http = require('http'); // 서버 생성 const server = http.createServer((req, res) => { // 요청에 대한 결과를 보낼 때 200일 경우 정상 작동 res.statusCode = 200 // 해당하는 데이터로 어떠한 것을 보냈는지 명시적으로 선언 res.setHeader('Content-type', 'text/html'); // html 문서를 리턴한다. // 종료 res.end('Hello World'); }) // 명시적으로 포트를 외부에서 받음 //const port = process.env.PORT // 테스트 화면을 띄우기 위해 임의의 포트 번호 작성 const port = 300.. [Node] http 모듈 이용하여 서버 구축하기 웹 프레임워크(express 등)를 사용하지 않고 http 모듈을 사용하여 서버를 구축하는 방법 간단한 로직인 경우에는 express로 구축하는 것 보다 http 모듈을 활용하는 것이 성능적으로 더 뛰어남 예시 소스 'use strict' const http = require('http'); // 서버 생성 const server = http.createServer((req, res) => { // 요청에 대한 결과를 보낼 때 200일 경우 정상 작동 res.statusCode = 200 // 해당하는 데이터로 어떠한 것을 보냈는지 명시적으로 선언 res.setHeader('Content-type', 'text/html'); // html 문서를 리턴한다. // 종료 res.end('Hello World.. [CSS] transform 변환 속성 - backface-visibility ▶ backface-visibility - 3D 변환으로 회전된 요소의 뒷면을 볼 수 있는데 이를 안 보이도록 설정할 수 있음. - 3D 변환으로 회전된 요소의 뒷면 숨김을 설정. [속성 값] - visible: 뒷면을 숨기지 않음. 기본값. - hidden: 뒷면 숨김. hidden 사용 시 뒷면이 나오는 시점에 요소가 화면에 안 나옴. [CSS] transform 변환 속성 - perspective, perspective-origin ▶ perspective : 하위 요소를 관찰하는 원근 거리를 설정. - 속성 값으로 단위 입력. px, em 등의 단위 지정. - perspective() 함수와는 다르게 하위 요소를 관찰. - 값이 크면 원근감이 커지고 낮으면 가깝게 느껴짐. [perspective 속성과 함수의 차이점] - perspective 속성 - 적용 대상: 관찰 대상의 부모요소. - 관찰 대상이 여럿이면 부모 요소에 속성 사용. 관찰 대상이란 원근법을 의미함. - 원근법의 기준점 설정: perspective-origin. - perspective() 함수 - 관찰 대상 자체가 적용 대상. - 관찰 대상이 하나면 관찰 대상 자체에 함수 사용. - 관찰하는 기준점 설정 시 transform-origin 사용. - perspec.. [CSS] transform 변환 속성 - transform-style ▶ transform-style - transform-style : 3차원 변환 요소의 자식에서도 또 다른 3차원 변환을 사용할지 설정하는 것. - flat: 자식 요소의 3d 변환을 사용하지 않음. 기본 값. - preserve-3d: 자식 요소의 3D 변환 사용. [CSS] transform 변환 속성 ▶ transform 변환 속성. - transform-origin: 요소의 변환이 일어나는 특정한 기준점 설정. - 0% 0%는 좌측 상단, 100% 100%는 우측 하단을 의미. - X축: left, right, center의 키워드 사용. 또는 %, 단위 값 사용. 기본 값 50%. - Y축: top, bottom, center의 키워드 사용. 또는 %, 단위 값 사용. 기본 값 50%. - Z축: 단위 사용. 기본값 0. - transform-style: 3차원 변환 요소의 자식에서도 또 다른 3차원 변환을 사용할지 설정하는 것. - perspective: 하위 요소를 관찰하는 원근 거리를 설정. - perspective-origin: 원근 거리 기준점 설정. - backface-visibilit.. [CSS] transform 변환 함수 ▶ transform 2D 변환 함수 - translate(x, y): 이동. x축, y축. 단위 입력. - x축으로 몇 px 이동, y축으로 몇 px 이동할 것인지. - translateX: x축에 대한 이동. 단위 입력. - translateY: y축에 대한 이동. 단위 입력. - scale(x, y): 크기(x축 y축). 단위는 없음. 배수 입력. - scale(1)은 1배. 현재와 동일. - 확대하거나 축소할 때 사용. - scaleX: 크기. x축. 단위는 없음. 배수 입력. - scaleY: 크기. y축. 단위는 없음. 배수 입력. - x축이나 y축으로 확대.. - rotate(degree): 회전(각도). 단위는 deg. - 45도 기울일 경우 45deg. - skew(x-deg, y-deg.. [CSS] transform ▶ transform - 요소에 변환 효과(변형)를 지정. - 요소를 회전시키거나 비틀거나 확대/축소, 이동시키는 등. - 속성은 하나지만 그 안에 다양한 값을 가질 수 있음. 여러 함수들이 존재. [사용 예시] transform: 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임; .box{ transform: rotate(2deg) translate(10px, 0); } - rotate는 회전을 의미. - translate는 이동을 의미. x축, y축 순으로 값을 입력. position: relative;와 유사하게 동작. left: 10px;를 입력한 것과 유사하게 동작함. - skew: 비틂, 기울임. - scale: 크기. - 변형 효과에는 2D와 3D가.. 이전 1 ··· 11 12 13 14 15 16 17 ··· 34 다음
