flexbox-2 flex 외워야하는 것 grow shrink basis 0 1 auto 비율 똑같게 하기 비율 주기 flex-direction 종류 row colum 자식 조종 flex-wrap nowrap 모든 엘리먼트를 같은 줄에 있게 함 wrap flex-direction column column-reverse row row-reverse

selector 복수 선택 "," 로 복수 선택 border-radious 버튼 모서리 라운드만 주기 위해서 btn이라는 클래스를 만듬 class 이름 앞에 btn 추가 btn이라는 클래스와 teal라는 클래스 2개를 동시에 가질 수 있음 layout inline-block inline은 높이와 너비를 가질 수 없지만, 가질 수 있게 하려면 inline-block으로 하면 된다 inline-block의 단점은 박스 사이에 공간이 생기는 것이다 inline-block은 반응형 디자인을 제공하지 않아서 단점이다 따라서 쓰지 않는다 flexbox 반응형 디자인 가능 부모를 통해서 자식을 움직이는 것이 flex 이다 부모를 display: flex;로 선언하다 이제 자식들을 제어할 수 있다 justify-con..

block 과 inline div를 inline으로 하면 사라진다. 이유는 inline은 높이와 너비가 없기 때문이다 오리지널 내용물 없는 inline 내용 넣어주기 따라서 내용을 넣어줘야 보여진다 block은 box이고, inline 은 box가 아니다 box 특징 margin, border, padding 을 가지고 있다 margin 위 아래 20px , 좌우 15px 위 20, 오른쪽 5 아래 12 왼쪽 9 collapsing margins 위아래쪽만 일어나는 현상으로 위아래가 같으면 똑같이 인식해버림 흰 박스의 경계가 보라색 박스와의 경계가 같을 때 일어난다. 경계가 만나면 하나로 인식되는 것이다. padding 해결방법은 패딩을 넣으면 된다 border border 종류 border-style ..

1. CSS 넣는 방법 2. CSS 적용하는 방법 CSS( Cascading Style Sheet) cascading은 순서대로 적용시킨다는 의미 셀렉트 -> 스타일 -> 끝에 콜론(;) 스타일 종류 text-decoreation font-weight font-style text-align .... so on 3. BOX 기본적인 박스 단위 div 박스 종류 2가지 inline (in the same line) ex) span, a, img block ex) p, div, header 등