[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