본문 바로가기
728x90

전체 글156

[CSS] 배경 색상 변경하기 background color CSS 배경 색상 변경하기 배경 색상의 변경 방법은 여러가지가 있지만 쉽게 적용할수 있는 대표적인 방법으로 두가지가있다. 첫번째는 HTML상에서 태그에 style속성을 이용하여 배경색상을 입히는 방식과 두번째는 CSS 파일에서 CSS Selector를 통해 배경색상을 입히는 방식이 있다. 1. HTML 상에서 태그 직접 입력 기본형태 //HTML 태그 내 Style 속성을 이용한 배경 색상의 변경 샘플코드 출력 결과 2. CSS 파일을 통한 배경 색상 변경 기본형태 //CSS 파일 내 CSS Selector를 통한 배경색상 변경 방식 CSS Selector { background-color:#ffffff; } 샘플코드 : HTML, CSS .red{ background-color:#d44000; widt.. 2021. 4. 3.
[CSS] 폰트 (문자) 색상 설정 하기 font color set CSS 폰트 문자 색상 설정하기 1. style 속성을 활용한 HTML 태그 직접 변경 기본 형태 //태그내 style속성을 통한 폰트 색상 설정 이것은 폰트입니다. 샘플 예제 빨강색 주황색 노랑색 초록색 파랑색 출력 결과 2. css 파일을 통한 폰트 색상 변경 기본 형태 적용원하는 태그/클래스/아이디 명 { color : #ffffff; } 샘플예제 : HTML 파일 빨강색 주황색 노랑색 초록색 파랑색 CSS 파일 .red { color : #be0000; } .orange { color : #e2703a; } .yellow { color : #f7ea00; } .green { color : #3a6351; } .blue { color : #046582; } 출력결과 2021. 4. 2.
[Javascript] cookie 사용하기 Javascript Cookie 사용하기 꼭 서버를 통한 웹서비스가 아니더라도 웹서비스에서 사용자 인증 등을 위해 쿠키를 사용할 일이 있는데, 이번에는 자바스크립트를 통한 간단한 쿠키사용 예시이다. 👇서버측 쿠키 제어는 하단의 링크를 참고하자👇 https://goodmemory.tistory.com/72 Cookie 만들기 Cookie Example Cookie 확인 Cookie Example 출력 결과 2021. 4. 1.
[NodeJs] 노드몬 nodemon 을 활용한 Node.js 무중단 서비스 하기 NodeJs 무중단 서비스 nodemon nodemon 설치 방법 //노드몬 설치 nodemon npm install nodemon -g//노드몬은 글로벌 npm 으로 설치해야 하므로 -g를 꼭 붙여야함. //맥사용자는 npm 앞에 sudo 를 붙여야 합니다. nodemon 기본 사용 방법 //NodeJs Express 간단 서버 Create 코드 const express = require('express'); const app = express(); app.get('/',(req,res)=>{ res.send('Hello world!'); }); app.listen(3000,()=>console.log(`http://localhost:3000`)); 위와 같은 NodeJs 환경에서 terminal 창에.. 2021. 4. 1.
[Javascript] some 배열, 객체 내 원하는 값 있는지 확인 Javacscript 배열Array 또는 객체Object 내 원하는 값 있는지 확인 배열 또는 객체 내 원하는 값이 있는지 확인할수 있는 api는 some이다. 아래 배열, 객체에서의 사용 예제를 참고하자. 사용 예 let result = 배열또는객체.some(value => value === 찾는값); 배열내 확인 //배열 내 원하는 데이터 확인 const arr = [1,2,3,4,5]; const result = arr.some(function(val)=>{ return val === 3; }); 객체 내 확인 //객체 내 30세 이상 찾기 const Person = [ {name: '홍길동', age : 30}, {name: '이영희', age : 18}, {name: '박철수', age : 16.. 2021. 4. 1.
[NodeJs] 쿠키 읽기 / 쓰기 (cookie read / write) [ javascript / http / client / server] NodeJs 쿠키 읽기 / 쓰기 (cookie read / write) 쿠키란 ? 서버가 클라이언트의 웹브라우저에 전송하는 데이터. 브라우저에서는 해당 데이터를 동일 서버에 재접속시 다시 전송한다. 사용 예로는 로그인 상태 유지, 장바구니 상품 저장 등 세션 관리, 개인화, 트래킹 등 다양하게 활용이 가능하다. 클라이언트 측으로 쿠키 쓰기 const express = require('exrpess'); const app = express(); //서버 -> 클라이언트 쿠키값 보내기 //'쿠키의키값=값' => 'tistory=goodmemory' app.get('/',(req,res)=>{ //쿠키 보내기 res.writeHead(200,{'set-cookie':'tistory=goodmemory'}); .. 2021. 3. 31.
[Javascript] 스크롤 이벤트 (Scroll Event) Javascript 스크롤 이벤트 Scroll Event 마우스 스크롤 이벤트란? 마우스 스크롤을 움직였을때 발생하는 이벤트 기본 구조 //스크롤 이벤트 추가 : 'scroll' window.addEventListener('scroll',e=>{ //스크롤 움직였을때 원하는 기능 삽입 }); 샘플예제 스크롤 이벤트 결과 출력 2021. 3. 31.
[NodeJs] 순수 NodeJs와 Express 404 에러 처리 방법 순수 NodeJs, Express에서의 404 에러 처리 NodeJs로 구현한 웹 애플리케이션에 클라이언트가 잘못된 주소에 접근하게되면 404 와 같은 에러 처리를 해주어야 한다. 물론 기본 프레임웍을 사용하지 않는 nodejs에서는 분기처리를 통해 간단한 일이지만, express에서는 어떻게 해결해야 할까? 순수 NodeJs 코드에서 분기를 통한 404 에러 처리 //기본 nodejs에서 404 에러 처리 const http = require('http'); const url = require('url'); const app = http.createServer((req,res)=>{ let pathname = url.parse(req.url,ture).pathname; //지정된 페이지 일시, 200 .. 2021. 3. 30.
[javascript] 클래스 Class 선언 생성자 함수 getter setter constructor method Javascript 자바스크립트 클래스 1. 클래스(class) 선언 2. 생성자(constructor) 3. 함수(method) 4. getter 5. setter 자바스크립트에서 객체를 사용하기 위한 방법으로 Class가 있는데 다른 언어를 사용하던 사람에게는 아주 익숙한 키워드일 것이다. 클래스의 선언 class 원하는클래스명 { constructor(파라미터1, 파라미터2){ this.속성명1 = 파라미터1; this.속성명2 = 파라미터2; } } 위 예제 코드에서 constructor는 생성자를 의미한다. 생성자는 객체를 생성할때 자동으로 호출되는데, 전달되는 값을 통하여 객체를 생성함과 동시에 속성값을 초기화할수 있다. 물론 생략 가능하고, 내부에 객체생성시 원하는 기능을 입력하면 해당 기능.. 2021. 3. 29.
[MAC] 맥 폴더 즐겨찾기 추가/ 독(Dock)에 추가하기 Mac 사용 설명서 맥 폴더를 즐겨찾기에 추가하기 1. finder 열기 2. 왼쪽 목록에 즐겨찾기로 원하는 폴더를 드래그 앤 드랍한다. 맥 앱을 독(Dock)에 추가하기 1. 원하는 앱을 선택 2. 앱을 Dock에 드래그 앤 드랍한다. 2021. 3. 29.
728x90