본문 바로가기
IT/html, css

회사연혁 만들기_웹사이트 콘텐츠 따라만들기

by 공장장J 2020. 4. 14.
반응형


작심3일 공부를 끝내고 이제는 진짜 내 실력으로 만들기 위한 기록을 시작한다.
리베하얀님의 유튜브 영상을 보면서 만들었다.
https://www.youtube.com/watch?v=PafbbpRmKD8&list=PL_6yF2upGJYtE8CWiTRu7qvRSSzFy4Hzd


html 코드 입력을 마친 상태. CSS 초기화로 기본꾸미기 제거가 필요하다.
CSS 초기화를 마친 후 정말 아무 꾸밈이 들어있지 않은 모습이다.

box-sizing: border-box; 를 사용해 중복으로 커진 박스 사이즈를 줄여준다.

 

top: 50%; 와 transform: translateY (-50%);를 사용해 배치
transform: translateY (-50%)는 자기 자신 사이즈의 50%, 즉 자신의 크기의 절반만큼 y축 위로 이동한다.

완성

 

 

HTML 소스코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>회사연혁</title>
    <link rel="stylesheet" href="history.css">
  </head>
  <body>
    <div class="history">
      <div>
        <h2>2020</h2>
        <ol>
          <li>학교종이땡땡땡</li>
          <li>어서모이자</li>
          <li>선생님이 우리를</li>
          <li>기다리신다</li>
        </ol>
      </div>
      <div>
          <h2>2019</h2>
          <ol>
            <li>학교종이땡땡땡</li>
            <li>어서모이자</li>
            <li>선생님이 우리를</li>
            <li>기다리신다</li>
          </ol>
        </div>
        <div>
            <h2>2018</h2>
            <ol>
              <li>학교종이땡땡땡</li>
              <li>어서모이자</li>
              <li>선생님이 우리를</li>
              <li>기다리신다</li>
            </ol>
          </div>
    </div>      
  </body>
</html>

 

CSS 소스코드

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
body { padding: 100px;}

.history h2 { position: relative; font-size: 32px; color: #000; line-height: 1; }
.history h2::before { content: ""; position: absolute; left: -40px; top: 50%; width: 17px; height: 17px; border-radius: 100%; background: #fff; transform: translateY(-50%); border: 5px solid #ff5a2b;  box-sizing: border-box; }
.history div { position: relative; padding: 0 0 0 40px;}
.history div::before { content: ""; position: absolute; left: 8px; top: 0; height: 100%; border-left: 2px solid #ddd;}
.history div:first-child:before { top: 10px; height: clac(100%-10px);}
.history ol { padding: 20px 0 74px; }
.history li { font-size: 17px; color: #000; line-height: 30px;}


중요사항
* ::before  -> 가상요소선택자를 사용할 땐 대부분 속성 content=""; 를 함께 적어야한다. 빼먹을경우 아무것도 표현되지 않는다.
* line-height: 1; -> 텍스트의 줄간격 최소화
* ol -> ol은 순서가 있는 목록, ul은 순서가 없는 목록이다. ol과 ul은 li와 함께 사용한다.
* position: absolute;는 position: relative;가 있는 요소를 기준으로 삼는다.

반응형