HTML & CSS
-
flex 정리HTML & CSS 2020. 12. 14. 14:00
flex flex-container :: parent 여러 개의 플렉스 아이템을 포함한 부모 역할 flex-direction : 박스가 늘어나는 방향 flex-wrap : 박스가 다음 줄로 넘어가는 방식 align-item, justify-content : 자식 요소 정렬 flex-item :: children 컨테이너 안에 위치하면서 박스 하나 하나의 모양을 결정 flex-basis : 박스의 크기 flex-grow, flex-shrink : 그 크기가 변경되는 방식 order : 컨테이너 안에서 나열되는 순서 align-self : 보통은 컨테이너가 아이템을 정렬하지만, 아이템 스스로 정렬 방식을 선택할 수도 있음 flex-direction .container { flex-direction: row(..
-
css 단위HTML & CSS 2020. 12. 13. 19:43
크기 단위 px, em, rem, % 기본 폰트사이즈는 16px, 1em, 100% px - 절대값 px은 화소 1개의 크기를 의미한다. 픽셀은 디바이스 해상도에 따라 상대적인 크기를 갖는다. 주로 요소의 크기나 이미지의 크기 지정에 사용된다. em - 상대값 em은 배수 단위로 상대단위이다. 1em 요소에 지정된 사이즈와 같고 2em은 요소에 지정된 사이즈의 2배이다. em의 기준은 상속의 영향으로 바뀔 수 있다. rem (root em) rem은 최상위 요소 (html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 뜻한다. Viewport 단위 vh, vw, vmin, vmax 반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 %를 자주 사용하는데 % 단위는 em과 같이 상속에 의해 부..