background-size: contain; 적용이 이상하게 됩니다.
본문
background-size: contain; 를 적용하려고 하는데 cover속성은 잘되면서 contain 속성은 이상하게 적용이 되네요.
첨부한 사진과 같이 높이가 8px이 되면서
크롬 검사로 보면 무슨 마진값 8px이 걸려있고 이거때문에 그런거같은데 원인이 뭘까요?
답변 1
브라우저들은 HTML 요소에 대한 자신만의 스타일을 지정해두고 있습니다.
그렇기때문에 css reset 이라하여, 제각각의 스타일을 가진 브라우저들을 하나로 통일된 디자인으로 바꾸고 작업을 하지요.
관련하여 CSS reset, 혹은 css 리셋으로 구글에서 검색해보셔요.
위의 margin: 8px 브라우저가 지정하는 기본 margin 값입니다.
그리고 지정하는 background-size: contain 은 콘텐츠 영역만큼 크기를 맞추는 것입니다.
<body> 안에 일정량의 크기를 가진 요소들이 없기에 그런식으로 나오는 겁니다.
현재 body 요소에 크기를 강제로 지정하거나 원하시는 크기만큼 콘텐츠를 작성해야겠죠.
대부분 background-size: cover; 가 많이 사용되며, 화면을 가득채우거나 새로운 요소를 만들고 크기를 지정하는 방향으로 많이 적용합니다.
근데 제가 크롬,익스,파폭,엣지 다 해봤는데 똑같더군요.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=initial
이거랑 차이가 있을까요?
아 알았습니다. 말씀하신대로 요소안에 해야되나보네요.
답변을 작성하시기 전에 로그인 해주세요.