2020-07-29

그리드시스템

: 12 column grid가 가장 주류

2,3,4,6으로 나누어진다. column의 갯수가 늘어나면 component의 크기가 작아진다는 것. 모바일은 2-column, 4-column을 많이 사용한다. 태블릿은 8,12columns를 많이 사용한다.

Grid속성을 주면, grid-area와 grid-container가 된다.

---

Text-Indent

:해당 속성을 사용할 수 없는 박스의 종류는 inline박스이다.

=> Text-indent는 본인만의 box를 갖게 되어 inline에서 사용할 수 없다.

---

BEM 표기법(Block, Element,Modifier)

: 위의 세가지를 이용하여 클래스를 작명한다.(각각 __와 --로 구분)

.header__navigation--navi-text{
    color:red;
}

header는 Block, navigation은 Element, navi-text는 Modifier가 된다.

• BEM은 기본적으로 ID값을 사용하지 않고 class만을 사용한다.

• 목적에 따라서 작명한다. 시각적인 요소는 기준이 되지 않는다.

• 이름을 연결할 때, block-name과 같이 하이픈 하나만 써서 연결한다.

• block: 재 사용이 가능한 기능적으로 독립적인 페이지 컴포넌트. 여기저기에 단독으로 사용 될 수 있는 요소. 블럭

• 블럭은 블럭을 감쌀 수 있다.

• element: 블럭을 구성하는 단위이다. 엘리먼트는 블럭처럼 독립적이지 못하고 의존적이다. 자신이 속한 블럭 내에서만 의미를 가진다. 따라서 자신의 블럭외에 다른 곳에서 쓸 수 없다.(다른 블럭에서는 존재의 의미가 없다...)

• BEM표기에서는 엘리먼트내에 속해잇는 또다른 엘리먼트를 하위 엘리먼트로 보지 않고 , 두개 다 모두 블록의 엘리먼트로 취급한다.

• 1) 올바지 않은 BEM 사용법

  <form class="login-form">
      <div class="login-form__content">
          <input class="login-form__content__iput"/>
          <input class="login-form__content__input"/>
          <button class="login-form__content__button">로그인</button>
      </div>
  </form>

2) 올바른 BEM사용법()

<form class="login-form">
    <div class="login-form__content">
        <input class="login-form__input"/>
        <input class="login-form__input"/>
        <button class="login-form__button">로그인</button>
    </div>
</form>

• modifier : 블럭이나 엘리먼트의 속성을 담당한다. 시각적으로 다르거나, 동작이 다른 블럭,엘리먼트를 만들 때 사용.

• ex> --focused, --theme-gray, --disabled...

---

flex속성에서 row를 이용하여 column처럼 배치하기

1) flex items의 width를 100%로 설정한다.

2) flex container의 flex-flow: row wrap;으로 설정한다.

3) 줄바꿈이 될 수 없으며 100%의 width를 갖기위해서 column처럼 줄바꿈 되면서 배치된다. 이 방법을 사용하면 반응형 웹사이트를 제작하는데 있어서도 더 유연한 배치를 쉽게 할 수 있다.

---

button태그의 user agent속성 초기화

border:0;
padding:0;
background-color:transparent;

---

width/height:auto;

컨텐츠의 크기에 따라서 크기가 변하도록 설정 할 때, auto로 지정하면 쉽게 해결 할 수 있다.

---