CLASS

HTML class / CSS 다중 선택자

html에서 클래스는 자주 사용하는 스타일(css)을 묶어놓기 위해 사용한다. class 1 class 2 이런 구조다. 태그 뒤에 class="클래스명"을 입력하고, css 코드에서 클래스를 어떻게 꾸밀지 정의한다. 저번 css 정리에서도 썼지만 클래스를 selector로 호출할 경우 클래스명 앞에 .을 쓰면 된다. 하나의 태그에 여러 개의 클래스를 동시에 적용할 수 있다. TEST 클래스 이름에 공백은 허용되지 않기 때문에 띄어쓰기만 해주면 class1, class2, class3을 모두 가진다는 뜻이 된다. 이 부분이 헷갈리는 부분인데.. css 코드에서 selector로 클래스 여러 개를 선택하는 경우는 어떻게 쓸까? 1. 이어서 쓰는 경우 .class1.class2 { } class1과 clas..

크롬 공룡 게임 만들기(2/4): 공룡과 장애물 만들기

이제 본격적으로 main.js를 작성해 보자. 공룡 게임에 사용되는 유닛에는 크게 공룡과 장애물이 있다. 이런 등장 요소의 속성을 객체로 정리해 두면 편리하다. 객체란 관련된 데이터와 함수(객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부른다)의 집합이라고 보면 된다. 생각해 보면 게임에서 공룡은 한 마리만 있으면 되지만, 장애물은 여러 개가 있어야 할 뿐만 아니라 각각의 속성이 다를 수 있다. 쿠키런에서 1단 점프를 해야 하는 장애물과 2단 점프를 해야 하는 장애물이 있는 것 처럼.. 이렇게 비슷한 여러 객체를 만들어야 할 때 사용하는 것이 클래스다. 클래스를 쿠키 틀이라고 한다면 객체는 그 쿠키 틀로 찍어낸 쿠키 반죽이라고 할 수 있겠다. 쿠키 틀을 하나만 구비해 놓으면 쿠키를 하나하나 빚을 필요 ..