220413

마진 병합현상은 상하간에만 일어난다.
부모 자식간 마진 병합현상 해결방법 
-> 부모에 패딩값 주기 or 보더 만들기

inline은 무조건 컨텐츠 크기에 맞춰짐
inline-block은 박스 형태로 만들어서 크기 조정을 하고싶어서 씀
display : none; -> 보이지 않게 만듬 / 공간도 차지하지않음
 <=> visibility : hidden => 보이지않지만 공간은 차지

<input type="button" value="button"> 버튼 만들기
<input type="text"> 검색창 만들기

input[type="button"] { }  -> 특성 선택자
input[name="check"] { }

flex-grow: 1; 컨텐츠 쓰고 남은 여백을  
flex-grow: 2; 1:2:1로 가져감
flex-grow: 1; 

원하는 크기만큼 박스를 할당해주려면?
-> flex-basis에 원하는 크기를 지정해준뒤 flex-grow 활용
auto는 컨텐츠 크기로 잡는다.

flex-shrink는 flex-grow와 반대로 
컨텐츠의 축소 비율을 맞춘다.

flex-shrink: 0 을 주면 축소되는것을 막아준다.

justify-items / align-items 는 여백이 없을때 적용이 되지않을수있다.
align-contents 는 잘 쓰지않는다.
align-self 는 혼자서만 쓴다.

flex는 1차원 (일방향) 인 반면에
grid는 2차원 (테이블) 형태로 적용할 수 있음

repeat(3,1fr) -> 3x3 격자 1:1:1

row-gab 10px; 위아래
column-gab 20px; 가로
합쳐서 gab: 10px 20px;
= grid-gab: 10px 20px; (옛날버전 호환)

grid-column-start: 1;
grid-column-end: 3;
합쳐서 grid-column: 1/3;  -> 행 셀 병합
grid-column: 1/span2 = 1/3
grid-row: 1/2; 열 셀 병합

부트스트랩 들어가서 레이아웃 디자인 아이디어 얻기

transform : skew (10deg, 0); 좌우로 10도 비틀기
transform: translate(100px, 0); 오른쪽으로 100px 움직이기

mdn에서 트랜스폼 실습 해보기

transition-property : 누가 애니메이션을 일으키는지
transition-property : all -> 일어나는 모든 애니메이션 실행
transition-timing-function: 애니메이션 속도 변화

animation : => 트랜스폼 + 트랜지션