css border-radius3 CSS Battle #5 https://cssbattle.dev/play/5 CSSBattle CSS Code Golfing is Here! cssbattle.dev 다섯번째 문제. 일단 언제나처럼 전체 margin:0처리후 시작 이렇게 reset을 해줘야 원래 deault로 각 요소마다 가지고 있는 기본 마진이 사라진다! 일단 나는 이 문제에서는 각각 클래스를 주지는 않았고 그냥 nth-child()를 사용하였다. 어차피 여기서는 모든 요소가 p이기 때문에 nth-child(1)이렇게 쓰면 첫번째 요소가 그냥 선택된다. 만약에 요소가 여러가지 섞여있을 때는 nth-of-type()을 쓰기도 하는 듯? 아 만약 첫번째 요소나 마지막 요소를 선택하고 싶을 때는 first-child나 last-child를 적어줘도 가능하다. 혹시 .. 2020. 3. 17. 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 #3 https://cssbattle.dev/play/3 CSSBattle CSS Code Golfing is Here! cssbattle.dev 세번째 문제. 일단 여기서 가장 중요했던 것은 모든 요소들이 다 가로와 세로에서 중앙정렬이라는 점. css에서 중앙정렬 하는 방법은 여러가지가 있다. 내가 모르는 방법도 분명 있을 것! 그 중에서 블럭 요소를 정렬하는데 많이 쓰이는 것으로 지금 딱 떠오르는 것은 2가지이다. 첫번째는 margin사용. 두번째는 position사용. 첫번째의 경우 원하는 요소의 스타일에 margin:0 auto 을 적용하면 된다. margin이란 요소와 요소 외부 사이의 간격을 의미한다. 크롬에서 f12를 누르거나 오른쪽 마우스 클릭하고 맨 마지막에 "검사"를 클릭하면 개발자도구가 나.. 2020. 3. 9. 이전 1 다음
