Algoroot's space

(220104_화) 유투버 엘리님이 알려주신 사이트를 참고해 공부했는데 확실히 게임을 하면서 하니 이해도 잘되고 재밌었다. 이제 막 공부하시는 분들께 강력 추천한다. https://flexboxfroggy.com/#en Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 총 24문제인데 헷갈리거나 모르는 경우에는 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 이곳에서 참고하며 풀어보는 게 좋을 것 같다. 나의 경우에는 24번 빼고는 다 풀었는데 24번에서 놓쳤던 부분은 아래와 같다. 조금 고민하다가 답을 참고하였다. 재밌기는 하지만 나는 배울게 너무 많기 때문에 이런 것에 괜한 오기를 가..

1. inline, inline-block, block inline (물건): 컨텐츠 자체만 꾸며주는 것. css에 영향받지 않음, inline-block (한 줄에 여러개가 진열 될 수 있는 상자) : 한 줄에 다 넣는데 안에 컨텐츠에 상관없이 지정한 css크기에 맞춰서 배열된다. block(한 줄 당 하나씩 들어가는 상자) 1 2 3 div, span { width: 80px; height: 80px; margin: 20px; } /* inline (물건): 컨텐츠 자체만 꾸며주는 것. css에 영향받지 않음, inline-block (한 줄에 여러개가 진열 될 수 있는 상자) : 한 줄에 다 넣는데 안에 컨텐츠에 상관없이 지정한 css크기에 맞춰서 배열된다. block(한 줄 당 하나씩 들어가는 상..

Selector practice : https://flukeout.github.io 엘리님이 강의에서 소개해주신 실렉터 연습 게임이다. 총 32문제인데 저번에 한 번 해봤을 때는 감이 잘 안 왔는데, 한 번 더 해보니까 이해는 어느 정도 확실히 된 것 같다. 이해하기 General sibling combinator (A ~ B) Adjacent sibling combinator (A + B) 셀렉터 게임을 하던 중, 둘 차이가 잘 구분이 가지 않아 더 찾아봤다. 나는 General 은 A 밑의 모든 B, Adjacent는 A 다음에 오는 B라고 해석했다. 관련 링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator ..

*html.css 라이브 구현 사이트 https://jsbin.com/?html, css, output jsfiddle.net codesandbox.io 1. 브라우저 지원 가능한 태그들 확인하는 사이트 https://developer.mozilla.org/en-US/docs/Web/HTML HTML: HyperText Markup Language | MDN HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a ..