Skip to content

0727.md

Latest commit

 

History

History
200 lines (151 loc) · 8.46 KB

0727.md

File metadata and controls

200 lines (151 loc) · 8.46 KB

오늘배운내용 # Day8_0727_목요일

출처 > poiemaweb

에버노트 정리 > Nayoung's Evernote_0727

  1. Centering
  2. 부트스트랩 _ basic
  3. flexbox

수업 중 tip

  • 코드 리뷰시 자주 물어보는 질문
    • 네이밍
    • 코드를 따로 분리 안한 이유
      • 중복되는 코드는 따로 분리해서 변수로 불러오거나 클래스명을 중복해서 사용하면서 사용하자.

framework와 platform의 차이?

  • 리액트는 라이브러리, node.js는 platform, node.js에서 express는 framework.. 차이는 매번 찾아봤는데도 아직 익숙하지 않음.

  • Platform : 소프트웨어SW를 실행해주는 환경. Windows, Linux 등의 OS가 예이다.

    • Javascript : node.js 위시켓

      이처럼 Node.js가 각광 받는 이유는 서버측 언어와 클라이언트측 언어를 JavaScript라는 한 언어로 구축할 수 있다는 장점 때문인데요. 그렇기 때문에 Node.js를 이용하면 빠르고 쉽게 고성능의 앱을 구현할 수 있습니다. 특히 실시간 알림이 필요하고 변동되는 정보의 양이 많은 메신저 기능이나 푸쉬 기능이 필요한 애플리케이션을 만들고자 할 때, Node.js를 이용하여 구축하는 경우가 많습니다.

      저번에 선생님이 말씀해주신 부분.

      출처

    • Ruby : Ruby on Rails (+ EventMachine for event loop)

    • Python : Django (+ Twisted for event loop), Pyramid, Bottle, Nimble

    • Java : Play, Spring, Vert.x

    • PHP : cakePHP, Code igniter

    • Scala : Play

    • Erlang : inets, misultin

  • Framework : Software Framework. 클래스와 라이브러리들의 집합이라고 생각하자. 여기에서 라이브러리랑은 뭐가 달라요?라는 의문이 생긴다.

Polymer(Google)/Angular(Google)/Ionic(ionic)/React(Facebook)

Libraries vs framworks

  • LIbrary는 개발자가 프로그램의 흐름을 제어한다. 주가 개발자이다. 그러나, Framework는 그 반대이다. 프레임워크의 실행 흐름 내에서 개발자가 일부분을 개발한다.
  • 프로그램/소프트웨어의 '실행' 부분에서 플랫폼은 필수다. 프레임워크도 필요한 경우에는 필수다. 이런 점에서 뭐가 달라?라는 의문이 생기는 모양이다. 하지만 '개발' 부분에서는 프레임워크와 라이브러리가 비교 대상이다.

아침

  • 레이아웃 잡기
  • 다 이해하고 float clear까지 했는데 안됐던 이유.

    row에 height를 잡아버렸다;;

1. Centering

1. 수평정렬

2. 수직정렬

2.1 inline/inline-block 요소

2.1.1 Single line

정렬 대상의 부모요소에 padding-top과 padding-bottom 프로퍼티를 동일하게 적용한다.

  • padding을 사용할 수 없는 경우, 요소의 height와 line-height 프로퍼티값을 동일하게 적용한다. 단 이 방법은 행간이 지나치게 넓어지거나 Click Dead Zone 이슈가 발생하는 등 여러 줄의 텍스트에는 사용할 수 없다.
  • Clikc Dead Zone

2.2 block 요소

2.2.1 요소의 높이가 고정되어 있는 경우
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  /*요소의 높이(100px)의 반 만큼 위로 이동*/
  margin-top: -50px;
}
  • 높이값을 알고 있는데도 transform, translate를 써넣으면 브라우저가 한줄 더 렌더해야하므로, 웬만하면 짧게 작성한다.
2.2.2 요소 높이가 불확정할 경우
.parent{
  position: relative;
}

.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  // 중심점을 중앙으로 내린것과 같은 의미이다.
}

1. 부트스트랩 - basic

