CSS Battle #2

CSS Battle #2

https://cssbattle.dev/play/2

CSSBattle

이 문제도 솔직히 쉽다. 

박스 4개를 만들고 정렬하기만 하면 된다.

나는 nth-child를 사용했는데 

그냥 class값이나 id값을 사용해도 간단했을 것 같다. 

 

css position 속성 값은 relative, absolute, fixed, static이 있다.

주의해서 기억할 점은 

자식 요소에 position:absolute;를 쓰려면 

부모 요소에 position:relative;를 꼭 적어줘야한다.

 

그리고 만약 부모가 absolute여도

포지션 기준을 그 부모로 하고 싶을 때는

자식에 또 abolute를 적어주면 된다.

 

그리고 나같은 경우는 전제 body사이즈를 여기서 정해주지 않았기 때문에

모든 기준이 top:0, left:0기준인데

만약에 body의 width:400px;height:300px;쓰게 되면

전체 사이즈의 기준이 잡히기 때문에

포지션을 줄 때 bottom, right으로 설정해도 된다.

 

아 참고로

div는 block요소이다.

block요소는 따로 사이즈 설정을 안하면

한 줄을 모두 차지한는 요소이다.

(대표적인 block요소는 div, h, p, li 등등)

여기서 block을 다른 요소로 바꾸고 싶다면

display속성을 이용해서 바꿀 수 있다.(inline, inline-block이라던가..)

 

참고로 inline요소는 한 줄을 모두 차지하지 않고

본인 내용만큼만 크기만을 가진다.

(대표적인 inline요소는 a, img, span 등등)

따라서 style에서 width값이나 height값을 설정해도

아마 적용되지 않을 것이다. 

만약에 inline요소에 크기를 주고 싶다면 

display속성을 이용해서 바꿀 수 있다.(block, inline-block)

 

대표적 block요소로는 p가 있다.

따라서 글씨 줄이고 싶다면 div대신 p사용하면 좋을 듯!