HTML DIV 태그 두개의 영역(그림, 글자, 광고 등) 그리기

이렇게 박스를 두개 나란히 놓으려면 어떤 테그를 써야할까 고민할때 찾아본 태그 스타일을 적용해서 만들어 봤습니다.

 

<div style="display: inline-block; border-right: 2px solid #000; border-top: 3px solid #000; padding-right: 20px;">
        <h2>NOW 이슈 검색어</h2>
        <p><% for(var i=0; i<10; i++){ %>
            <%=data[i].title%>%><br/>
        <%}%></p>
    </div>
    <div style="display: inline-block; border-left: 2px solid #000; border-top: 3px solid #000; padding-left: 20px;">
        <h2>HOT 인기 검색어</h2>    
        <p><% for(var i=10; i<20; i++){ %>
            <%=data[i].hot%><br/>
        <%}%></p>
    </div>

노드 express 서버에서 데이터를 가져오고 ejs 파일에 작성하여 출력했습니다.