와이어프레임
와이어프레임(wireframe) 이란?
애플리케이션을 개발할때 레이아웃의 뼈대를 그리는 단계를 말한다
단순한 선,도형으로 웹 인터페이스를 시각적으료 묘사한 것이며, 와이어프레임을 보고 어떤 목적을 가진 어플리케이션인지 유추할 수 있습니다
목업
목업(mockup)이란?
HTML의 데이터 형태를 하드코딩으로 하는 방식입니다
CSS방법론
BEM
BEM(Block Element Modifier) 이란?
블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 이름을 작성하는 방식의 방법론
.header__content--disabled
- block - 재사용성이 가능하고 기능적으로 독립이 가능한 컴포넌트
- element - 블록을 구성하는 단위
- modifier - 블록이나 요소의 속성(상태)
OOCSS
OOCSS(Object Oriented CSS) 란?
CSS를 모듈방식으로 작성하여 종북울 줄이는 방식의 방법론
- 컨테이너와 컨텐츠를 분리
<div class="header common-width">Header</div>
<div class="footer common-width">Footer</div>- 구조와 모양을 분리하거나 결합시키기
<a class="btn instagram">인스타그램</a
<a class="btn facebook">페이스북</a>>SMACSS
SMACSS(Scalable and Modular Architecture for CSS)란?
CSS를 범주화로 패턴화 하고자 하는 방법론
- base - Reset, Variable 등을 포함하고 !important를 쓰지 않음
- layout - 주요 요소(id)와 하위 요소(class)로 구분하고 접두사를 사용
- module - 사용성이 높은 구성 요소를 정의
- state - 요소의 상태 변화를 표현하고 접두사 “is-“나 “s-“를 사용
- theme - 용자가 선택 가능 하도록 스타일을 재선언하여 사용
Atomic CSS
Atomic CSS 란?
미리 만들어둔 시각적인 이름을 바탕으로 HTML에서 필요한 스타일을 적용하는 방식 (tailwindcss, bootstrap 등등)
의미론적인 방법의 한계를 느껴 등장했지만, 코드가 지저분해지고 파악이 어려운 단점도 존재한다
FlexBox
- 부모요소
display : flex - 자식요소
flex: 0 1 auto (기본값 grow/shirk/basis )
flex-grow- 팽창 지수
flex-shirk- 수축 지수
flex-basis- 기본크기
리뷰
- 사실 css방법론은 아직도 어느게 제일 적합한지 늘 고민하면서 사용하고있다
- 의미론적인 CSS 밥벙론을 사용할 때는 SCMASS + BEM 을 사용했던 것 같고, bootstrap 이나, 테마 스킨이 적용되어있는 경우는 보통 AtomicCSS로 되어있어 그대로 적용해서 사용해서 작업을 했었다
FE