반응형
작심3일 공부를 끝내고 이제는 진짜 내 실력으로 만들기 위한 기록을 시작한다.
리베하얀님의 유튜브 영상을 보면서 만들었다.
https://www.youtube.com/watch?v=PafbbpRmKD8&list=PL_6yF2upGJYtE8CWiTRu7qvRSSzFy4Hzd
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;가 있는 요소를 기준으로 삼는다.
반응형
'IT > html, css' 카테고리의 다른 글
| 어도비 구독 취소 수수료 해결. 채팅상담없이 플랜 취소 수수료 없애는 제일 쉬운 방법 / 취소 환불 규정 (0) | 2022.11.11 |
|---|---|
| VScode에서 HTML 자동완성 키 / html 기본양식 템플릿 자동완성 (3) | 2022.03.24 |
| HTML5 블럭요소/인라인 요소 (0) | 2020.04.18 |