[CSS] Selector, Layout, Flexbox

CSS Selectors

* {} /* universal selector */
div, footer {} /* tag selector */
.main {}
#only {}

/* attribute selector */
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

/* combinators */
/* 부모-자식은 바로 위-아래 관계임. 후손은 단계가 여러 단계. */
div p {} /* descendant combinator, div 안에 어디든 있으면(후손이면) 선택됨. */ 
div > p {}/* child combinator, div의 자식이여야 함. */

div ~ p {} /* general silbling combinator, div의 형제면서 아래에 있으면 선택됨. */
div + p {} /* adjacent sibling combinator, div의 형제면서 바로 아래에 있으면 선택됨. */

/* Tree-structural pseudo-class (구조 가상 클래스 셀렉터)*/
:first-child
:last-child
:nth-child()
:nth-last-child()

:first-of-type
:last-of-type
:nth-of-type()
:nth-last-of-type()

/* 부정 셀렉터 */
:not()

/* 그 외에 엄청 많다...*/

CSS Selectors Reference (W3C School)

일단 많이 있다는 것만 알아두자.

CSS Architecture

• Block-Element-Modifier(BEM) vs Atomic CSS
• OOCSS, BEM, SMACSS
  
  

CSS Reset

/* 아래 코드만 있어도 Reset 이 된다. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox

flexbox는 박스를 유연하게 늘리거나 줄여준다.

부모 요소에

• display:flex를 적용한다.
• flex-direction: column으로 세로방향으로 바꿀 수 있다. (default : row)
• 정렬하기
  • justify-content(가로로 움직임)
  • align-items(세로로 움직임)

자식 요소에

• flex: <grow> <shrink> <basis> (default: 1 0 auto)
  • grow: 늘어나는 비율
  • shrink: 줄어드는 비율
  • basis: 고정 크기 (flex-grow 속성이 0 일때만 basis 값이 적용됨.)

flex-grow와 flex-shrink를 함께 사용하지 않는다.

• 비율로 레이아웃을 지정할 경우 flex-grow 속성에 변화를 주는 방식을 권장.
• flex-shrink는 width나 flex-basis에 따른 비율이므로 실제 크기를 예측하기가 어려움.
• flex-grow로 비율을 변경하는 경우, flex-shrink는 기본값인 1로 두어도 무방.

참고

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됨.
• 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않음.
• (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width 사용가능.

느낀점

• 화면을 구성하니까 드디어 뭔가 웹개발 느낌이 난다.
• 나는 졸업작품을 할 때 BEM 을 썼었다. css class 가 많아지면 관리하기가 힘들어지고, 반드시 방법론이 필요한 시점이 온다. 근데 BEM 은 naming 하는데 상당히 힘들었다. 클래스 이름이 엄청 길어지기도 한다. OOP의 관점을 css 내로 끌어들인다는 점에서 OOCSS가 흥미로워 보이지만, CSS에서는 체감상 재사용이 크게 일어나지 않는 것 같아서 오히려 가독성이나 유지관리가 어려울 수도 있을 것 같다. 여러 방법론들을 적절히 섞어서 상황에 맞추어 편하게 쓰는게 좋을 것 같다.