본문 바로가기

Language & Framework

Flexbox Froggy 정답 및 풀이 복습
Language & Framework/HTML CSS 2021. 12. 26. Flexbox Froggy 정답 및 풀이 복습 깜찍한 개구리 친구를 Flexbox 명령어를 통해 수련 잎으로 보내주는 게임이다. 정답을 봐도 아무것도 모르는 나 같은 사람은 이해하기 위해 따로 구글링을 해야 했던 CSS-diner와 달리 난이도가 굉장히 쉽다. 되도록 위의 설명은 아예 보지도 말고 그림 보기 -> 정답 입력하기의 과정을 거쳐야 그나마 공부가 된다. 잘 외워지지 않아 읽으면서 입력했더니 생각보다 금방금방 외워졌다. 초반 문제들은 justify-content를 사용하는 문제들이다. justify-content: flex-start; 컨테이너 좌측으로 정렬한다. (default) justify-content: flex-end; 컨테이너 우측으로 정렬한다. (reverse되지 않는다) justify-content: center; 컨테이너 중..
CSS 기초 정리 및 복습
Language & Framework/HTML CSS 2021. 12. 25. CSS 기초 정리 및 복습 CSS(Cascading Style Sheet)? HTML로 구성한 웹 사이트를 다양하게 꾸며주는데 사용된다. 1.Author style (개발자가 지정한 스타일) 2.User style (유저가 설정한 스타일) 3.Browser style (브라우저에서 자체적으로 제공하는 스타일) 1부터 3까지의 우선순위 순서대로 흘러가며 설정되는 Style Sheet(스타일 정리 문서) !important 해당 태그를 사용하면 모든 설정을 무시하고 important에서 지정하는 스타일로 고정할 수 있으나 되도록 지양하는 것이 좋다. 선택자(Slection) Universal (모든 태그) * type tag (특정 태그) tag name Id #id class .classname state 선택자:의사클래스 (ex>..
CSS diner 정답 및 풀이 복습
Language & Framework/HTML CSS 2021. 12. 24. CSS diner 정답 및 풀이 복습 * 주의 : plates나 apple 등 단어에 흔들리지 말고 이것이 태그 이름이라고 생각해야 한다.. 그림을 보는 것보다 그냥 html 소스만 보는 게 머리에 더 잘 들어올 수도 있다. Level 1 Select the plates 가장 기본적인 선택자의 형태이다. 이전 글의 선택자 중 Type tag에 해당하므로 의 요소인 plate를 입력하면 된다. 정답 : plate level 2 Select the benti boxes level 1과 다를 게 없는 문제다. 에 요소에 해당되는 bento를 입력. 정답 : bento level 3 Select the fancy plate 를 확인했으면 선택자 중 id 태그 방식인 #Tag name을 입력하면 된다. 정답 : #fancy level 4 Select..
HTML 기초 정리 및 복습
Language & Framework/HTML CSS 2021. 12. 23. HTML 기초 정리 및 복습 HTML (Hyper Text Markup Language) * HT (Hyper Text) : 웹 브라우저에서 보이도록 디자인된 문서 * M (Markup) : 표준화된 마크업(태그) 사용 * 웹의 가장 기본적인 빌딩 블럭(토대)로써 CSS, Java script는 부가적인 역할을 할 뿐 HTML 없이는 웹 사이트가 존재할 수 없다 * 태그는 (tag name)으로 시작해서 (/tage name)으로 끝난다 jsbin 예제 ⬇️ HTML 기초 응애 나 애기 개발자 양또띠 양또띠양또띠 HTML은 모든 웹 브라우저에서 똑같이 적용된다 W3C(World Wide Web Consortium)에서 웹 표준화를 추진하여 모든 브라우저에서 같은 명령어로 동일한 효과를 가질 수 있도록 지원. 그러나 모든 태그가 똑같..

티스토리툴바