CSS Battle #5

https://cssbattle.dev/play/5

CSSBattle

다섯번째 문제.

 

일단 언제나처럼 전체 margin:0처리후 시작

이렇게 reset을 해줘야 원래 deault로 각 요소마다 가지고 있는 기본 마진이 사라진다!

 

일단 나는 이 문제에서는 각각 클래스를 주지는 않았고 

그냥 nth-child()를 사용하였다.

어차피 여기서는 모든 요소가 p이기 때문에

nth-child(1)이렇게 쓰면 첫번째 요소가 그냥 선택된다.

만약에 요소가 여러가지 섞여있을 때는 nth-of-type()을 쓰기도 하는 듯?

아 만약 첫번째 요소나 마지막 요소를 선택하고 싶을 때는

first-child나 last-child를 적어줘도 가능하다.

 

혹시 모르니까 정리를 다시 하자면

nth-child(): 부모 안에 속한 모든 자식 요소중 ()번째 요소.

ex) .wrap01> p:nth-child(2) {} -> .wrap01안의 모든 자식중 2번째 요소인 p 요소.

nth-of-type(): 부모 안에 속한 자식 중 특정 요소중 ()번째 요소. 

따라서 nth-of-type()는 

ex) .wrap02 > div:nth-oy-type(3) {} -> .wrap02안의 div 요소들 중 3번째 요소.

아마 연습을 하게되면 자연스럽게 이해갈것 같다. 

그리고 그 외에는 그냥 원 만드는 것과

border-radius가 한쪽 빼고 들어가있는 요소를 만들면 되는데.

정원은 전해 한 것 처럼 그냥 전체 박스 사이즈 넓이 혹은 높이의 반절만큼의 값을 써주거나 

다른 예제를 봤더니 border-radius:50%라고 적어도 되는 것 같긴 하다.

 

두번째 요소와 세번재 요소는 border-radius의 4가지 값 중

두번째를 제외한 모든 값을 넓이 절반만큼만 주면 된다. 

 

그리고 또 다른 내용은 position!

저번 테스트에서 써봤지만

무조건 position: absolute를 사용하고 싶다면 부모 기준에 

position:relative;가 있어야 한다. 

그러나 내 부모도 다른 조부모의 자식일 수 있다면

조부모에 대해서 position: relative;라고 하고

그 아래 부모, 자식에 대하여 모두 position: absolute;를 적어야한다.

이것도 해보면 다 연습이 되긴 한다!