들어갈 이미지가 있다면 준비해주고, div를 만들어 img에 넣어준다.
아니 이미지가 왜 뜨냐. 저 공백 어떻게 할거야
왜냐하면 Image가 인라인요소이기 때문... 그노무 인라인요소/블럭요소!!
인라인 요소는 vertical-align(수직)이 baseline(기준선)에 위치한다. 그게 기본값임.
근데 Descender(디센더)영역도 고려하다보니 공백 생기는 것.
방법은 두가지 중에 하나로 하면 된다.
1. 문제가 인라인요소라는 점 -> 블럭요소로 바꿈 : img {vertical-align:bottom}
2. 문제가 기준선 이라는 점 -> 기준선을 디센더영역으로 함 : img{vertical-align:bottom}
짜잔 ~ 깔끔하게 붙었다.
그리고 나머지 날짜랑 메뉴들 수직정렬은 vertical-align에서 px로 조금씩 맞췄다.
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.m_box { width:1070px; background-color: #fff; border:1px solid #CECDCD; }
.m_box_header img {vertical-align: bottom;}
.m_date {color:#5C6BB2;margin-left:10px; font-size:1.3em; font-weight:bold;vertical-align: 13px;}
.m_food {margin-left:5px;font-size:1em;vertical-align: 15px;}
</style>
</head>
<body>
<div class="m_box">
<div class="m_box_header">
<a href=""><img src="img/m_title.png" alt=""></a>
<span class="m_date">02월 04일</span>
<span class="m_food">김치찌개 제육볶음 미역무침 검은콩밥 숙주나물 김치</span>
</div>
</div>
</body>
.
.
.
.
.
'Web Publishing' 카테고리의 다른 글
| 드롭쉐도우Drop Shadow CSS만들어주는 사이트. 퍼블리셔에게 조금이나마 도움이될까. Neumorphism 뉴모피즘 디자인 (0) | 2020.02.07 |
|---|
