본문 바로가기

CSS Battle2

CSS Battle #4 https://cssbattle.dev/play/4 CSSBattle CSS Code Golfing is Here! cssbattle.dev 네번째 문제. 저번 답안지를 작성하면서 원을 만드는 방법은 적었다. 그러면 저렇게 윗부분만 동그란 모양을 만드려면? 역시 간단하다. width값과 height값이 같을 때, top(왼쪽 위), right(오른쪽 위)의 border-radius 를 전체 크기의 절반만큼 주면 된다. bottom(오른쪽 아래), left(왼쪽 아래)j의 border-radius는 0으로 줘야한다. 아 근데 위의 원은 정확하게 만하면 정반원(?)은 아니다. 정원의 절반인 반원을 만드려면 width값을 height값의 2배로 먼저 만든다. 그 후, top(왼쪽 위), right(오른쪽 위).. 2020. 3. 14.
CSS Battle #1 퍼블리싱 관련해서 CSS 공부할 사이트는 넘치고 넘쳤다. 근데 사실 퍼블리싱 프로젝트는 초안이 있는 상태에서 해야 하는 경우가 많을 거라고 생각한다. 그런데 솔직히 퍼블리싱 테스트 할때 초안 일일이 만들어 가면서 하기가 너무 힘들다. 사실 귀찮은 거지만..ㅎ 그래서 이거저거 게임으로 연습할 사이트가 어디 없을까 생각을 하던 중 CSS Battle이라는 웹페이지를 발견했다! https://cssbattle.dev/ CSSBattle CSS Code Golfing is Here! cssbattle.dev 만들어야하는 이미지가 정해져있고, 그걸 만들기 위해 CSS를 짜는 게임이다. 영어로 되어있는 페이지이지만 크게 어려울 것은 없다고 생각한다. 글자수로 계산해서 점수가 매겨지기 때문에 글자수를 적게써서 정답을.. 2020. 3. 7.