<div>
  <ul class="list">
    <li>
      <a href="#">메뉴 버튼</a>
    </li>
    <li>
      <a href="#">카카오</a>
    </li>
    <li>
      <a href="#">네이버</a>
    </li>
  </ul>
</div> 
  <ul class="living-list">
    <li>
      <a href="#" class="image-link">
        <img src="https://via.placeholder.com/170x114">
      </a>
      <a href="#" class="info-link">
        <div class="living-info">
          <span>리빙</span>
          <h3>세 아이와 사는 집, 현무암 돌담을 두른 제주 전원주택</h3>
          <p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>
          <div class="date-wrap">
            <span class="source">집꾸미기 </span>
            <span class="date">2주일 전</span>
          </div>
        </div>
      </a>
    </li>
  </ul>
<div class="title-wrap">
    <h3>카카오페이 “초대형IB 도전”...카카오페이증권 ‘상장’ 예고</h3>
    <div class="btn-wrap">
      <div class="btn-left-wrap">
        <button type="button">좋아요</button>
        <button type="button">댓글</button>
      </div>
      <div class="btn-right-wrap">
        <button type="button">요약</button>
        <button type="button">크기</button>
        <button type="button">팩스</button>
        <button type="button">공유</button>
      </div>
    </div>
  </div>
/*menu-list*/
html,
body, h3, p {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    color: #000;
    text-decoration: none;
}
.list {
  margin : 0;
  padding: 0;
  list-style : none;
  overflow : hidden;
  background-color : gray; 
}
a {
  display : block;
  color : #000;
  text-decoration : none; 
  font-size : 20px;
  padding : 20px 20px 20px 20px;
}
.list>li {
  float : left;  
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000; 
  background : rgba(0,0,0,0.3);
}
.list>li:last-child {
  border-right: 1px solid #000;
}  
/* naver-living */
.living-list { 
    background-color: pink; 
    width : 1000px;
}
.image-link {
    margin-right: 21px;
}
.info-link {
    width: 512px;
}
.image-link,
.info-link  {
    display: inline-block;
    vertical-align: middle;
}
.living-info>h3 {
  white-space : nowrap;
}
.date-wrap {
  margin-top : 5px;
}
.living-info>span {
  font-size : 14px; 
}
.living-info>h3 {
  font-size : 18px;
}
.living-info>p {
  font-size : 15px;
}
.date,
.source {
  font-size : 13.5px;
  color : gray;
}
.source:after {
  content : "-";
}
/* naver-news */
.title-wrap {
    border-top: solid 2px #000;
    border-bottom: solid 1px #000;
    padding: 20px 20px 20px 15px;
}

.title-wrap h3 {
    margin-bottom: 20px;
}

.btn-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.