간단한 CSS로 구현하는 타임 라인

지금 만들고있는 사이트에서 경력을 타임 라인으로 표현하는 페이지가 있었기 때문에 코드를 소개. 코드 자체는 매우 단순하기 때문에 사용자에 따라 어떤 디자인의 사이트에 맞추는 것입니다. 문장하면 뒤죽박죽 경력 · 연혁을 깔끔하게 표시합시다!

샘플

Chrome, Firefox, Safari, IE9 · 10에서 동작 확인.

<ul class="timeline">

  <li>

    <p class="timeline-date">2017년3월</p>

    <div class="timeline-content">

      <h3>Web디자인 회사 설립</h3>

      <p>가나다라마바사아아차차카</p>

    </div>

  </li>

  <li>

    <p class="timeline-date">2011년4월</p>

    <div class="timeline-content">

      <h3>Web디자인 회사 설립</h3>

      <p>가나다라마바사아아차차카</p>

    </div>

  </li>

  <li>

    <p class="timeline-date">2012년7월</p>

    <div class="timeline-content">

      <h3>Web디자인 회사 설립</h3>

      <p>가나다라마바사아아차차카</p>

    </div>

  </li>

</ul>

.timeline {

  list-style: none;

}

.timeline > li {

  margin-bottom: 60px;

}

/* for Desktop */

@media ( min-width : 640px ){

  .timeline > li {

    overflow: hidden;

    margin: 0;

    position: relative;

  }

  .timeline-date {

    width: 110px;

    float: left;

    margin-top: 20px;

  }

  .timeline-content {

    width: 75%;

    float: left;

    border-left: 3px #e5e5d1 solid;

    padding-left: 30px;

  }

  .timeline-content:before {

    content: '';

    width: 12px;

    height: 12px;

    background: #6fc173;

    position: absolute;

    left: 106px;

    top: 24px;

    border-radius: 100%;

  }

}

모바일 퍼스트 그래서, 640px 미만의 폭 장치는 세월 · 제목 · 세부 문장을 순서대로 표시합니다.

HTML

timeline라는 클래스 붙은리스트의 li태그에 항목을 추가하는 것입니다.

<ul class="timeline">

  <li>

    <p class="timeline-date">2011년4월</p>

    <div class="timeline-content">

      <h3>웹퍼블리싱 </h3>

      <p>가나다라마바사</p>

    </div>

  </li>

</ul>

timeline-date은 세월 timeline-content안에 내용을 기록하게됩니다. 이 경우 h3에 제목을 달고 있지만 다른 제목 태그에서 제목 없이도 OK.

CSS

모바일

좁은 화면에서 타임 라인 바람에 표시하면 거북되어 버렸으므로, 항목마다 감각을 열어 나열.

.timeline {

  list-style: none;

}

.timeline > li {

  margin-bottom: 60px;

}

우선 이것뿐. 매우 단순하기 때문에 취향에 커스터마이즈 해주세요

데스크톱 용

@media ( min-width : 640px ) {

 

  /* 앞으로 여기에 데스크톱 용 CSS를 작성합니다 */

 

}

media-queries에서 640px 이상의 폭의 장치에 대한 설명을합니다. 수치는 조정 가능.

컨텐츠 부분

.timeline > li {

  overflow: hidden;

  margin: 0;

  position: relative;

}

.timeline-date {

  width: 110px;

  float: left;

  margin-top: 20px;

}

.timeline-content {

  width: 75%;

  float: left;

  border-left: 3px #e5e5d1 solid;

  padding-left: 30px;

}

앞의 @media〜안에 기술. .timeline-date그리고 .timeline-content이 float이지 일률적으로. .timeline > li모바일 용 계정에서 margin이 붙어 있기 때문에 여기에서 제로로 리셋합니다. 그리고 overflow: hidden;플로트를 재설정합니다. overflow: hidden; 를 붙이지 않으면, 이런 식으로 무너져 버립니다.

동그라미

.timeline-content:before {

  content: '\2022';

  font-size: 60px;

  position: absolute;

  left: 100px;

  color: #6fc173;

}

마지막으로 타임 라인에 표시하는 동그라미를 장식했다. \2022에서 동그라미가 표시됩니다. 원형 대신에 이미지 나 아이콘을 표시하여도 좋을 듯.

동그라미가 글꼴에 의존하는 환경에서는 어긋나에게 지적을 받았으므로 빈 컨텐츠에 쓰고 다시 보았습니다.

.timeline-content:before {

  content: '';

  width: 12px;

  height: 12px;

  background: #6fc173;

  position: absolute;

  left: 106px;

  top: 24px;

  border-radius: 100%;

}

완성!

<ul class="timeline">

  <li>

    <p class="timeline-date">2017년 3월</p>

    <div class="timeline-content">

      <h3>웹 퍼블리싱</h3>

      <p>가나다라마바사아</p>

    </div>

  </li>

  <li>

    <p class="timeline-date">2017년 4월</p>

    <div class="timeline-content">

      <h3>웹 디자인</h3>

      <p>가나다라마바사아자차카타</p>

    </div>

  </li>

  <li>

    <p class="timeline-date">2017년 5월</p>

    <div class="timeline-content">

      <h3>웹개발자</h3>

      <p>가나다라마바</p>

.timeline {

  list-style: none;

}

.timeline > li {

  margin-bottom: 60px;

}

/* for Desktop */

@media ( min-width : 640px ){

  .timeline > li {

    overflow: hidden;

    margin: 0;

    position: relative;

  }

  .timeline-date {

    width: 110px;

    float: left;

    margin-top: 20px;

  }

  .timeline-content {

    width: 75%;

    float: left;

    border-left: 3px #e5e5d1 solid;

    padding-left: 30px;

  }

  .timeline-content:before {

    content: '';

    width: 12px;

    height: 12px;

    background: #6fc173;

    position: absolute;

    left: 106px;

    top: 24px;

    border-radius: 100%;

  }

}