0xFF

오늘은 3일동안 공부해본 선택자를 게임을 통해 익혀봤습니다. http://flukeout.github.io CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 사이트에 들어가시면 테이블 위에 놓인 물건과 CSS 에디터, HTML 에디터, 그리고 오른쪽에는 도움말을 보실 수 있습니다. 우리가 해야 할 것은 테이블 위 물건 중에서 움직이는 것 만을 CSS 선택자로 선택해주는 것입니다. 지금까지 공부한 부모-자식, 부모-자손 선택자 등을 이용하려면 먼저 태그들의 상하관계를 파악해야 하는데 그러려면 이렇게 궁금한 대상에 마우스 커서를 올려보면 파악할 수 있습니다. 총 32단계나 되는데 이 글에서 다 설명하는건 ..

또 선택자입니다.. 오늘은 Pseudo(가상) 선택자에 대해 정리하겠습니다. 가상 선택자는 요소에서 일어날 수 있는 이벤트를 선택하는 선택자입니다. 아마 아직 일어나지 않은 이벤트를 선택하는 것이라 가상이라는 말이 붙었지 않나 합니다. 예를 들면 마우스를 올려뒀을 때, 클릭했을 때, 포커스 되었을 때 등이 이벤트가 되는 것이고, 지정한 이벤트가 발생했을 때 HTML 태그의 어떤 속성을 바꿔줄지를 CSS를 통해 지정해주는 것입니다. 제가 하도 설명하는걸 못해서 이해되셨을지 모르겠네요..... 이해 부탁드립니다 ㅠㅠ 1. pseudo 클래스의 종류 혹시나 해서 한번 더 정리하지만(사실은 제가 헷갈려서) 클래스는 특정한 하나의 요소가 아니라 모든 태그가 공통적으로 가지고 있을 수 있는 구분자?를 말합니다. 아..

1일차에선 셀렉터, 프로퍼티, 밸류의 세 가지로 이루어진 CSS 기본 문법까지 설명했는데요이번 글에선 선택자의 종류에 대해 좀 더 상세하게 설명해 보겠습니다. CSS에서는 선택자를 통해 변경하고자 하는 대상을 정확히 선택해 주어야 하기에, 선택자는 CSS에서 가장 중요한 부분이라고 할 수 있겠습니다.각 선택자의 이름은 한국어로도 있지만, 보통 개발시에는 구글에서 영어로 검색을 하는 경우가 대부분이므로 영어 이름으로 작성해 봤습니다.1. Tag 선택자태그 선택자는 한 HTML 문서에서 등장하는 특정 태그를 꾸며주고 싶을 때 사용합니다. HTML CSS JavaScript 위와 같은 HTML 문서 내의 모든 태그의 색상 속성을 red로 바꿔주고 싶다면 전 글에서 설명한 기본 문법인Selector { Prop..

오늘부터 생활코딩 CSS 강의를 보며 매일매일 정리하고, 조금씩 따라해보기로 했습니다. 며칠 하다 쭉 미루지 않았으면 좋겠네요 ㅋㅋ 생활코딩 CSS 강의는 유튜브에서 무료로 보실 수 있습니다. 바로가기 1. 왜 만들었나? 우리가 잘 아는 HTML은 웹 문서의 레이아웃을 정의하기 위한 마크업 언어입니다. 예를 들면 페이지의 여백이나 요소 간의 간격, 글자의 크기나 줄 간격 등을 지정해줄 수 있습니다. 다만 HTML은 레이아웃의 표현에 충실하다 보니 디자인과 관련한 태그는 부족했고, 웹의 발전에 따라 단순 정보 전달뿐 아니라 예쁘게 페이지를 디자인 할 필요성도 증가하게 되었습니다. 그런 욕구에 따라, 글자의 색을 지정하는 등 디자인과 관련한 태그가 HTML에 추가되기 시작했습니다. 예를 들어 왼쪽과 같은 태..