[CSS] Property별 사용법

파란색으로 표시한 값이 디폴트(기본) 값이다. 애니메이션, 레이아웃과 관련된 프로퍼티는 이후에 다른 포스트에서 다룰 예정이다. display (표시) 해당 태그가 얼마만큼의 공간을 차지할 것인가를 결정한다. none: 영역을 차지하지 않음 block: 가로 영역을 모두 채움(기본: width:100%) div, p, h, li 등의 기본 값에 해당 block은 width, height 속성을 지정할 수 있다. inline: 딱 자기 공간만큼 채움 (줄바꿈 없음) span, b, i, a 등의 기본 값에 해당 inline을 사용할시 width, height 지정 불가능 inline-block: 줄바꿈은 없으나 너비, 높이를 지정할 수 있음. 레이아웃 배치에 사용 fiex: 컨테이너를 flex contain..

• format_list_bulleted 개발 일지/Web FrontEnd
• · 2020. 9. 10.
• textsms

[CSS] 자주 사용하는 배치 방법

CSS의 구조 css는 다음과 같은 구조로 이루어져 있으며, 각 selector를 node라고 부른다. selector { property : value; } 이 글에서는 구조에 명시된 순서대로 css에 대하여 알아보기로 한다. selector의 종류 html의 태그의 종류, 태그에 부여된 id와 class의 이름, html 간 계층적 구조에 의해 하나의 html 태그라도 이를 나타내는 다양한 selector 표현이 존재할 수 있다. 여기에서는 주로 사용하는 selector 표현에 대해서만 정리해 보기로 한다. 태그 이름: tagName { } 클래스: .className { } 아이디: #idName { } 자식 (바로 한 계층 아래만): parent > child 자손 (하위 계층을 모두 포함): a..

• format_list_bulleted 개발 일지/Web FrontEnd
• · 2020. 9. 9.
• textsms

[Git] 내 로컬 환경에서 버전 관리하기

용어 깃(Git) 깃(Git)은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 ★분산 버전 관리 시스템★이다. (위키백과) Git을 이용하면 자신의 Local 환경에서 파일을 버전별로 관리할 수 있으며, 깃 프로젝트를 지원하는 웹 호스팅 서비스인 GitHub를 이용함으로써 원격 저장소에 이 파일을 저장하고 공유할 수 있다. 저장소(repository) Git이 저장하는 모든 변경사항은 우리가 '저장소'로 만든 곳에서 이루어진다. 이중 내 디바이스 환경에 위치한 로컬 저장소는 git init 명령을 통해 생성되며, .git 폴더를 통해 관리된다. 커밋(Commit) 깃 저장소에 저장되는 파일에 대한 스냅샷의 기록. 각 커밋에 기록된 스냅샷은 '버전'이라고도 ..

• format_list_bulleted 개발 일지/Git
• · 2020. 9. 6.
• textsms

자주 사용하는 리눅스(Linux) 명령어 정리

pwd: 해당 디렉토리의 주소 출력 ls: 해당 디렉토리 안의 파일들 출력. 주로 -la를 붙여 씀. -a: 숨김 파일 표시 -l: 상세 정보 표시 -r: 정렬 순서 역순 -t: 파일 작성 시간순 표시 mkdir: make directory. 디렉토리를 생성 ex) mkdir {dirname} rm: remove. 디렉토리를 제거 ex) rm -r {dirname} -r: 지우려는 디렉토리 내 파일도 모두 제거 (r명령은 주로 하위디렉토리 포함을 나타냄) -f: 강제 삭제 (위험) vim: vi(vim) 편집기를 연다. (파일 없을 시 생성 후 실행) ex) vim {파일명} 주로 사용하는 명령어도 있다. 더보기 a 또는 l을 눌러 수정 ESC를 눌러 수정 종료 :를 눌러 종료 조건 추가 종료 조건: q..

• format_list_bulleted 개발 일지/Linux
• · 2020. 9. 5.
• textsms

[nodeJS] fs(file system) 모듈을 이용하여 JSON 파일 읽고 사용하기

node에서는 기본적으로 fs라는 모듈을 제공한다. 이를 통해 JSON 등 다른 파일을 읽어오고 사용할 수 있다. 1. JSON 파일 불러 와서 Object로 만들기 const fs = require('fs'); 별도의 install 없이, 다음과 같이 모듈을 import 함으로써 fs 모듈을 사용할 수 있다. js와 같은 디렉토리에 다음과 같은 doc.json 파일을 생성한다. { "name": "팬팬", "age": 3, "favorit": ["코딩", "노래", "메이플스토리"] } 일단 JSON 파일을 불러온 뒤 그냥 출력해보면, 결과는 다음과 같을 것이다. const doc = fs.readFileSync('doc.json'); console.log(doc); 이는 버퍼에 있는 16 진수로 이루..

• format_list_bulleted 개발 일지/JS
• · 2020. 8. 27.
• textsms

[nodeJS] 자주 사용하는 npm 명령어

npm init - package.json을 생성 + -y 옵션을 붙이면 모두 default 값으로 생성 npm install {패키지명}(@{버전}) --save(-S) --dev(-D) -g save: package.json의 dependencies에 추가한다. (이제 기본 옵션이 되어서 생략해도 된다.) dev: package.json의 devDependencies에 추가한다. 개발할 때에만 사용되는 모듈을 지정할 때 사용 g: global로 (해당 프로젝트 뿐 아니라 어디에서든 사용 가능) 설치 + npm install만 입력하고 실행하면 dependencies에 명시된 패키지들을 다운로드한다. + install도 i 라고 줄여 쓸 수 있지만 별 걸 다 줄인다. npm run {스크립트명}: pa..

• format_list_bulleted 개발 일지/JS
• · 2020. 8. 26.
• textsms

javascript - 정규식 (Regular Expression)

은근히 정규식을 사용할 일이 많아 정규식에서 사용되는 특수문자들의 기능, 자주 사용하는 정규식에 대해 정리해보고자 이 포스팅을 작성하게 되었다. 출처는 모두 아래 페이지에 있다. Mozilla : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/정규식#special-negated-look-ahead 정규 표현식 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 ,�� developer.mozilla.org 정규식 사용법 // 리터럴 const reg = /ab*c/; // 생성자 함수 이용 let Reg ..

• format_list_bulleted 개발 일지/JS
• · 2020. 8. 9.
• textsms

JavaScript - 비동기 처리

자바스크립트를 처음 배우면서 가장 당황했던 것은, 코드가 반드시 순차적으로 실행되지 않는다는 것이었다. 입력을 받아 입력값을 바탕으로 간단한 내용을 처리하는 코드를 짜면서도, 입력을 받기도 전에 내용을 처리하려 들어서 고작 20줄 정도를 짜면서도 상당히 애를 먹고서야, 이 문제가 JS의 비동기적 특성 때문인 것을 깨달았다. 그래서 비동기 처리 방법에 대해 간단히 짚고 넘어가기로 했다. 비동기 처리란 무엇인가? 비동기에 대해 이해하기 위해서는 우선 다른 프로그램들의 동작 방식인 동기에 대해 확실히 알고 있는 게 좋다. 동기(sync)란, 요청한 것에 대한 결과가 반환되기까지 그 자리에서 기다리는 처리 방식이다. 비동기(Async)란, 요청만 하고 결과 반환 여부와 상관 없이 다음 동작을 실행하러 움직이는 ..

• format_list_bulleted 개발 일지/JS
• · 2020. 8. 2.
• textsms