CSS
margin 겹침 (통합) 현상 (margin-collapsing)
두 개 이상의 margin 값이 세로 방향으로 만났을 때 하나의 margin으로 합쳐지는 현상이다.
이런 게 있는지 이번에 처음 알았는데 그동안 디자인할 때 왜 그렇게 margin이 안 맞았는지 이제야 알았🤣🤬
div가 위 아래로 위치해있다 가정하고, 위 div의 margin-bottom이 20px이고, 아래 div의 margin-top이 30px 일 때 두 개가 만나면 bottom, top이 합쳐진 50px가 아닌 둘 중 큰 값인 30px가 된다.
line-height
폰트는 그대로 있고 폰트 위 아래의 행간이 넓어진다.
background
color | image | repeat | position | attachment | inherit
한 꺼번에 선언 시 위와 같은 순서로 한다.
visibility
visibility hidden과 display의 none은 css 작업 시 많이 사용하는데 비슷해 보여도 둘이 작동한 결과는 엄연히 다르다.
visibility hidden은 해당 자리가 있던 공간이 그대로 남아있고 display를 none 해버리면 공간 자체도 없어져버림
float
block 정렬로, 요소가 흐를(float) 방향을 지정한다.
clear
block 정렬을 해제, 즉 요소의 흐름을 해제한다.
해제할 땐 보통 both로 한다.
position
부유시킨다.
layer 개념으로 어떤 요소를 특정 위치에 옮겨놓고 싶을 때 사용한다.
relative : 요소의 본래 위치에서 상대적으로 위치
absolute : 절대 배치
fixed : 위치를 고정한다. 절대적 위치와 비슷하다.
z-index
z-index는 position이 지정된 경우에만 사용할 수 있다.
이미지 스플릿 기법
필요한 이미지를 한 장에 다 모아서 사용하는 것이다.
해당 기법을 사용하면 서버 상에서 이미지를 한 번만 호출하게 된다.
이후 position 값을 이용해 이미지를 하나하나씩 따오는데 이 때문에 관리 편의성은 떨어진다(위치 값 찾고 맞춰야 해서).
서버 부하량을 줄이고 반복적인 일을 줄이기 위해 사용하는데, 큰 이미지를 이 기법으로 사용하면 역효과가 날 수 있으므로 작은 이미지를 위주로 한다.
