Algoroot's space

오늘도 Ellie님 강의를 보며 만들었다. 아예 처음부터 시도해보기는 어려워서 영상을 한 번보고난 후 코드를 쳤다. 한 두 번정도 쳤더니 술술쳐지는 수준이었다. 하지만 오늘은 두 가지의 issue가 있어서 해결하는데 또 시간이 걸렸다. 1. css에서 class가 아닌 태그를 .으로 명명했다. body 와 a 태그에서 전체적으로 수정할 것이 있어서 명령을 했는데 반영이 안되었다. 한참 뭐가 잘못 됬는지 보면서도 못찾다가..한 30분정도 후에 찾아냈다. .body { } .a { } 이런식으로 쳤다. 이 것도 처음에는 이상한줄도 모르고있다가 보다보니까 '어? body와 anchor tag는 class 가 아닌데..?'라는 생각이 들고 깨닫게 되었다. 2. JS에서 event 오류 사실 JS는 아직 배우지도..

(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 ..