코딩 121
css flexbox 게임으로 배워보자
지난번 포스팅에서 select 게임을 했던 것 기억하시죠? 이번에는 flexbox 게임을 가져와봤습니다. 1. flexbox froggy flexbox는 css에서 그리드를 조절해주는 스타일입니다. display 속성 값으로 사용하고 여러 가지 옵션을 넣어주면 편리하게 사용할 수 있어요. 저도 아직 배우는 중이라 정리가 된다면 이것만 따로 포스팅해보겠습니다. 오늘은 그 옵션을 익혀볼 게임인 flexbox froggy을 소개해드립니다. 보이시는 것 처럼 개구리를 연잎 위로 올려주면 됩니다. 첫 문제인만큼 아예 정답도 알려줍니다. justify-content은 아이템의 배치에 대해서 설정할 수 있는 속성이에요. flext-end는 끝에서 정렬 가로로 되어있으니 오른쪽 정렬이 되겠죠? 그런 속성 값입니다. 자..
들여쓰기 색 넣기 VS code
비주얼 스튜디오 코드의 시각적인 보정 확장 코드를 하나 더 알려드립니다! 1. Indent rainbow indent는 들여 쓰다는 뜻의 영어단어로 들여 쓴 부분을 무지개색으로 만들어주는 확장 기능입니다. 이 기능이 없을 때는 들여 쓴 부분의 공백에 아무것도 없죠? 이제 indent rainbow 확장 기능을 설치해보겠습니다. 왼쪽의 세로 메뉴에서 가장 아래 아이콘 확장을 선택해주시거나 단축키 [Ctrl + Shift + X] 키를 눌러주세요. 검색창에 indent를 써주시면 맨 위에 나올 거예요. indent-rainbow 확장 기능을 선택해주시거나 바로 설치를 눌러주세요. indent-rainbow 설치 방법 확장 > indent 검색 > indent-rainbow 설치 2. 설치 및 확인 위에서 설..
css 선택자 게임
css를 처음 접하시는 분들은 Select. 즉, 선택자를 잡는 것이 어려울 거예요. 저도 처음에는 냅다 외우기만 해 가지고 이해하 하나도 안 됐었거든요. 그런데 이게 게임으로 쉽게 이해하는 방법이 있다고 합니다. 1. 접시 선택하기 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 접시를 선택하면 되는 게임이에요. 보기에는 어려워 보이는 데 막상 하면 생각보다 쉽답니다. 오른쪽에 보시면 설명도 나와있어서 살펴보시면 좋아요. 영어 기는 하지만 그래도 대충 해석이 없어도 알 수 있어요. 이렇게 마우스를 올리면 자기가 어떤 태그 인지도 알려줘요 귀엽죠. 접..
vs code 괄호 색 넣어주는 확장 기능 설치해보자
vs code가 아무리 개발환경이 좋다고 해도 인간은 계속해서 더 좋은걸 찾게 됩니다. 1. 확장 탭 비주얼 스튜디오 코드를 열고 왼쪽 아이콘 중 가장 아래에 있는 확장 탭을 열어주세요. 그리고 [Bracket Pari Colorizer]를 검색합니다. 사실은 전부 검색할 필요는 없지만 설명을 위해서 이름을 다 검색해봤어요. 아래를 살펴보니 2가 나왔네요. 2를 설치해보겠습니다. 정리 왼쪽 메뉴 가장 아래에 있는 확장 탭 선택 [Bracket Pari Colorizer] 검색 후 설치 이런 화면이 뜬다면 설치가 완료된 것입니다. 2. SCSS 확인하기 이게 어떤 기능이냐 하면 이렇게 중첩된 괄호를 어디서부터 어디까지가 한 묶음인지 알려주는 기능이에요. 보시면 체크된 부분이 색이 다르죠? 파란 괄호 안쪽에..
HTML 코드 검사 해보기
HTML 코드를 작성하다가 오류가 발생했다거나 혹은 유효한 태그가 맞는지 확인해 보고 싶을 때 사용할 수 있는 사이트가 있습니다. 1. W3C Marcup https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org 바로 W3C Markup 사이트입니다. 코드를 검사할 수 있는 방법은 세 가지가 있습니다. URI 주소를 넣는..
