css우선순위와 display = flex

//// CSS ( Cascading Style Sheet )

1. CSS 우선순위-1

    동일한 선택자로 스타일작성시
    가장 마지막에 작성한 스타일이 우선권을 가짐..

2. CSS 우선순위-2
    서로다른 선택자로 스타일 작성시

    inline : 태그에 직접 스타일을 선언
    자바스크립트 스타일 선언 : 인라인 스타일 선언
    inline > id > class > 요소(태그명)

    display : flex

    요소 : 가로배치 , 세로배치 (block와는 다른개념)
        가로배치선택 (주축) 세로(보조축)
        세로배치선택 (주축) 가로(보조축)
        

    주축 : 명령어 set
    보조축 : 명령어 set

기본구조 

    부모와 자식구조로 이루어짐

    부모 : flex 컨테이너
        자식 : flex 아이템

자식과 자손선택자
    .aa div (자손) ->밑에 자손이 다 선택됨
    .aa > div (자식) -> 밑에 자식만 선택됨
    .aa div:nth child() -> 자손
    .aa > div:nth child() -> 자손

부모 : 
    1) flex선언 
        display:flex
    2) 배치방향결정 선언 
        flex-direction: 
            row(기본값), column
            row-reverse
            column-reverse
    3) 주축, 보조축의 정렬선언
        주축
            justify-content : center
        보조축
            align-items , align-content
    4) 아이템간의 여백선언
        플렉스 아이템사의 공간만 제어

        gap : 10px : 모든 아이템 사이의 간격제어
        gap : 10px 20px; 상하 좌우
    5) 아이템의 합이 부모보다 클때 overflow
        또는 줄바꿈 여부를 선언
    flex-wrap: wrap

자식 : 
    1)아이템의 크기 선언
        flex-grow: 아이템을 키울때
        flex-shrink: 아이템을 수축
        flex-basis: flex 주축방향 크기 설정

        flex:none을 입력
        width, height로 제어

    2)아이템의 순서 선언


    1) 유연한 아이템 크기 생성
    2) 정적인 아이템 크기 생성


단축키
젠코딩

.box$*3

클래스박스 1,2,3이 생성됨

.box*3 

클래스박스 3개가 생성됨 (형제)

.box>.box2*3

.박스 안에 자식 박스2가 3개 생성됨

.box{title$3}*3


///자식요소가 동일한 요소일 경우

div
    div 
    div

:fitst-child 장남
:last-child 막내
:nth-child(n) n번째 자식
======> 동일한 요소

///자식요소가 여러 요소일 경우

div 
    h1
    div
    div
    p


그룹선택자
a,b {color="#f00"}


권장
width => 부모설정
height => 자식설정


css
프레임워크
sass
javascript
jquery

+라이브러리

자바스크립트 프레임워크
react

typescript

px
% , rem , em, vw, vh

디자이너 추천 사이트
https://www.theappfuel.com/
https://wwit.design/
https://mobbin.com/browse/ios/apps
https://pageflows.com/