[CSS] display:tabel 을 이용한 연혁표 만들기

<div id="history">
  <h2>2019</h2>
  <div class="list_right">
    <span></span>
    <div>
      <ul>
        <li>
          <dl>
            <dt>11.24</dt>
            <dd>on sunday 티스토리 블로그 개설</dd>
          </dl>
          <dl>
            <dt>11.24</dt>
            <dd>첫 포스팅 시작함</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>11.25</dt>
            <dd>on sunday 바람개비마을 포스팅</dd>
          </dl>
          <dl>
            <dt>11.26</dt>
            <dd>서촌 준수방키친 포스팅</dd>
          </dl>
        </li>
      </ul>
    </div>
  </div><!--list_right-->
  <h2>2019</h2>
  <div class="list_left">
    <div>
      <ul>
        <li>
          <dl>
            <dd>on sunday 티스토리 블로그 개설</dd>
            <dt>11.24</dt>
          </dl>
          <dl>
            <dd>첫 포스팅 시작함</dd>
            <dt>11.24</dt>
          </dl>
        </li>
        <li>
          <dl>
            <dd>on sunday 바람개비마을 포스팅</dd>
            <dt>11.25</dt>
          </dl>
          <dl>
            <dd>서촌 준수방키친 포스팅</dd>
            <dt>11.26</dt>
          </dl>
        </li>
      </ul>
    </div>
    <span></span>
  </div><!--list_right-->
</div><!--history-->

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,li {
  list-style: none;
}

a {
  text-decoration: none
}

#history {
  width: 1200px;
  margin: 0 auto;
}

#history h2 {
  text-align: center;
  font-size: 24px;
  color: #444;
  line-height: 1;
  margin-top: 30px;
}

.list_right {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.list_right span {
  display: table-cell;
  vertical-align: top;
}

.list_right div {
  position: relative;
  display: table-cell;
  vertical-align: top;
}

.list_right div:before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 100%;
  background: #dfdfdf;
}

.list_right div ul {
  margin-top: 20px;
}

.list_right div ul li {
  display: table;
  position: relative;
  width: 100%;
  padding-left: 20px;
}

.list_right div ul li+li {
  margin-top: 20px;
}

.list_right div ul li:before {
  content: "";
  position: absolute;
  left: -8px;
  top: 7px;
  width: 12px;
  height: 12px;
  border: 3px solid #0a4a9f;
  border-radius: 50%;
}

.list_right dl {
  text-align: left;
  display: table;
  width: 100%;
}

.list_right dl dt {
  width: 10%;
  display: table-cell;
  vertical-align: middle;
  font-size: 14px;
  color: #444;
  font-weight: bold;
  text-align: left;
}

.list_right dl dd {
  width: 90px;
  display: table-cell;
  vertical-align: middle;
  font-size: 13px;
  color: #444;
  text-align: left;
}


.list_left {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.list_left span {
  display: table-cell;
  vertical-align: top;
}

.list_left div {
  position: relative;
  display: table-cell;
  vertical-align: top;
}

.list_left div:before {
  content: "";
  position: absolute;
  right: -1px;
  width: 1px;
  height: 100%;
  background: #dfdfdf;
}

.list_left div ul {
  margin-top: 20px;
}

.list_left div ul li {
  display: table;
  position: relative;
  width: 100%;
  padding-left: 20px;
}

.list_left div ul li+li {
  margin-top: 20px;
}

.list_left div ul li:before {
  content: "";
  position: absolute;
  right: -10px;
  top: 7px;
  width: 12px;
  height: 12px;
  border: 3px solid #0a4a9f;
  border-radius: 50%;
}

.list_left dl {
  text-align: right;
  display: table;
  width: 100%;
  padding-right: 20px;
}

.list_left dl dt {
  width: 10%;
  display: table-cell;
  vertical-align: middle;
  font-size: 14px;
  color: #444;
  font-weight: bold;
  text-align: right;
}

.list_left dl dd {
  width: 90px;
  display: table-cell;
  vertical-align: middle;
  font-size: 13px;
  color: #444;
  text-align: right;
}

class가 list로 시작하는 div 요소에 display:table; 과 table-layout:fixed;를 이용해

table의 가로값을 고정시켜 width값이 더 커지지 않도록 합니다.

.list_right / .list_left 안에 있는 span(빈공간),div(연혁표 내용이 있는부분)요소는 display:table-cell;을 이용하여 정렬합니다. 그외에 선이나 원형은 before after 가상선택자로 만들어줍니다.