응암시장 브런치 맛집 "사생활 파스타&브런치"

작성자:
지인과 함께 응암동 파스타집으로 점심먹으러 GoGo! 입구를 들어서는 순간 술집인가? 했네 ㅎㅎ 위치는 응암시장에서  백련자이아파트로 올라가는 왼쪽 길에 있네요. 좀 더 쉽게는 은평시립병원으로 올라가요... 응암새싹어린이공원 가기 전에 왼쪽 살짝 골목처럼 들어가는 위치에 있어서 찾기가 좀... 이런곳에 이런 분위기의 브런치가 있을까 싶었네요 들어가는 위치는 좀 그렇지만 올라가면 나름 분위기 있고 꽤 넓습니다. 들어오면 아기 의자가 있네요 테이블이 붙어 있지 않아서 옆 사람 이야기 잘 안들려서 사생활인가?  했네요. ㅋㅋ 들어와서 직진하면 키오스크 보입니다. 여기서 주문하고 물은 셀프에요. 주문하고 물이 없어서 한참을 두리번거렸네요. 주문하는 곳이랑 주방이 보입니다. 테이블이 넓직하죠? 테이블 사이 공간도 여유롭고 깔끔합니다. 주문하고 맛 보느라 먼저 먹었네요. 잘 안보이죠? ㅎㅎㅎ 헉! 먹은게 보이네요.. 더 예쁘게 나왔는데... 암튼 이건 살짝 매워요 근데 맵질인 저에게 살짝 매울 뿐 마라탕 1.5 단계도 안됩니다. 수비드 등심 토마토 보리 리조또 앗! 이것도 자세히 보심 안돼요. 이거 엄청 제 입맛이더라구요. 살짝 매운 맛이 있는데 시골 오일 파스타보다 안 매워요. 고기랑 먹는 리조또 또 먹고 싶네요...ㅎㅎ 제가 앉아있는 테이블이 넵킨 있는 곳... 바로 앞에 보이는 곳이 단체홀 같습니다. 낮이라 오픈을 하지 않았지만 궁금했습니다. 주문기다리가 심심해서 위를 보니 ㅎㅎ 아래서 찍은 사진입니다. 좀 이상하죠? 잘 보셔야 할 듯요 ㅎ 사생활 파스타&브런치 바로가기 브레이크 타임 확인하세요 앗! 중요한 걸 잊을 뻔했네요. 네이버 영수증 후기 쓰시면 샐러드 등심까스 안심까스 브라우니 택1해서 먹을 수 있어요. 저는 그냥 포장해서 집에서 편안히 커피랑 먹었네요 생각보다 브라우니 맛나고 큼직해요 ㅎㅎㅎㅎ 브라우니 사진을 못 찍었습니다. 가로 10cm 세로 5cm 정도니 큰거죠? ㅋ 담엔 피자 먹으러...
댓글 쓰기

Swiper-slider로 반응형 작업할 때 이미지 사이즈에 따라서 높이 지정하기

작성자:

 Swiper 슬라이더를 사용하면 웹페이지에 쉽게 슬라이드 기능을 삽입할 수 있습니다.

심지어는 반응 형 웹을 개발할 때도 옵션 만으로 쉽게 반응 형 기능을 구현할 수 있습니다.

autoHeight : true;

위와 같이 옵션을 주면 이미지의 넓이에 맞춰서 이미지의 높이가 자동 조절됩니다. 

하지만 이미지의 크기가 그리 크지 않을 때에는 화면을 줄임에 따라 이미지의 높이가 자동 

조절 되면서 이미지가 너무 작아져 버리는 문제가 생깁니다. 

그래서 이미지가 줄어들 때 이미지의 넓이에 맞춰서 높이를 강제 지정해 주어야 하는 것이

필요할 때도 생깁니다.   

<body>
    <section class="main swiper mySwiper">
      <div class="wrapper swiper-wrapper">
        <div class="slide swiper-slide">
          <img src="images/img01.jpg" alt="" class="image" />
        </div>
        <div class="slide swiper-slide">
          <img src="images/img02.jpg" alt="" class="image" />
        </div>
        <div class="slide swiper-slide">
          <img src="images/img03.jpg" alt="" class="image" />
        </div>
      </div>
      <div class="swiper-button-next nav-btn"></div>
      <div class="swiper-button-prev nav-btn"></div>
      <div class="swiper-pagination"></div>
    </section>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
		autoplay: {     //자동슬라이드 (false-비활성화)         
		    delay: 2500, // 시간 설정          
		   disableOnInteraction: false, // false-스와이프 후 자동 재생        
		},
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>

위의 코드는 Swiper 슬라이더에서 제공해 주는 기본 코드 중에 하나 입니다.

브라우저의 화면 크기에 따라 높이도 자동으로 조절되는 듯이 보이지만 마우스를 이용

해서 브라우저의 넓이를 서서히 줄이면 높이가 변하지 않고 그대로 유지 됩니다.

마우스를 이용해서 브라우저의 크기를 변경할 때는 아래와 CSS 코드를 만들어 주시면

됩니다.

  <style>
	@media screen and (max-width: 1024px) {
            .swiper{
		height: 650px !important;
            }
    }

	@media screen and (max-width: 768px) {
            .swiper{
		height: 450px !important;
            }
    }
  </style>

Swiper 슬라이더를 아래와 같이 CDN으로 사용하므로 ! important 선언을 해서 height 속성의 우선 순위를 높여 줍니다. 


    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

댓글

댓글 쓰기