본문 바로가기

CSS position3

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 #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.
CSS Battle #2 CSS Battle #2 https://cssbattle.dev/play/2 CSSBattle CSS Code Golfing is Here! cssbattle.dev 이 문제도 솔직히 쉽다. 박스 4개를 만들고 정렬하기만 하면 된다. 나는 nth-child를 사용했는데 그냥 class값이나 id값을 사용해도 간단했을 것 같다. css position 속성 값은 relative, absolute, fixed, static이 있다. 주의해서 기억할 점은 자식 요소에 position:absolute;를 쓰려면 부모 요소에 position:relative;를 꼭 적어줘야한다. 그리고 만약 부모가 absolute여도 포지션 기준을 그 부모로 하고 싶을 때는 자식에 또 abolute를 적어주면 된다. 그리고 나같은.. 2020. 3. 8.