본문 바로가기

HTML과 CSS/CSS6

CSS Grid 연습게임 1. https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com 2024. 4. 9.
CSS Flexbox 연습 1. 디펜스 게임을 하다 보면, Flex를 잘하게 됩니다. 단 https://flexboxfroggy.com/#ko 개구리 Flex게임을 먼저 하고 오는 걸 추천합니다. http://www.flexboxdefense.com/ Flexbox Defense Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS! www.flexboxdefense.com 2. 정답 공개 .tower-group-1 { display: flex; justify-content:center; } .tower-group-1 { .. 2024. 4. 9.
CSS의 flex연습하기 좋은 사이트 1. 개구리를 잎사귀 위에 올려놓는 게임을 하다보면 flex에 대한 이해가 완벽해진답니다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. 정답 공개 #pond { display: flex; justify-content:flex-end; /* 여기가 정답 */ } #pond { display: flex; justify-content:center; /* 여기가 정답 */ } #pond { display: flex; justify-content:space-around; /* 여기가 정답 */ } #pond { display: flex; justify-content:space-betw.. 2024. 4. 9.
CSS의 선택자 연습 게임, 정답 공개 1. CSS Diner 게임을 따라 하다 보면, 선택자 공부가 자동으로 됩니다.CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io) CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io  2. 선택자 공부에 좋은 사이트https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors 속성 선택자 - Web 개발 학습하기 | MDNHTML에 대한 연구에서 알 수 있듯이, 요소에는 마크업되는 요소에 대한 자세한 정보를 제공하는 속성이 있을 수 있습니.. 2024. 4. 9.
마우스 오버 시 이미지 커지는 것 1. HTML/CSS 참고하면 좋은 책 https://wikidocs.net/profile/info/book/15011 위키독스 온라인 책을 제작 공유하는 플랫폼 서비스 wikidocs.net 2. HTML/CSS 튜토리얼 https://www.w3schools.com/html/default.asp HTML Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com .. 2024. 4. 8.
무료 스타일시트 CSS https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com 설치법은 https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with .. 2024. 4. 8.