웹크롤링을 할 때 BeautifulSoup의 select 함수만 잘 사용해도 훨씬 작업을 수월하게 할 수 있습니다. 하지만 기존에 HTML, CSS에 대해서 어느 정도 지식이 있는 사람이 아니라면 조금 어려움을 겪을지도 모르겠습니다. 그래서 오늘은 CSS 선택자를 게임처럼 연습할 수 있는 사이트 CSS Diner를 소개합니다.
CSS 선택자(Selector)란
스타일(꾸밈)을 적용하기 위하여 특정 HTML 요소들을 선택하는 데 사용되는 패턴입니다.
대표적으로 가장 많이 사용되는 것은 ①태그 선택자(Type Selector), ②클래스 선택자(Class Selector), ③아이디 선택자(ID Selector)입니다.
문법
태그 선택자: 태그명
클래스 선택자: .클래스명
아이디 선택자: #아이디명
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
CSS Diner는 총 32개의 CSS 선택자 문제를 제공합니다. 화면 아랫부분에는 문제와 코드를 입력하는 공간이 있고 화면 오른편으로는 문제에 대한 설명과 힌트가 나타납니다. 단순히 웹크롤링 목적으로만 CSS Selector를 알아야 하는 수준이라면 11번 문제 정도까지가 적당하지 않을까 싶습니다. 물론 더 많이 풀어보면 도움은 됩니다.
1번 문제는 간단히 태그 선택자를 이용해서 풀 수 있는 문제입니다. 쉬운 문제부터 시작해서 천천히 난이도가 올라갑니다. 게임 형식이라 하다 보면 생각보다 재미가 있습니다.
문제가 진행될 때마다 이미지가 바뀌어서 보는 재미가 쏠쏠합니다. 오늘 한번 연습해보세요.
