반응형 웹 디자인 (Responsive Web Design) 반응형 웹 디자인을 공부하기에 앞서 미디어 쿼리(media query)를 사용하여 예시를 만들어 보았습니다. 왼쪽 그림은 모바일용 (width = 768px 일 때 적용 */ } /* Tablet (row) */ @m..

자주 사용하는 CSS 속성들 Hello world link list 1 list 2 list 3 * { box-sizing: border-box; /* box-sizing편 참고 */ font-family: 'Source Sans Pro', sans-serif; /* 글꼴을 변경합니다. (feat. google fonts) */ } body { margin: 0; /* user agent stylesheet의 margin을 제거합니다. */ background-color: gray; /* 배경색을 변경합니다. */ } h1 { color: white; /* 글자색을 변경합니다. */ text-align: center; /* 글자 중앙 정렬합니다. */ vertical-align: middle; /* 글자..

Selector (pseudo classes) 바로 이어서 [CSS] Selector practice site에서 공부한 내용을 적용해 봅시다. [CSS] Selector practice site https://ghvhdh321.tistory.com/entry/CSS-Selector-practice-site [CSS] Selector practice site [CSS] Selector practice site 공부한 내용을 리마인드 하면서 정리하였습니다. (feat. VScode, CSS Diner) 게임으로 배우는 CSS Selectors (CSS Diner) https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice ..

게임으로 배우는 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]..