[css] Flexbox

flexbox를 사용하면 item의 정렬 방향, 위치 등을 자유롭게 조정할 수 있습니다.

#pond {
   display: flex;
}

위와 같이 css에서 flexbox를 사용할때 올 수 있는 속성들입니다.

justify-content

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

align-item

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

flex-direction

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

order: 순서를 변경합니다.

align-self: 개별요소에 적용할 수 있는 속성입니다.  align-items가 사용하는 속성을 인자로 받습니다.

flex-wrap

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-flow: flex-direction과 flex-wrap을 자주사용하기 때문에 두개를 합친 flex-flow를 사용할 수 있습니다.

• flex-direction과 flex-wrap 두 속성을 인자로 받습니다.
• flex-flow: column wrap;

align-content: 여러 줄 사이의 간격을 지정할 수 있습니다.

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

https 가능한 간편 웹서버 local-web-server

local-web-server 역시 live-server와 같이 html, js등이 서버에 올라갔을때의 결과를 확인할 수 있는 간편한 웹서버이다.
좋은 점은 실행 옵션을 통해 https를 사용할 수 있다는 것이다.

local-web-server 설치

• 프로젝트 root 폴더에서 npm을 사용하여 설치한다.
  $ npm install -g local-web-server

local-web-server 실행

• 프로젝트 root 폴더에서 다음 명령을 이용하여 실행한다.
  $ ws
• https 로 실행하기 위해서는 추가 옵션을 준다.
  $ ws --https

local-web-server를 실행하면 다음과 같이 접속 url이 표시된다.

간편 웹서버 live-server 사용법

html, javascript 등을 이용한 개발을 하다 보면 서버에 올라갔을때 결과를 보고 싶은 경우가 있다.
이때 간단하게 사용할 수 있는 웹서버들이 있다.
live-server도 그중 하나이다.
live-server의 설치 및 사용법을 확인해보자.

live-server 설치

• live-server는 npm을 이용해 간단하게 설치할 수 있다. 프로젝트 root 폴더에서 다음 명령을 실행한다.
  $npm install -g live-server
  *다른 프로젝트에서도 사용할 수 있도록 -g 옵션을 주어 global로 설치한다.

live-server 실행

• 프로젝트 root 폴더에서 다음 명령을 실행한다.
  $live-server
• 서버가 실행되며 기본 설정 브라우저가 오픈된다.
  * 브라우저 주소창에는 다음과 같이 표시된다.
  http://127.0.0.1:8080/

SASS 컴파일러 설치 및 자동 컴파일 설정

프로젝트 초기화

• 프로젝트 root 폴더에서 다음 명령을 실행한다.
  $npm init
  * root 폴더에 package.json 파일이 생성된다.

• 폴더구조는 다음과 같다. (폴더에 있는 파일명)
  root (index.html)
   - css (style.css)
   - sass (main.scss)

SASS 컴파일러 설치

• node-sass 설치를 위해 다음 명령을 실행한다.
  $npm i node-sass --save-dev
  * sass 컴파일러는 개발시에만 필요하므로 --save-dev 옵션을 추가한다.

SASS 컴파일러 실행

• package.json 파일의 "scripts" 항목에 다음 내용을 추가한다.
  {
     "compile:sass": "node-sass sass/main.scss css/style.css"
  }
• root 폴더에서 다음 명령을 실행한다.
  $npm run compile:sass
  * 컴파일되어 style.css 파일로 저장된다.

SASS 컴파일러 자동 실행

• package.json 파일의 "scripts" 항목에 다음 내용을 추가한다.
  {
     "compile:sass": "node-sass sass/main.scss css/style.css -w"
  }
• root 폴더에서 다음 명령을 실행한다.
  $npm run compile:sass
  *대기 상태로 되며, 파일이 변경되면 자동으로 컴파일된다.