크로스 브라우징 문제로 인해(safari에서는 up-down 화살표라고 함..)안드로이드,크롬은 잘 되는데 ㅠㅠ select박스에 아래 화살표 달아야함.. 부모:after을 이용해야 되는데 어떻게 할까 고민하다가 select를 로 감싸기로 했음

좌우로 움직이는 애니메이션 CSS를 사용하지 않고 JS로만 구현 @keyframes은 ``태그로 처리

부모 div에 높이만 주고 내리갈굼으로 자식에게 % 매겨주기

coinflip animation code

여기서 부모에 flex를 주면 (자동으로 flex-direction:row;) 자식은 div width가 쫘악 contents 크기로 붙음 flex-direction: column으로 주면 다시 쫙 펴짐 align-items:center; 주니까 다시 쫙 줄어듬 ![](https://velog.velcdn.com/images/moondolph/post/

Flex-box안에 ABC가 있을때 A를 화면 좌측끝 B를 화면 중앙 C를 화면 우측끝에 위치시키고 싶다. 이때 Flex-box의 justify-content: space-between를 보통 사용한다. 그러나 A,B,C의 width가 달라서 B가 화면의 정중앙에 들어가지 않을 경우가 있음. 이럴 때 CSS Hack 사용

HTML,CSS를 처음 배울 때 가장 애먹었던 부분 바로 가운데 배치... 이렇게 화면 정가운데에 배치하고 싶다... 이럴땐 Flexbox를 활용하자 1.body에 display:Flex 사용 2.justify-content:center (main-axis:주축) 3.align-items:center (cross-axis:교차축) 4.body의 height를 100vh(viewport height)로 줘야함★ 이렇게 body태그에 css를 주면 body태그 내부의 모든 요소들이 화면 가운데로 배치가 된다.

이 게임을 하고 난 후엔 웬만한 플렉스박스는 잘 다룰 수 있을 것이다. 하지만 난 머리가 좋지 않은 편이라 1회차에는 감을 익힌 느낌이고 숙달하려면 1~2회 더 해봐야겠다. https://flexboxfroggy.com/#ko 완전 강추 !!

https://wooncloud.tistory.com/10#%E-%--%--%C-%A-Flex%--%EC%--%-D%EC%--%B-%EC%-D%B-%EB%-E%--%-F 잘 정리된 글이 있어서 포스팅. 자주 보면서 공부하셈

ㄴ 위와 같은 상황이고 코드는 다음과 같다. ㄴcontainer를 써봤는데도 안된다. 어떻게 해야할까? 정답은 justify-content-center 속성이다. inputWrap 태그 쪽에 심어주면 된다. ㄴ잘 정렬되었다. >* 참고 https://happygunja.tistory.com/84

1. 하위태그선택하기 >inputWrap 클래스의 하위클래스인 date 클래스 선택 2. 여러태그 선택하기 >gender 클래스도 선택됨 3. 클래스 태그가 여러개 있는경우 > class="inputWrap date"인 태그만 선택됨

Input태그의 type 속성 中 radio로 하면 안되고 checkbox로 해야함. radio는 여러개 중 하나만 가능. checkbox는 여러개 가능.

가운데에 배치하고 싶을 때 속성 값!! (상위 요소가 body이고 전체 枠를 가운데에 배치하는 경우) > position:absolute --> 상위요소중 static아닌 것(relative)가 기준이 됨. 없으면 body가 기준. transform:translate(-50%, 0) - 지정 요소 X축으로 -50%이동 > https://www.daleseo.com/css-position/ https://www.biew.co.kr/entry/CSS3-Transform-%EC%86%8D%EC%84%B1-scale-rotate-translate-skew-%EC%8B%A4%EB%AC%B4%EC%98%88%EC%A0%9C-%EC%B2%A8%EB%B6%80%ED%8C%8C%EC%9D%BC-%ED%8F%AC%ED%95%A8 https://asleeplessnight.tistory.com/5