본문 바로가기
728x90

분류 전체보기156

[CSS] 변수 Variable 사용하기! CSS 변수(variable) 사용 CSS 코드의 가독성과 유지보수를 위해서는 변수의 사용을 권장한다. 변수의 선언은 어디서나 가능한데 변수의 선언은 원하는 변수 이름 앞에 -- 를 붙여주면 된다. 변수의 사용은 var 함수를 통해 가능하다. 변수의 선언과 사용 //변수 선언 예 --background-color : blue; //변수의 사용 예 background : var(--background-color); 하지만 하단의 예시와 같이 변수의 선언을 셀렉터 스코프 안에서 선언한다면, 다른 언어의 지역변수의 기능과 비슷하게 해당 엘리먼트에서 밖에 변수를 사용할수 없다. 셀렉터 내 변수의 선언과 사용 .selector { //변수의 선언 --background-color : orange; //변수의 사용.. 2021. 3. 12.
[NodeJs] Http Cookie (웹 브라우저 쿠키) HTTP 쿠키는 서버가 브라우저에 전달하는 데이터이다. 브라우저는 해당 데이터를 저장해 두었다가 동일한 서버에 접속시 저장된 데이터를 함께 전송한다. 쿠키는 주로 3가지 목적을 위해 사용된다. 세션관리 로그인, 장바구니 정보 등 개인화 구글 테마, 언어 모드 등의 세팅 트래킹 맞춤형 광고 등 사용자의 행동을 기록하고 분석 쿠키 만들기 쿠키는 헤더안에 포함되어 브라우저에 전송된다. 만료일 또는 시간 명시가 가능하고, 만료된 쿠키는 더이상 보내지 않을수 있다. 또한 특정 경로의 제한 설정이 가능하다. 서버측 쿠키 전송 [NodeJS] const http = require('http'); http.createServer((req,res)=>{ res.writeHead(200,{ //'Set-Cookie' : .. 2021. 3. 11.
[Git] 깃허브 데스크톱으로 쉽게 문서 관리하기 깃허브 - 깃 허브 데스크톱 GitHub-Desktop 깃허브는 잘쓰면 상당히 좋은 툴이다. 수시로 백업이 가능해 문서를 작성할때 원하는 시점으로 언제든지 돌아갈수 있고 문서의 업데이트 과정 또한 히스토리 형식으로 자세히 확인할수 있어서 조금이라도 문서작성이 복잡해지고 절대적으로 백업이 필요한 경우라면 깃은 필수라고 볼수가 있다. 하지만 이러한 장점에도 불구하고 CLI방식의 조작이 부담스러워 깃 사용을 꺼리는 경우가 많은데 GUI방식의 깃 데스크톱의 간단한 사용방법을 소개하고자 한다. 깃 허브 데스크탑 설치하기 1. 구글에 깃허브 데스크탑 검색 2. 상단에 desktop.github.com 클릭 3. url 접속 후 메인 화면에 나오는 4. 다운로드 버튼 클릭 후 설치 설치 완료 후 깃 데스크탑 실행 1.. 2021. 3. 9.
[NodeJS] NodeJs 와 npm 설치 하기 NodeJs, Npm 설치 하기 1. 구글 검색 엔진에서 NodeJS 를 검색한다. 2. 상단에 NodeJs 공홈에 접속한다. 3. 자신의 운영체제에 맞는 다운로드 버튼이 두개가 보일 것이다. 왼쪽 LTS는 나온지 조금 된 안정적인 버전이고, 오른쪽 현재 버전은 출시된지 얼마 안된 버전으로 버그가 있을수 있다. API나 관련자료가 다양한 왼쪽 LTS 버전의 다운을 추천한다. 4. 다운 받고 설치 완료하였다면, 윈도우는 ctrl + F 를 눌러 cmd 를 실행 후, node -v라고 타이핑 후 엔터 클릭 npm - v라고 타이핑 후 엔터 클릭 맥OS는 terminal.app을 실행 한 후 node -v라고 타이핑 후 엔터 클릭 npm -v라고 타이핑 후 엔터 클릭 아래와 같은 메시지가 출력이 된다면, 설치.. 2021. 3. 6.
[CSS] Transition 애니메니션 효과 property duration timing-function CSS 애니메이션 효과 주기 Transition property duration timing-function Transition-property : 이벤트시 변경 원하는 Property Transition-duration : 변경 시간 Transition-timing-function : 변경 속도 샘플 예제 .box { background-color : royalblue; width : 100px; height : 100px; } .box:hover { background-color : tomato; transition-property : background-color; transition-duration : 500ms; transition-timing-function : ease; } 출력 결과 2021. 3. 5.
[TERMINAL] 터미널 명령어 모음 (MacOS,UNIX,LINUX) MacOS Terminal.app 명령어 모음 현재 위치 (Print working directory) pwd 폴더 이동 (Change Directory) 경로 이동 : cd 경로 상위 폴더 이동 : cd ../ 사용자 폴더 이동 : cd ~ [~ 생략 가능] 최상위 폴더 이동 : cd / 현재 폴더 내 파일 리스트 확인 (Check File List in Current Directory) ls 현재 폴더 내 폴더 생성 (Make Folder in Current Directory) mkdir 원하는 폴더명 파일 명 수정 (Modify File Name) mv 파일명 새로운파일명 파일 삭제 (Remove File) rm 파일명 폴더 삭제 (Remove Folder) rm -r 폴더명 터미널 화면 클리어 (.. 2021. 3. 5.
[DATABASE] SQL 명령어 모음 DATABASE SQL 명령어 모음 (Join 제외) 검색 원하는 명령어가 있으면 현재 페이지에서 (윈도우) ctrl + F (맥) command + F 누르셔서 찾으시면 됩니다. 1. Database 접속 (Connect) USE 데이터베이스명; 2. Database 생성 (Create) CREATE DATABASE 데이터베이스명 3. Database 삭제 (Delete) DROP DATABASE 데이터베이스명 4. Table 생성 (Create) CREATE TABLE SampleTable( id INT(11) NOT NULL AUTO_INCREMENT, title VARCHAR(100) NOT NULL, description TEXT NULL, PRIMARY KEY(id) ); //NOT NULL .. 2021. 3. 5.
[mysql] 데이터 베이스 설치 방법 Mysql 설치 방법 - Database 1. Google 검색 [검색어 : mysql community edition download] 2. MySQL Community Edition - MySQL 클릭 3. Download MySQL Communuty Edition 클릭 4. MySQL Community Server 클릭 5. 자신의 운영체제에 맞는 버전 선택 후 다운 후 설치 2021. 3. 5.
[CSS] Background 속성 CSS background-image background-repeat background-size background-position background 관련 속성 background-image : 이미지 주소, 경로 background-repeat : 이미지 반복 여부 background-size : 이미지 사이즈 자동 축소 확대 background-position : 이미지 중앙부 포커스 출력 CSS Selector { background-image : url('이미지주소'); /*이미지 반복 여부*/ background-repeat : no-repeat; /*이미지 중앙부 포커스 출력*/ background-position : center; /*커버에 맞춰 이미지 사이즈 자동 축소 확대*/ back.. 2021. 3. 4.
[CSS] transform - Translate 수평, 수직 정렬 CSS 수평 수직 정렬 Transform - translate CSS 를 사용하다보면, 좌우,상하 가운데 정렬을 해야할 일이 많다. 가운데 정렬할수 있는 방법에는 다양한 방법이 있지만, transform 속성 또한 상당히 많이 사용이 되고 있다. CSS Selector { transform : translate(좌우, 상하); } 샘플예제 출력 결과 코드 수정 .container > .box { width : 200px; height: 200px; background : royalblue; /*하단의 코드 추가*/ transform : translate(100%,100%); } 출력 결과 2021. 3. 4.
728x90

티스토리툴바