HTML/CSS - 이미지와 배경이미지 차이, float 의 이해
앞 포스팅에서 div태그와 여러 background image를 활용해 네이버 뉴스판 같은 것을 만들었었다.
이것을 만들기 위해 짠 코딩을 보여주자면, 이렇다ㅋㅋ 세상 난잡.. 심지어 저 body태그, 시작부분이다.
여기서 알고가는 image와 background-image의 차이점!
<img>로 넣는 이미지들은 콘텐츠 이고, alt=""로 접근성이 해결된다.
background-image로 넣는 것은 콘텐츠가 아니고, 연결만 되어 있는 것이다. 그래서 크기를 주고 background image 를 넣어야 한다.
background image는 콘텐츠가 아니라서 컴퓨터가 읽을 수 없다. 따라서 background 처리할 때에는 컴퓨터가 읽을수 있도록 해당되는 내용을 안에 써주어야 한다.
다시 본론으로 돌아와서, 저렇게 프로그래밍을 짜면 미추어 버린다ㅋㅋ 그리고 이미지가 여러 개이면 인간의 눈으로 좌표를 아는 데에도 한계가 있어서 이럴땐 float를 사용한다.
float는 블록 요소가 여러 개일때, 세로로 배치되는 블록 요소를 가로로 배치하기 위해 사용한다.
그렇다면 absolute는 왜 사용했을까? 그 블록을 가로로 배치하려고 썼었다.
아무튼, float를 주는 순간 블록은 "인라인-블록"으로 형태가 바뀐다.
따라서 인라인 성격을 가져서 블록은 가로로 배치가 되고, 블록의 성격을 가져서 크기를 갖는다. 인라인 텍스트 공간이 부족하면 다음줄로 넘어가듯, float 을 주면 그렇게 된다.
absolute position과 float을 쓰면 float은 무시된다.
이 포스팅의 맨 첫 이미지와 그 아래 코딩한 것을 보면 <li>태그를 absolute position으로 주고, <div>태그에 어떠한 width나 height를 지정하지 않았음을 볼 수 있다.
그래도 각각의 nth-child마다 left와 top값을 지정해서 6X4 사이즈에 맞게 로고가 배치되었다.
그렇다면, float을 이용하면 어떻게 될까?
여기서 <li>태그의 absolute positon을 float:left 로 변경해보자.
우리가 원하는 6X4 사이즈에 맞게 로고가 있는 것이 아닌, 브라우저 전체에 순차적으로 배치된 것을 볼 수 있다.
float는 떠 있기 때문에 사이즈를 주어야 한다.
float에서 높이를 주지 않으면 contents 크기만큼 높이가 늘어가는데 float는 떠 있기 때문에 컨텐츠로 인식을 못한다. 그렇기 때문에 float 대상의 부모는 반드시 크기를 가져야 한다.
여기서 float 대상의 부모인 id가 news_logos인 <div> 태그에 폭과 높이를 주도록 하자.
이렇게 하면 float가 아닌, absolute를 썼을 때와 동일한 결과가 나온다. 아 물론, float를 썼으니 absolute 때 <li> nth-child 때 하나하나 부여해준 left,top위치는 필요가 없다!
이미지와 배경이미지의 차이, float를 사용했을 때와 absolute position을 사용했을 때의 차이점을 알아보았다.
직접 해 보면서 연습해보도록 합시당!