CSS Battle #3

https://cssbattle.dev/play/3

CSSBattle

세번째 문제. 

일단 여기서 가장 중요했던 것은 

모든 요소들이 다 가로와 세로에서 중앙정렬이라는 점.

 

css에서 중앙정렬 하는 방법은 여러가지가 있다.

내가 모르는 방법도 분명 있을 것!

그 중에서 블럭 요소를 정렬하는데 많이 쓰이는 것으로 

지금 딱 떠오르는 것은 2가지이다.

첫번째는 margin사용.

두번째는 position사용.

 

첫번째의 경우 원하는 요소의 스타일에

margin:0 auto 을 적용하면 된다.

margin이란 요소와 요소 외부 사이의 간격을 의미한다.

크롬에서 f12를 누르거나

오른쪽 마우스 클릭하고 맨 마지막에 "검사"를 클릭하면

개발자도구가 나오는데

elements의 오른쪽 섹션의 맨 하단에 내려가면

보통 위와 같은 그림이 나온다.

딱 저 그림이 margin, border, padding, content를 잘 설명한다.

 

이 요소에서 width, heigt를 설정한 저 하늘색 부분이 24px*24px이다.

그 내용을 덮는 연두색 부분은 padding인데 내 컨텐츠의 내용과 박스 크기의 사이 여백을 말한다.

따로 설정하지 않으면 default값이 있을 수 있다.

그리고 border는 요소 박스를 감싸는 영역을 말한다.

border와 같은 경우는 default는 컨텐츠의 사이즈에 포함되지 않는다.

그러나 만약 border의 값까지 포함된 영역을 컨텐츠 사이즈에 포함시키고 싶을 때는

해당 요소에 box-sizing:border-box;를 추가하면 된다. 

그리고 주확생 부분이  즉 margin이다. 

나와 나에게 근접한 다른 요소 사이의 거리라고 할 수 있겠다. 

 

보통 margin을 설정할 때 값을 1~4개 적는다. 

예시)

margin:10px; → top,left,bottom,right 마진 모두 10px (margin:10px 10px 10px 10px ;를 줄여쓴 것)

margin:10px 5px; → top&bottom 마진이 10px, left&right 마진이 5px

margin:10px 5px 20px; → top 마진이 10px, left&right 마진이 5px,bottom 마진이 20px

margin: 5px 10px 15px 20px; → top 마진이 5px, right 마진이 10px, bottom 마진이 15px, left 마진이 20px

 

따라서 margin에 값을 2개 줬다는 것은 위아래 마진, 양옆 사이드 마진을 의미한다. 

그 중 auto는 시스템 내에서 자동으로 계산 한 것으로 

양옆 마진을 auto로 줬다는 것은 알아서 계산하여 같은 값으로 설정했다는 것을 의미한다. 

고로 중앙정렬이 된다는 의미.

**만약 위의 여백을 주고 싶다면 0이 아닌 다른 값을 주어도 된다.

 

두번째로 중앙정렬 하는 것은 position을 이용하는 것으로 

top, left를 둘다 활용하여 아예 전체에서 가운데 정렬할 수 있다.

일단 left:50%를 설정한다.

그러면 기준이 되는 페이지의 중앙에서 요소의 위치가 시작된다.

요소의 크기가 조금만 커도 중앙정렬이 되지 않았다는 것을 딱 알아챌 수 있다.

그렇게 되면 transform 속성을 이용한다.

transform에는 rotate, translate, skew,scale 이런 것들이 있다.(3D는 아직 공부를 못함!)

자리 이동할 때는 translate를 사용한다. 

상식적으로 생각할 때 중앙에서 시작하는 요소를 중앙에 딱 위치하게 하려면

내 요소의 중앙을 중앙에 일치시키면 된다.

그렇다면 내 크기의 절반만큼만 앞으로 땡겨주면 된다.

따라서 transform:translateX(-50%); 써주면 된다. 

이때 translateX는 x축 이동을 말한다. 

-를 붙인 이유는 앞으로 땡겨가는 것이기 때문에 붙여줘야한다.

그렇다면 

기준 페이지의 높이가 정해져 있다면 위아래 중앙정렬도 가능하다.

top:50%해주고 transform:translateY(-50%);해주면 끝!

당연히 위아래는 y축 이동이기 때문에 x로 써주면 잘못된 것!

이렇게 하면 가운데 정렬은 문제 없다.

 

아 css에서 원을 만드는 방법도 적어야한다.

css에서 그냥 디폴트로 원을 만드는 것은 없을 것이다. 아마..? 

이미지 소스를 가지고 오지 않는 이상은.

따라서 매우 간단하게 한다.

css에는 border-radius라는 속성이 있다. 반경같은 건데 

나의 크기가 정사각형일 때,

그 절반 만큼 border-radius값을 주면 딱 원이 만들어진다. 

즉 width:100px;height:100px;일 때

border-raidus:50px;하면 딱 정원이 된다.

 

border-radius같은 경우도 margin과 마찬가지로 1~4개의 값의 개수를 가질 수 있다.

1개의 값일 때만 정원일 것이고 값이 많아질 수록 당연히 모양은 일그러질 수 밖에 없다.

 

글이 너무 길어져서 따로 코드는 적지 않는 걸로!