🦁_21.11.12 TIL

21년 11월 12일

📝 CSS

📎 함께 코드 작성 - 반응형 웹 구현

1만 시간의 법칙

📎 CSS 설계 기법

OOCSS(Object Oriented CSS)

참고 링크

• https://www.slideshare.net/stubbornella/object-oriented-css
• http://oocss.org/

• Two main principles

1. Separate Structure and Skin
2. Separate Container and Content

• 10 best practices

1. Create a component
2. Use consistent semantic styles
3. Design modules to be transparent on the inside
4. Be flexible
5. Learn to love grids
6. Minimize selectors
7. Separate structure and skin
8. Separate container and content
9. Extend objects by applying multiple classes to an element
10. Use reset and fonts from YUI

• 개념 : 레고처럼 여러가지 모듈을 만들어 조합하도록 하는 방법론
• 구조와 스킨의 분리
  같은 형태의 UI에 스킨만 다르다면 구조와 스킨을 분리하여 조합
  • 구조 : 레이아웃에 영향을 미치는 속성
    => width, height, padding, margin 등
  • 스킨 : 레이아웃에 영향을 미치지 않지만 시각적인 영향을 주는 속성
    => font 관련 속성, color, background, border 등
• 콘테이너와 콘텐츠의 분리
  콘텐츠의 스타일이 콘테이너에 종속되지 않도록 한다. 즉, 콘텐츠의 스타일 선택자에 콘테이너의 클래스를 배제한다.

SMACSS(Scalable and Modular Architectyre for CSS)

참고 링크

• http://smacss.com

• 개념 : CSS 코드를 역할에 따라 분리
  • Base
  • Layout
  • Module
  • State
  • Theme
• Base : 기본 스타일 정의
  => 공통적으로 사용되는 font-family, font-size, reset style, <img> 공통 스타일 등

/* Examples of Base styles */
  html, body, form { 
    margin: 0; 
    padding: 0; 
  }
  input[type=text] { 
    border: 1px solid #999; 
  }
  a { 
    color: #039; 
  }
  a:hover { 
    color: #03C; 
  }

• Layout : header, main area, footer, side bar와 같은 웹 사이트에서 큰 틀을 구성하는 모듈에 관한 규칙
  header, footer 와 같은 주요 레이아웃에는 id 선택자를 사용하여 스타일링하지만, 페이지의 구성요소에 따라 class 선택자를 적절히 사용하기도 한다.

  #header, #article, #footer {
    width: 960px;
    margin: auto;
  }

  #article {
    border: solid #CCC;
    border-width: 1px 0 0;
  }

• Module : 레이아웃 안에 배치되는 모든 요소를 의미.
  반복되는(재사용 가능한) 요소들이기 때문에 id선택자를 사용하지 않고, 요소 선택자 사용을 최소화 한다.
  => 요소 선택자는 자식 요소에만 적용
  비슷한 모듈 안에서도 모양이 조금씩 다를 경우, sub-class를 만든다
  => btn-small, btn-long 등

• State : 특정 상태에 있을 때 모듈 또는 레이아웃이 어떻게 표시되는지 설명하는 방법
  => 숨겨져 있거나, 확장되어 있거나, 활성/비활성 상태 등
  기존 스타일을 덮어쓰거나 확장하는데 사용

  • sub-class와 다른 점 : 레이아웃이나 모듈에 둘 다 적용 가능하지만,
    sub-class는 한 번 적용되면 바뀌지 않는 속성
    state는 Javascript를 이용하여 필요할 때 넣거나 뺄 수 있다.
  • 클래스 이름 앞에 is라는 접두사 사용
    => is-hidden, is-active 등

  .tab {
    background-color: purple;
    color: white;
  }

  .is-tab-active {
    background-color: white;
    color: black;
  }

• Theme : 사용자에게 어플리케이션이나 사이트의 느낌을 전달하는 이미지(background-image), 색상(background-color, color) 등을 의미

  /* in module-name.css */
  .mod {
    border: 1px solid;
  }

  /* in theme.css */
  .mod {
    border-color: blue;
  }

BEM(Block, Element, Modifier)

참고 링크

• http://getbem.com

• 개념 : 얀덱스(Yandex)사가 만든 설계 방법으로, 기본적으로 OOCSS와 같은 모듈 기반의 방법을 기초로 한다.

• 기본 규칙 : id선택자와 요소 선택자를 권장하지 않는다.
  => class 선택자만 사용하는 이유 : 가중치 계산을 원활히 하기 위해 (z-index를 10단위로 사용하는 것과 같다.)

• Block

  • 어디에서나 재사용 가능한 부품을 의미
  • class 네이밍은 목적이 명확해야 한다
    => error, hidden 등
  • 소문자 사용, 여러 단어가 연결되는 경우 케밥케이스 사용

• Element

  • block을 구성하는 요소, block에 종속되어야 한다.
  • block의 클래스 이름을 상속받아 접두사로 사용하고, element의 클래스 이름과 언더바 두 개를 이용해 연결하여 사용
    => block__element
  • element 안에 또 element를 사용할 경우, 네이밍은 element끼리 중첩하지 않는다.
    => opacity-half__btn__txt ( X ) / opacity-half__txt ( O )

• Modifier

  • block이나 element의 모습/상태/움직임을 정의
    => 요소의 활성 상태, 사이즈, 컬러 등
  • 단독으로 클래스 이름을 사용하지 않고, 두 번재 클래스 이름으로 사용

  <div class="block block--mod">...</div>
      <div class="block block--size-big block--shadow-yes">...</div>

  /* Use modifier class name as selector: */
  .block--hidden { }

  /* To alter elements based on a block-level modifier */
  .block--mod .block__elem { }

  /* Element modifier */
  .block__elem--mod { }

📎 과제 - 로그인 화면

위니브 로그인 화면

---

마무리

• 수업 중간에 어쩌다가 취업설명회? 같은 세션이 진행되었는데 꿀팁들이 와르르
  => 줍줍
• 수업이 끝나고 운영매니저님께서 현재 교육 2주차가 지나가며 너무 달리고만 있는건 아닌지 걱정스런 글과 함께 이번 주말은 잠시 휴식은 취하는 것을 추천해주셨다. 이런 부분까지 챙겨주시니 공부를 더 열심히 할 수 밖에!!
  => 그리고 일찍 잤다고 한다