Programing/CSS8 Flexbox Froggy로 Css Flexbox공부하기 (및 정답 공유) 1~10번 플렉스박스에 대한 지겨운 이론 대신 게임으로 쉽게 공부할 수 있는 Flexbox Froggy. 플렉스박스에 대해 익숙해 지고 싶다면 한번 풀어보는걸 추천한다. 그리고 무엇보다 개구리들이 귀엽다 :) http://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 슉슉 넘어가다보니 개념 정리도 잘 안되는거 같고... 문제 풀기에 급급한 사람들을 위해, 그리고 다음 스테이지로 넘어가고 싶은데 정답을 모르겠는 사람들을 위해 Flexbox Froggy에서 나온 개념들과 정답을 공유하려고 한다. 붙여넣기 좋으라고 코드를 다시 입력해놨다. 풀면서 모르겠는 부분 있으시면 참고하시고... 또 한번 풀었는데 머릿속에서 정리.. 2020. 8. 10. SCSS css를 쓰다보면 scss나 sass를 요구하는 곳이 많다는걸 알게된다. SCSS 가 CSS 를 사용하는 것 보다 코드도 줄일 수 있고 다음 코드를 수정하는 사람이 봤을 때 가독성도 좋다. 웬만하면 사용하는 것을 추천한다고 한다. 유지 보수가 훨씬 쉽다. 그 이유는 밑에와 같은 기능을 사용할 수 있기 때문이다. Variable (변수)Math Operators (수학 연산자)Built-in Functions (내장함수)Nesting (중첩)Import (불러오기)Extend (상속)Mixin (믹스인)Function (함수)본인이 사용하는 개발 환경에서 css파일이 없고 scss파일이 자동으로 생성되고, 무슨 말인지 모르겠으면 그냥 SCSS파일 안에 내가 알던 CSS를 사용한다면 아무런 문제가 없다. C.. 2017. 7. 27. Position Position 이것을 잘 다루는 것이 CSS를 자유자제로 사용하는 것의 관건이다. 엘리먼트의 위치를 지정하는 방법은 4가지가 있다. staticrelativeabsolutefixed static우리가 아무런 position을 지정하지 않았을 경우 디폴드 값으로 static이 들어가 있다.static은 reft,right,top,bottom 즉, offset값을 다 무시하고 원래 있어야 하는 곳, 부모의 안에 위치하게 하는 position속성이다. relative하지만 이런 원래 있어야 하는 곳을 기준으로, 부모를 기준으로 위치를 옮기고 싶다면 position을 relative로 설정해 주면 된다. css는 left값과 right 값이 겹칠 경우 left를 우선시하고 top/bottom은 top을 우선시.. 2017. 7. 26. 마진 겹침 현상 마진 겹침 현상 마진 겹치는 것 때문에 해커톤에서 깊은 빡침을 경험하는 경우가 드물지 않음... 진짜진짜 ( 아니!! 나는 마진을 줬는데에 8ㅅ8 왜 적용이 안되냐고...)진짜 몇번 빡침을 경험하다 보니까 무작정 덤비는 것 보다 좀 알고 이게 왜 내 말을 안듣는건지 먼저 아는게 중요하다는 것을 알게 되었다. 1. 두개의 엘리먼트의 마진이 겹칠 경우 더 큰 값이 적용이 된다. 어떤 경우에 어떤게 도움이 될까? 만약에 리스트라는 것이 있고, 리스트의 스타일에 margin을 50px 적용을 한다면 중간 li밑에 나오는 li의 마진이 100이 되는 경우 때문에 이런 속성을 만들어 놨다고 생각 2. 부모 엘리먼트와 자식 엘리먼트가 있고, 두가지의 엘리먼트가 겹칠 경우 부모 엘리먼트가 시각적으로 보이지 않는 상태가.. 2017. 7. 25. box-sizing box-sizing hi hello .hi { width:150px; border 15px;}.hello{ width:150px; border 1px;} 가로 넓이가 같음에도 불구하고 둘의 크기는 달라 보인다.왜냐하면 처음 CSS을 만들 때 width와 hight는 컨텐츠의 크기, 즉 박스를 의미하는 것으로 지정을 해놨기 때문이다.그래서 border값을 상관하지 않고 박스의 크기를 지정하기 때문에 같은 크기의 상자를 만들고 싶을 때 참 난감한 상황이 벌어진다. 그래서 맨 처음 설정하는 것이 *{ box-sizing: border-box;} 전 영역의 컨텐츠에 (*) 박스 사이즈인 width와 hight의 기준은 border로 한다는 것을 말해주는 것이다. 원래는 컨텐츠 사이즈 이기 때문에 디폴트를 이렇게.. 2017. 7. 25. CSS box-model CSS box-model https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/ 여기를 보면css테그의 사용 빈도가 박스 모델과 관련된 테그 사용빈도가 엄청 높다는 것을 알 수 있다. 어떤 컨텐츠가 있다. 그것을 박스라고 한다, 그 박스에 대한 것이 박스 모델인데 용어는 중요하지 않음 박스 모델중 중요한 것은border : 테두리 값, margin : 다른 박스 사이의 거리padding : 테두리와 컨텐츠(글자, 그림 등등) 사이의 거리width : 박스의 가로 크기hight : 박스의 세로크기구글에 css box model이라고 검색을 하면 많은 참고 이미지가 나온다. 하지만 인라인 요소에서는 블럭 요소와 달리width 와 hight .. 2017. 7. 25. 이전 1 2 다음
