HTML/CSS 3회차 | CSS 기초, flex, grid, 미디어 쿼리, CSS 네이밍 방법론, css framework

 

사이트

https://webpack.js.org/

webpack

 

flex

 

<div class="container">
  
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>

 

div {
  font-size: 20px;
  border: 1px solid gray;
}

.container {
  display: flex;
  background-color: red;
}

.box {
  
  background-color: white;
}

 

flex(flex-grow, flex-basis, flex-shrink의 축약형)

flex-grow : 남은 영역이 있으면 그것을 각각 자식들에게 나눠 줄거야 (커질 때 얼마나 커질건지)

flex-shrink: 축소. 자식을 배치할 공간이 부족할 때는 자식 크기를 줄여야 함. 줄이는 비율

--> 알아서 줄이거나 키워줄게 ! flex

flex-basis: 아무것도 안 했을 때 자식요소 크기 (default = 0)

div {
  font-size: 20px;
  border: 1px solid gray;
}

.container {
  display: flex;
  background-color: red;
}

.box {
  flex: 1;
  background-color: white;
}

 

flex의 합은 7, 각자가 flex:1 로 1개씩 가지니까 똑같은 크기로 !

 

direction

flex-direction: row; 수평

flex-direction: column; 수직

flex-direction: column-reverse;

direction: ltr;

direction: rtl;

 

정렬 (justify-content)

https://developer.mozilla.org/ko/docs/Web/CSS/justify-content

justify-content - CSS: Cascading Style Sheets | MDN

 

main 축을 기준으로 정리됨

main --> direction이랑 같음

cross(교차축) direction의 반대

 

align-items: stretch, center, start, end;

https://developer.mozilla.org/ko/docs/Web/CSS/align-items

align-items - CSS: Cascading Style Sheets | MDN

 

grid

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

grid - CSS: Cascading Style Sheets | MDN

 

미디어 쿼리

조건 유형 학습하기 (width, orientation 등)

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN

 

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

 

페이지가 인쇄된 경우에만 본문을 12pt로 설정

@media print {
  body {
    font-size: 12pt;
  }
}

 

미디어 쿼리 테스트 사이트

https://screenfly.org

Screenfly / Test Your Website at Different Screen Resolutions

 

CSS 전처리기 (SCSS)

 

https://sass-lang.com

Sass: Syntactically Awesome Style Sheets

 

variable

scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

--> css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

 

Nesting(중첩)

scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

css (중첩 지원하지 않음)

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

 

Modules

scss

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

 

css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

 

CSS 네이밍 방법론
BEM

보통 면접용 ? 실무에서는 잘 쓰이지 않음 (?)

 

https://getbem.com/

BEM — Block Element Modifier

 

Atomizer

https://acss.io/

Atomizer

 

css framework

 

https://ant.design

Ant Design - The world's second most popular React UI framework

 

https://mui.com

MUI: The React component library you always wanted

 

https://blueprintjs.com/docs/#blueprint

Blueprint – Documentation

 

https://getbootstrap.com

Bootstrap

 

참고 사이트

https://stateofjs.com/en-US

State of JavaScript