<Web> 밀리의 서재 클론코딩

1. HTML element 배경에 이미지 넣기

css에서 background-image 관련 property를 활용하면 배경을 이미지로 대체할 수 있습니다.

background-size: cover; => 이미지의 비율을 유지한 채로 제일 크게 설정합니다. 이미지의 크기가 요소를 초과하면 이미지를 잘라내어 빈 공간이 생기지 않도록 합니다.

background-position: center; => 이미지를 가운데 정렬합니다.

<background-image 설정 관련 properties>

 

2. position: absolute에서 화면 중앙에 배치하기

부모 요소의 좌측 또는 상단에서 50% 만큼 띄운 후에 해당 요소의 좌표값을 50% 만큼 되돌립니다.

<부모 요소의 가로폭 방향으로 가운데 배치>

 

3. pseudo selector

BEM으로 클래스가 난무하는 것이 싫을 때는 pseudo selector를 잘 활용해야 합니다. CSS pseudo selector를 활용하면 HTML 요소들을 디테일하기 다룰 수 있습니다.

<위: ::placeholder keyword로 placeholder의 색상 변경 / 아래: :not(), :nth-child(n), :focus 중첩 사용>