CSSBattle

문제 해결 HTML CSS

문제 풀이

문제 풀이 HTML CSS

문제 풀이

문제 풀이

문제 풀이

문제 풀이

문제 풀이

문제 풀이

문제 풀이

문제 풀이

문제 풀이

문제 풀이 실패한 방법

문제 풀이

이전 삼각형 모양 만드는 문제를 풀었던게 도움이 많이 되었어요.border로 보라색 모양을 만들고 flex로 배치하였습니다.

문제 풀이

background: linear-gradient(방향, 색상1, 색상2)명확한 선 생성하기두 가지 색상 사이에 점진적인 전환 대신 명확한 선을 만들어 줄무늬를 만들고자 할 때는 인접한 색상 정지 지점을 동일한 위치에 설정할 수 있습니다.

문제 풀이 HTML CSS

문제 풀이 HTML CSS

문제 풀이 HTML CSS

문제 풀이 HTML CSS

문제 풀이 HTML CSS

문제 풀이 HTML CSS

문제 풀이 HTML CSS

이번 문제를 풀면서 중앙에 배치된 요소의 위치를 margin으로 조정하려고 했어요.아래 이미지의 보라색 사각형에 margin-top을 주었는데, 보라색 사각형 상위에 위치한 검정색 배경도 함께 margin-top이 생겼어요.하지만 개발자 모드로 보니 검정색 배경에는 m

원 모양의 패턴은 radial-gradient로 쉽게 완성이 되는거 같아요.원 두개는 radial-gradient 두 개를 사용해서 쉽게 완성했어요.

이번엔 class 대신 인접 형제 결합자를 사용해봤어요.결합자에 익숙하지 않으니 결합자를 사용해봐도 도움이 될것 같아요.또 요소를 뒤집을 때 rotate 대신 scale을 사용해봤어요.

이번 문제는 clip-path를 사용해봤어요.위의 모양에서 보여주지 않을 부분을 자르기 위해, polygon()을 사용해서 육각형의 모양으로 보여줄 부분 좌표만 설정해줬어요.좌표대로 설정하면 위와 같은 모양의 육각형이 돼요.해당 육각형을 첫 이미지의 도형에 적용하면 아

문제 풀이

border로 삼각형 만드는걸 익힌게 여러모로 많이 사용되네요.요소를 겹치게 할 때 저는 absolute를 사용해요. absolute를 사용할 때 중앙 정렬은 left: 50%, top: 50%, transform: translate(-50%, -50%)를 사용하고 있

radial-gradient로 편하게 만들었어요.background-image 값이에요.중심에서 반지름 50px까지는 연두색 원을 만들어주고, 그 이후는 어두운 남색으로 바꿔줘요.background-position 값이에요.width, height이 240px의 공간의