1.1 코드의 재사용

  • CSS를 활용한 UI/UX 디자인은 수많은 셀렉터와 CSS 프로퍼티를 선언하는 작업이다.
  • 이때 중복되는 선언이 발생할 수 있는데 class 어트리뷰트를 활용하면 중복 선언을 방지할 수 있고 코드를 재사용할 수 있다.

1.2 Framework의 장점

  • 팀원들과의 소통이 원활하다
  • 코드의 재사용이 좋다.

1.3 부트스트랩의 장점

  • 반응형이 아주 큰 장점

2. Bootstrap Grid System

Responsive, mobile first fluid grid system.

1. Media Query

  • Bootstrap은 Mobile-first 방식을 기본 지원하므로 Media query에 포함되지 않은 모든 정의는 768px 미만 디바이스를 위한 것이다.
  • Bootstrap은 기본적으로 4개의 breakpoint로 구간을 나눈다.

2. Container

2.1 fixed width container (responsive fixed layout)

  • .container
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/*

margin의 right와 left auto는 중앙정렬이다.

2.2 full width container (fluid layout)

  • .container-fluid

3. Grid system

.container와 .container-fluid는 콘텐츠 요소를 포함하는 부모 요소로서 container 또는 wrapping 요소

  • 그리드 레이아웃을 구성 시에는
    • 반드시 .row(행)를 먼저 배치하고
      • 행 안에 .col--(열)을 필요한 갯수만큼 배치한다.
  • 즉 container 내에 .row(행)을 먼저 배치하고 그 안에 .col--(열)을 배치한다. 그리고 콘텐츠는 .col-- 내에 배치한다.

3.1 행(.row)의 구성

3.2 열(.col- * - *)의 구성

> Bootstrap Breakpoint

<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>

  • 800px일 경우 md-4가 먹힌다.
  • 즉 더 높은 범위가 먹힌다.

3.3 col-class의 복합 구성

3.3.1 Mobile and desktop

  • Bootstrap의 breakpoint는 기본적으로 아래와 같다.

    • Mobile의 경우 breakpoint는 768px 미만(~ 768px)이며 class prefix는 .col-xs-*이다.
    • Desktop의 경우, breakpoint는 992px(992px ~) 이상이며 class prefix는 .col-md-*이다.

  • .col-xs-* class와 .col-md-* class를 혼용하면 아래와 같이 동작한다.

    • viewport width가 992px 미만(~ 768px)이면 .col-xs-* class가 적용된다.
    • viewport width가 992px 이상(992px ~)이면 .col-md-* class가 적용된다.
3.3.2 Mobile, tablet, desktop

  • Bootstrap의 breakpoint는 기본적으로 아래와 같다.

    • Mobile의 경우 breakpoint는 768px 미만이며 class prefix는 .col-xs-*이다.
    • tablet의 경우 breakpoint는 768px 이상이며 class prefix는 .col-sm-*이다.
    • Desktop의 경우, breakpoint는 992px 이상이며 class prefix는 .col-md-*이다.

  • .col-xs-* class, .col-sm-* class, .col-md-* class를 혼용하면 아래와 같이 동작한다.

    • viewport width가 768px 미만이면 .col-xs-* class가 적용된다.
    • viewport width가 768px 이상이면 .col-sm-* class가 적용된다.
    • viewport width가 992px 이상이면 .col-md-* class가 적용된다.

3.4 Nesting columns

3.5 Offsetting columns

  • 열에 .col--offset- class를 추가하면 오른쪽으로 열을 이동시킬 수 있다.

    • 예를 들어 <div class="col-md-2 col-md-offset-4">의 경우, viewport 너비가 992px 이상이면 .col-md-4 만큼 오른쪽으로 이동한 후 .col-md-2 만큼의 너비를 갖는 열을 표시한다.

3.6 Column ordering

  • .col-*-push-*와 .col-*-pull-* 클래스를 사용하여 열의 순서를 변경할 수 있다.

3. flexbox

  • 비교적 최신 브라우저가 아니면 벤더 프리픽스를 사용하여야 하고
  • IE계열은 IE8,9의 경우 지원하지 않고 IE10,11의 경우도 일부 지원하므로 주의가 필요하다.
  • IE계열에서 Flexbox를 사용하기 위해서는 flexibility.js를 사용하면 편리하다.
  • 브라우저의 지원 상황은 caniuse를 참조하기 바란다.