CSS Battle #1

퍼블리싱 관련해서 

CSS 공부할 사이트는 넘치고 넘쳤다.

근데 사실 퍼블리싱 프로젝트는 초안이 있는 상태에서 해야 하는 경우가 많을 거라고 생각한다.

그런데 솔직히 퍼블리싱 테스트 할때 초안 일일이 만들어 가면서 하기가 너무 힘들다.

사실 귀찮은 거지만..ㅎ

 

그래서 이거저거 게임으로 연습할 사이트가 어디 없을까 생각을 하던 중 

CSS Battle이라는 웹페이지를 발견했다!

 

https://cssbattle.dev/

CSSBattle

만들어야하는 이미지가 정해져있고,

그걸 만들기 위해 CSS를 짜는 게임이다.

영어로 되어있는 페이지이지만 크게 어려울 것은 없다고 생각한다. 

글자수로 계산해서 점수가 매겨지기 때문에

글자수를 적게써서 정답을 낼수록 점수는 당연히 올라간다!

나는 개인적으로 그냥 점수는 크게 신경쓰지 않고, 정답 맞추는 것에만 집중하고 있다. 

 

아 물론 이 게임을 해서 퍼블리싱에 큰 도움이 될 라는 보장은 못하겠다.

실질적으로 홈페이지 제작에 필요한 요소들을 테스트 하는 문제들은 아니기 때문..

그냥 기본 개념 잡기? 위치 잡기? 배치? 이런 것들에 도움이 될 것이라고 생각한다.

 

근데 막상 정답률 100%가 나오면 기분이 좋다. 

지금까지 며칠동안 쭉 풀어오고 있는데 중간에 한 문제만 건너띄고 다 풀었다. 

아 그리고 그 중 하나는 정답률이 99.9%나온게 있는데 귀찮아서 일단은 넘어갔다.

 

일단 하루에 하나씩 여기에 내 정답을 올려봐야겠다.

아직은 한국분들이 많이 안하는지 

네이버에 검색을 해봤을 때는 그닥 나오는 글이 없었기 때문이다. 

 

https://cssbattle.dev/play/1

CSSBattle

이게 바로 첫번째 게임.

엄청 쉽다!!

그래도 맞추면 기분 좋다.

아 글자수를 줄여서 더 높은 점수를 얻고 싶다면

하단 메뉴 중에 Tips & Tricks에 들어가면 점수 올리는 팁들이 잔뜩 있다. 

코드 다 넣고  Submit  버튼 누르면 정답률과 함께 점수가 나온다.

 

나의 코드는 아래와 같다.

 

<div></div>

<style>

*{margin:0;}

body {background:#5d3a3a;}

div {width: 200px;height: 200px;background: #b5e0ba;}

</style>

 

이렇게 따닥따닥 붙여쓰면 더 높은 점수 얻을 수 있을 듯. 

 

아 div박스의 width나 height값을 추측? 할때 간단한 팁은

내 결과물이 보여지는 이미지 위에 마우스를 hover하게 되면

배경 바탕으로 정답 이미지가 깔리기 때문에

내가 설정한 사이즈나 margin값이 맞는지 대강 알 수 있다.