목록반응형 (2)
키스세븐
[div 겹침 문제 해결 방법 - DIV의 float 사용 문제라면 clear로 해결] 90년대와 2천년대에는 사이트 디자인을 거의 테이블로 했지만, 최근의 홈페이지는 반응형도 염두에 두어야 하고 속도 문제도 있기 때문에 테이블 구조로 짜는 경우가 거의 없습니다. 그래서 최근의 사이트는 대부분 DIV로 디자인 배치가 작성됩니다. 그러다보면 div 겹침 문제가 일어나서 골치가 아픈 경우가 있습니다. Div 겹침 문제 예제 Float 속성 div는 기본적으로 좌우 100%의 너비를 가지고 있고 div를 추가하면 자동으로 아래쪽으로 길이가 길어지게 됩니다. 그 중의 한 가지 문제는, 이것을 옆으로 배치하거나 할 때 float를 사용해서 배치를 하게 되는데, 이 경우에 div 겹침 문제가 종종 발생합니다. 이럴..
[화면크기에 따라 달라지는 CSS의 @media] 반응형 홈페이지, 반응형 웹페이지 등의 용어가 대세입니다. 여러가지 설명할 것들은 많지만, @media에 대해 간단하게 알아 볼까 합니다. 왜 반응형인가? 과거에는 방문자들이 PC에서 홈페이지나 블로그를 찾아 왔지만, 스마트폰 열기가 시작된 이후로는 모바일을 통한 방문 비중에 매우 높아졌기 때문입니다. 문제는 PC의 모니터 크기와 모바일의 화면 크기(해상도)가 다른 것에 있습니다. 모바일 방문자가 늘어나면서 웹마스터들은 고민을 하기 시작했습니다. 홈페이지를 PC용과 모바일용으로 따로따로 만들어야 하는가? 물론 처음에는 각각 만들었었습니다. 하지만 같은 것을 두고 두번의 작업을 다시 해야 한다는 비효율 문제가 대두되었습니다. 더구나, 4인치 대 부터 5.5..