css style

css style

css는 사실 같은 화면이라도 개발자의 스타일에 따라 엄청나게 달라질 수 있는 부분이다.(다른 언어도 그렇긴 하지만...)

여기서는 내가 흔히 사용하고 비교적 범용적으로 사용하는 방법인 flex box의 사용법에 대해서 기록해보고자 한다.

1.flex numbering

css의 flex 속성에 1, 2, 3 등의 숫자를 통하여 각각의 영역이 가지는 위치를 지정하는 방식이다

장점

1. header를 구성할 때, header의 부모 flex를 지정하고 자식 영역을 좌, 우, 중앙 등에 배치할 때 효과적이다. 특히 반응형에서 깨질 우려가 없다는 점도 장점

2. 유지보수가 쉽다. flex의 number만 조정해도 레이아웃을 효과적으로 조정하기 때문에 설사 다른 개발자라도 원리만 안다면 수정하기 쉽다는 장점이있다.

2.display+ flex-direction+ justify

display: flex; flex-direction; justify-content;의 정렬 조합을 이용한 위치 지정방식이다.

장점

1. 중앙정렬을 할때 아주 효과적이다.

   flex-direction: column, justify-content:center: 세로 중앙정렬,
   flex-direction:row, align-items or self:center: 가로 중앙정렬

2. 초반에 레이아웃을 구성할 때, 빠르게 레이아웃 구성이 가능하다.

물론 다른 좋은 방법도 있을 것이고, 나도 더 좋은 css 방식을 찾을 것이지만
=>위의 방법 두가지를 혼합해서 사용하는 것을 가장 권장한다.