css 배치 관련 문의입니다
조회수 1696회
<header>
<div id="topIcon">
img 2개
</div>
<div id="topSearch">
input, button, input
</div>
<div id="topIcon">
img 1개
</div>
</header>
이렇게 헤더에 아이콘이미지 두개 / 검색바 / 아이콘이미지 하나 일렬로 배치 되어있습니다.
이미지들은 px로 고정크기, 검색바는 그 나머지 자리를 모두 차지하게 하려면 어떻게해야하나요?
11번가 모바일페이지 상단헤더가 거의 원하는 결과입니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
저도 초보라서 큰 도움이 될지는 모르겠지만 , 아는선에서 도움드리고 싶습니다.
간단히 이야기 하자면 a. 로고 , 메뉴버튼 , 장바구니 버튼 같은경우는 고정으로 적당한 px로 지정해 놓으시고요
b. 검색바가 여러 화면 크기에 맞게 width가 늘어나거나 , 줄어들어야 하니까 , 이것은 당연히 고정 px을 사용할 수는 없습니다.
b-1. width를 %로 설정해야 겠지요.
b-2. 근데 같은 line에 있는 이미지 로고 ..등등은 고정 px이고 검색바만 %를 쓰는건 의미가 없게되죠. - 왜냐면 , 30px 30px 80% 30px (width) 이라고 했을 때 , 저 90px이 화면의 20%를 차지할 것이라는 계산이 나와야 겠지요. 즉 이렇게 섞어쓰면 그냥 다 px로 고정하는거랑 차이가 없습니다.
b-3. 그러므로 검색바와 나머지들은 같은 라인에 있는것 처럼 보이면서 , 실제로는 따로 놀아야 합니다.
-11번가 모바일 페이지를 참고했습니다-
b-4. header의 position을 relative로 하시고 , 왼쪽 #topIcon는 position을 absolute , left : 0 , top : 대충 알아서~ (5px정도?) 로 해서 부모인 header의 왼쪽에 착 달라붙게 합니다. 그리고 , 오른쪽 #topIcon은 오른쪽에 탁 붙어야 하니까 , position : absolute , right : 0 , top : 대충알아서~ (5px정도?) 이렇게 해줍니다.
b-5. 검색바는 position : relative로 하고 , 이미 고정되어있는 왼쪽 오른쪽 #topicon의 width px만큼 margin을 주면, 마치 두 옆 이미지 때문에 검색바가 중앙에서 양옆 공간을 양보해 주는 코스프레를 시킵니다.
c. 이런식으로 하시면 , 검색바는 어쨋든 시킨대로 오른쪽이랑 왼쪽이랑 x px만큼씩 양보를 해야하고 , 이미지들은 딱 그만큼 공간을 차지하고 있고, 화면의 크기가 뭐가 어떻게 되든간에 시킨건 오른쪽이랑 왼쪽이랑 x px만큼씩 양보 하는거니까 '나머지 공간을 차지'하게 되겠지요.
테스트는 안해봤는데 , 큰 개념은 이렇게 됩니다. 참고하시고 ! 중요한건 작성자 분이 layout에 대한 정보가 조금 부족한것 같네요. ''ko.learnlayout.com/''을 참고하면 좋아요~
ps. 아무래도 그림을 말로 설명하려다 보니까 설명이 간단하지 않게되었네요.
-
(•́ ✖ •̀)
알 수 없는 사용자
- 감사합니다 사이트도 참조해보겠습니다! 알 수 없는 사용자 2016.7.14 10:13
- 가운데 검색바를 왼쪽마진은 적용이 되나 오른쪽마진은 준만큼 되지않고 끝까지 늘어나져있네요 왜그런가요? 알 수 없는 사용자 2016.7.25 16:17
- 음 봐보니 width:100% 로 일단 화면 크기만큼 길이는 되어있는 상태에서 마진을 줘서 단지 위치만 옮겨가서 그런거같네요.. 알 수 없는 사용자 2016.7.25 17:12
-
댓글 입력