coding tip - 1. about vertical-align

vertical-align: middle/baseline은 서체의 기본 위아래 여백에 의해 유동적일 수 있다. 
그러나,  vertical-align: top;은 변수가 좀 적다. 

영어의 베이스라인은 세로정렬이 어느정도 비슷하지만, 한글은 초-중-종성을 모두 갖고 있어 좀 더 유동적이다. 
그래서 되도록 상단을 기준으로 여백을 맞춰 주는 게 좋고, 오류를 최소화 해준다.

이렇게 vertical-align을 사용해서 세로간의 기준을 맞춰주고, 조금씩 서체의 여백에 의해 생기는 간격은 브라우저를 확인하면서 margin으로 정리한다. 

---

<div class="container">
        <span class='txt'>인라인 텍스트</span>
        <span class='badge'>여기는 새로운 badge입니다.</span>
    </div>

---

body{background: #eee;font-size: 3.0em;}
.container{background: #fff; color:#0ff;height:200px;}
.txt{
	background: #f90;
	/* height:150px;
	display:inline-block; */
	vertical-align:top;
}
.badge{
	color: #fff;
	background: #fad;
	font-size: 0.3em;
	vertical-align: bottom;
	padding: 0.2em;
	display: inline-block;
	border-radius: 20px;
}

---