css 배치 관련 문의입니다


<header>
    <div id="topIcon">
        img 2개
    </div>
    <div id="topSearch">
        input, button, input
    </div>
    <div id="topIcon">
        img 1개
    </div>
</header>

이렇게 헤더에 아이콘이미지 두개 / 검색바 / 아이콘이미지 하나 일렬로 배치 되어있습니다.

이미지들은 px로 고정크기, 검색바는 그 나머지 자리를 모두 차지하게 하려면 어떻게해야하나요?

11번가 모바일페이지 상단헤더가 거의 원하는 결과입니다.

  • 2016년 07월 12일에 작성됨

조회수 179


1 답변


좋아요
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년 07월 12일에 작성됨
    저는 컴퓨터 공부에 입문한지 1년이 조금 넘은 초보 개발자 입니다. 홈페이지나 어플을 만들기 위해서 공부하고 있습니다.

  • 감사합니다 사이트도 참조해보겠습니다!    Jinoh Kim   2016.7.14 10:13     
  • 가운데 검색바를 왼쪽마진은 적용이 되나 오른쪽마진은 준만큼 되지않고 끝까지 늘어나져있네요 왜그런가요?    Jinoh Kim   2016.7.25 16:17     
  • 음 봐보니 width:100% 로 일단 화면 크기만큼 길이는 되어있는 상태에서 마진을 줘서 단지 위치만 옮겨가서 그런거같네요..    Jinoh Kim   2016.7.25 17:12     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close