Semantic element (시멘틱 요소) HTML5에서는 시멘틱 웹(semantic web)이 중시되면서 여러 시멘틱 요소(semantic element)가 새롭게 만들어졌습니다. semantic이란 '의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다. Semantic element를 사용해야 하는 이유 1) 검색엔진이 Semantic element를 더 좋아하기 때문입니다. (즉, Semantic element에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있습니다.) 2) 여러 개발자가 함께 작업할 때 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다. 그뿐만 아니라, 요소 안에..
게임으로 배우는 CSS Flex (Flexbox Froggy) https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 게임으로 CSS Flex를 공부할 수 있는 사이트를 발견했습니다. Flex를 사용하여 개구리들을 연잎 위로 옮겨주시면 되는 아주 간단한 게임입니다. 총 24단계로 되어있고, Flex(1), Flex(2)를 충분히 이해하셨다면 어렵지 않을 거라 생각합니다. 문제를 푸는데 많이 막히신다면 다시 한 번 Flex(1), (2)를 복습하고 오시길 권장해 드립니다. Flex(1) https://ghvhdh321.tistory.com/entry/CSS-Flex-container [CSS]..
Before you learn ● Flex container에 적용하는 속성들 Flex item에 적용하는 속성들 flex-basis 아이템 최소 크기 지정 (default value : auto) 1 22 333 4444 55555 HTML Code flex-basis 입력 전 OR flex-basis: auto; 인 경우 (아이템 최소 크기 = content 크기) flex-basis 입력 후 (아이템 최소 크기 = flex-basis value) flex-grow 아이템 크기 늘리기 (↔ shrink) (default value : 0) 아이템이 갖는 최소한의 크기를 제외한 나머지 여백을 기준으로 1/N 하여 나눠 갖는다. (flex-basis 참고) flex-grow 입력 전 flex-grow 입..