CSSBattle CSS Battle 사이트는? Target #7 - Leafy Trail 문제 풀러가기 동일한 잎 모양의 도형이 3개 반복된다. box-shadow를 이용해서, 간단하게 처리하자! <i></i> <style> body { background: #0B2429; } i { ...

CSSBattle CSS Battle 사이트는? Target #6 - Missing Slice 문제 풀러가기 이것도 특이한 아이디어는 없다. 단순히 구획을 4개로 나누었고, 각각 border-radius를 따로 적용했다. <div> <i></i> <i></i> <i&g...

CSSBattle CSS Battle 사이트는? Target #5 - Acid Rain 문제 풀러가기 일단 빗방울 같이 생긴 도형 2개는 box-shadow를 이용해서, 같이 처리하면 될 것 같았다. 문제는 오른쪽 원이었고, border-radius가 달랐기에 새로 하나 만들고, 픽셀로 계산해서 조절해서 넣자 생각을 했다. <div&...

CSSBattle CSS Battle 사이트는? Target #4 - Ups n Downs 문제 풀러가기 보자마자 일단 6개의 구역을 나누고, 짝수번째인것의 색상을 바꾸자 라는 생각부터 들었다. 그리고 flex로 각 영역마다 너비를 33%씩 나누어 가지게 만들어서 영역이 아래로 내려가게 하면 되겠지 생각을 해서 쭉 구현을 했다. 근데, ...

CSSBattle CSS Battle 사이트는? Target #3 - Push Button 문제 풀러가기 얼핏보면 원을 여러모로 많이 만들어야 하는 풀이로 풀 수도 있다. 근데, 원의 모양이 바깥으로 점점 퍼져나가는 걸 보고, box-shadow를 중첩해서 쓰면 될 것 같다는 생각이 들었다. (나는 div를 정가운데로 보낼 때, 자연스럽...

CSSBattle CSS Battle 사이트는? Target #2 - Carrom 문제 풀러가기 같은 요소 4개를 만들고, 4방향으로 퍼뜨리면 되는 문제다. 일단 아래와 같이 복잡하게 풀었는데.. 조금 더 쉽게 해결되는 방법이 있는지 더 생각해봐야겠다.. <div> <div> <div></...

CSSBattle online tutorial 영상을 통해 접한 사이트다. 이 사이트에서는 아래와 같이 오른쪽에 주어진 Target을 HTML, CSS로 만들어내는 문제를 풀 수 있다. 또, 서로 경쟁하는 시스템도 있는 것 같다. Target #1 - Simply Square 문제 풀러가기 body에 있는 기본 margin을 0으로...

문제 풀이 12205번: 주유소 문제를 해결하는 방법은 심플하다. 최대한 싼 곳에서 기름을 많이 넣자. 그럼, 모든 곳마다 얼마큼 넣어야하는지를 탐색하면서 구해야할까? 아니다. 그냥 앞에서부터 뒤에까지 탐색을 하면서, 그 지점까지 오면서 싼 가격이 얼마였는지 기록해놓고 그때그때 가야 하는 거리에 해당 가격을 곱해서 누적해가면 된다. 풀이 ...

문제 요약 및 풀이 2205번: 저울 추 만들기 문제를 보자마자, 일단 쭉 나열해봤다. 1 2 1 2 1 2 3 3 2 1 1 2 3 4 3 2 1 4 1 2 3 4 5 1 2 5 4 3 1 2 3 4 5 6 1 6 5 4 3 2 1 2 3 4 5 6 7 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 7 6 5 4 3 2 1 8...

문제 요약 및 풀이 2212번: 센서 처음에 문제 지문을 보고 이해가 안 갔다. 아래와 같이 바꿀 수 있지 않을까? ## 문제 한국도로공사는 고속도로의 유비쿼터스화를 위해 일직선의 고속도로 위에 N개의 센서를 설치하였다. 이 센서들로부터 자료를 모으고 분석할 몇 개의 집중국을 세우려 하지만, 예산상의 문제로 고속도로 위에 최대 K개의 집중국...