layout/design/components

레이아웃의 기본중 기본: display

• block과 inline의 공통점과 차이점
• inline-block과 vertical-align

 

대부분의 상황을 커버 할 수 있는 레이아웃의 핵심: flex

• FlexBox의 동작 방식 이해하기
• Main Axis와 Cross Axis
• margin auto 키워드로 정렬하기
• justify-content와 align-items
• FlexBox로 Sidebar, Contents 구조 만들기

 

자유도 높은 레이아웃 방법: position

• relative와 absolute
• absolute, left, right, top, bottom 0 기법

 

셀렉터의 카테고리를 나누자

• 공통의 클래스는 별도로 관리하자
• 체계적인 CSS 작성을 위한 Layout Class
• 시각적인 덩어리 기준으로 코딩하기
• 클래스명을 결정하는 규칙 정하기

 

 

 

---

 

 

 

1. 구체화 의 장점 (겹치지 않는다)

1. css 셀렉터만 보고도 html의 마크업 파악 가능
2. 중복되어 나오는 것들을 피해서 프로퍼티 적용 가능함.

 

css작성할때 동일한 원칙으로 일관성있게 작성을 하자. (셀렉터)

마크업구조를 타이트하게 구체적으로 적는다면 다른 요소와 안겹치게.

단점 - 마크업의 변화에 유연하게 대처가 아예 불가능하다. (재사용성이 없음-유지 보수 )/셀렉터가 너무 지저분하게 길어질 수 있다./ 우선 순위가 어떤 것인지 파악이 어렵다.

---

 

 

올바른 HTML 구조

1. 큰 덩어리를 먼저 구성하고 세부 요소를 추가 구성한다.
2. 목적없이 추가된 마크업이 있는지 경계한다.
3. 클래스명은 의미 (또는 역할)를 나타내는 이름으로 작명한다. -범용적으로..
4. 하위 셀렉터의 사용을 최소화한다.
5. CSS셀렉터의 직업군을 만들고 체계화한다.

(reset, layouts, typography, components(common)-버튼, 체크박스, 인풋 (등 공공재) , =>재사용 완전 가능. 여러명과 함께 일하기 좋음

components(독립적으로 사용할 수 있다) - 헤더, 푸터 등등)

 

ex) img는 : - .logo / .cover / .backfround / . thumbnail

 

-> 체계적인 작업을 위한 약속 체계를 구축하고 그것을 따른다.

같은 패턴으로 재부분의 작업이 가능하게.

작업 속도, 퀄리티, 일관성, 모두 충족 가능하게 하는 방법.

css의 고급이란 이런 것이다..!!

 

 

 

네이버창의 레이아웃. 그리고 클래스명.

 

 

 

 

      이렇게 줄여서 사용하면 깔끔.

 

 

 

 

 

 

 

components (보통 width는 설정하지 않는다. 어디서나 들어가서 사용할 수 있게)