증산동에 이런 카페가? 디저트 카페 펀스터

작성자:
 벚꽃이 피던 금요일 오전 친구들과 증산동 빵 맛집으로 브런치하러~~ ===== 오시는 길 ===== 버스 ---> 증산 초등학교 하차 후 뒷골목 지하철로 오시는 길 ---> 1. 증산역 3번 출구300m 직진 후 증산도서관 등지고 수색방향으로 200m 오른쪽에 빨간색 건물입니다. 2. 디지털 미디어 시티역 5번 출구로 나오셔서 자이아파트 쪽으로 300m 가량 직진 증산골프장 옆 빨간색 건물입니다. 들어오기 전에 외부 테이블도 있답니다. 안으로 들어오는 햇살이 너무 눈부셔 사진이 뿌옇게 나오네요 ㅎㅎ 크로와상에 앙버터를 ㅎㅎ 맛있어 보여 사진만 찍음 소시지 페스츄리~~ 우리 아들 좋아하는건데.. 그 옆에는 남편이 좋아하는 애플파이 요 파이도 맛있다고 하네 집에 와 생각해보니 엄청 컷던 걸로 기억 담엔 사와야지 ㅋ 매콤한 명란 바게트에 감태를 올려 너무 파릇하죠? 매콤한 맛을 감태가 잘~~ 감아줄 듯 하네요. 깜빠뉴가 좀 작긴 한데 실해 보임 많이들 사가는 걸 보고 먹어볼 껄 후회 막심. 토마토 치아버터 vs 크리스피 치아버터 뭐가 맛있을까요?  글쎄요.. 둘 다 맛있겠죠. 2층올 올라가는 계단 옆이 화장실입니다. 근데 화장실 옆에서 빵이 나와요 ㅎㅎ 화장실 끼고 계단으로 올라가면 2층올 올라가면 로스팅 룸이 보이네요 커피가 맛난 이유가 여기 있었군요. 2층이 꽤 넓고 밝습니다. 햇살이 눈부시게 들어와서 창을 등지고  큰 원형 테이블에 자리 잡았습니다 벌집라떼 & 펀스터크림 & 아메리카노 단호박 깜빠뉴 & 잠봉 뵈르 & 쪽파크림치즈 베이첼(베이글+프레첼) 부드러운 크림과 찐한 커피가 잘 어울리는 펀스터 크림, 풍미가 좋아요 잠봉뵈르 바게크가 좀 딱딱하니 힘 주고 깨물어 주세요! 잠봉 듬뿍, 버터는 고소하니 담백함에 홀딱 캬~ 쪽파가 쫑쫑쫑, 크림치즈도 듬뿍이네요 베이글모양의 프레첼입니다. 크림치즈의 느끼할 수 도 있는 맛을 쪽파가 향긋하게 잡아줘요 주차는 카페앞 3대까지 가능하다고 하니 참고하세요....
댓글 쓰기

css 이미지 뒤에 공백 제거하기

작성자:

아래 html 소스는 공간 분할 태그인 <div>에 이미지 태그<img>를 담고 있는  일반적인 소스입니다. 

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="utf-8">
  <title>이미지 공백예제</title>
  <style>
    * { margin:0; auto; }
    #container { position:relative; width:100%; }
	#main_img { width:100%; height:auto; text-align:center;}
	#content { width:1200px; height:100px; margin:0 auto; background-color:#ff0000; }
	#notice { width:1200px; height:100px; margin:0 auto; background-color:#00ff00; }
  </style>
 </head>
 <body>
   <!--- container start ---->
   <div id="container">
     <!--- main image start ---->
     <div id="main_img">
	   <img src="https://www.allnek.com/all/common_img/fish02.jpg" alt="이미지설명">
	 </div>
	 <!--- main image end ---->
	 <div id="content">
	 </div>
	 <div id="notice">
	 </div>
  </div>
  <!--- container end ---->
 </body>
</html>

그런데 실행을 해보면 이미지 하단에 얇은 공백이 생기게 됩니다. 이유는 <img>태그는 inline level 요소이기 때둔에 텍스트처럼 수직정렬 기본 값이 baseline 이라는 것입니다.  

baseline 기준으로 정렬된 inline level 요소는 알파벳의 g, y, p, g, q 등과 같은 하강 문자(descender)를 위해 아래쪽에 공간을 필요로 하게 되고 <img>태그도 inline level 요소이기 때문에 아래쪽에 공백이 생기게 되는 것입니다.

해결법

아래 소스 같이 부모 태그에 display:flex와 flex-direction:column 설정해 주면 해결 됩니다

<style>
    * { margin:0; auto; }
    #container { position:relative; width:100%; display:flex; flex-direction:column; }
    #main_img { width:100%; height:auto; text-align:center;}
    #content { width:1200px; height:100px; margin:0 auto; background-color:#ff0000; }
    #notice { width:1200px; height:100px; margin:0 auto; background-color:#00ff00; }
  </style>

댓글

댓글 쓰기