ul, li로 된 갤러리 항상 가운데에 위치하려면..

조회수 58회

안녕하세요.
ul, li 태그로 된 갤러리를 웹사이트에 적용중입니다.
li에 있는 아이템들중에 사진이 여러개라서 썸네일 화면에는 노출이 되지않길 바라는애들을 display:none해둔 상태입니다.
이상태에서 float:left를 지우면 inline-block 을해도 한줄에 아이템이 하나씩밖에 뜨질않아요..
그래서 대충 마진 레프트 라이트를 vw로 맞춰서 대충 해둔 상태인데 ㅠ 반응형으로 만들고싶습니다...

.demo-gallery {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;

}

.demo-gallery>ul {
  text-align: center;
  margin-bottom: 0;
}

.demo-gallery>li {
  text-align: center;
  display: inline-block;
}

.demo-gallery>ul>li {
  margin-bottom: 20px;
  margin-right: 20px;
  width: 400px;
}

.demo-gallery>ul>li a {
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

어떻게 해야할까요? ㅠㅠ
미리 감사드립ㄴ디ㅏ..

  • 사실 이렇게만 봐서는 뭐가 현상이고 그 현상의 뭐가 문제라 하시는 것인지 잘 모르겠군요. codepen.io 같은 곳에 데모를 띄워주실 수 있을까요 엽토군 2021.2.17 09:52
  • http://lotuswoodland.nl 입니다ㅠ 답변감사드립니다 ㅠㅠ yeoleum yun 2021.2.17 23:40

1 답변

  • 좋아요

    1

    싫어요
    채택 취소하기

    사이트를 열어봤습니다. 고생이 많으시네요. 이런 사이트라면 wix 같은거 쓰셔도 될텐데 아무튼... style.css 에서:

    1. .worksmargin-left, margin-right를 지우세요.
    2. .demo-gallery > ul > li의 스타일을 다음과 같이 수정합니다.
      • float, margin-right를 지우세요.
      • width: 400px;max-width: 400px;로 바꾸시고, width: 100%;를 추가하세요.
    3. 원하시는 것이 달성되었는지 확인해 보세요.

    참고로, "반응형"으로 만들 때:

    • 웬만하면 '좌우 여백'이나 '가로 너비'를 특정하지 않습니다. 기본적으로 너비는 (전체 window 너비를 기준으로) 자동으로 잡히도록 해야 하며, 전체 너비를 사용하는 요소는 display: block;이어야 합니다. (그래서 max-width를 사용, vw 단위는 반응형 스타일링의 기본은 아님)
    • 웬만하면 float 걸지 않습니다. (정확한 통제 없이 사용하면 레이아웃 망침)
    • 너무 감사합니다ㅠㅠ yeoleum yun 2021.2.28 06:07
    • 바로 되네요.. 근데 한줄에 두개씩 나오게 하는방법은 없을까요? 가운데로는 오는데 하나씩만 나와서요ㅠ yeoleum yun 2021.2.28 06:12
    • 그건 좀 다른 문제입니다. 모바일 화면 너비 / PC 화면 너비 등 모든 상황에서 2열로 나와야 하는 건가요? 그건 아닐 거거든요. 혹시 시간이 되시면 Bootstrap 같은 CSS 프레임워크를 공부해 보시면 좋을 거 같습니다. https://getbootstrap.com/docs/5.0/layout/grid/ 엽토군 2021.2.28 13:22
    • 감사합니다. 아뇨 pc화면에서만 2열로 나오게하고싶은데 맔 Yeoleum Yun 2021.2.28 21:59
    • 말씀해주신 방법대로하니까 둘다 1열로만 나와서요.. 네 지금 다시 차근차근 공부해보고있는중인데.. 이미 해본거 해결을해보고싶어서 ㅠㅠ.. Yeoleum Yun 2021.2.28 21:59
    • 댓글이 없어졌네여 ㅠㅠ Yeoleum Yun 2021.3.1 06:42
    • 네 안그래도 다시 공부중인데.. 일단 해놓은건 마무리지어보고싶어서.. 피씨에서만 2열로 나오고싶은데 지금 둘다 1열로 나오는상황이라서요 ㅠㅠ Yeoleum Yun 2021.3.1 06:43

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.