-
2020.10.13 #TILTIL(today I learned) 2020. 10. 13. 23:01
오늘은 학원에서 float을 사용해서 와이어프레임 구성하는 것을 연습했다. 2단 3단 블록쌓기도 배웠다. position으로 쓰면 간단하긴 하지만 float을 계속 사용했기 때문에 기초부터 다시 다지는 느낌이 들어서 좋았다.
오늘은 회사 연혁을 만들어보았다. 새롭게 활용한 것은 height: cals(100%- 10px);을 사용해서 길이 조절하는 것을 알았다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history</title>
<link rel="stylesheet" href="history.css">
</head>
<body>
<div class="history">
<div class="2019">
<h2>2019</h2>
<ol>
<li>품질경영시스템 국제표준 ISO 9001 인증 획득</li>
<li>연구노트 우수관리 기관 과기정통부 장관상 수상</li>
<li>차세대 위식도역류질환 치료제 임상 3상 완료</li>
<li>우수혁신형 제약기업 정부 포상</li>
<li>폐섬유증 신약 DWN12088 美 FDA 희귀의약품 지정</li>
<li>‘우루사 300mg’, 전세계 최초로 ‘위 절제 후 담석예방’에 대한 적응증 획득</li>
<li>자체개발 보툴리눔 톡신 ‘주보’(미국제품명) 미국 공식 발매</li>
<li>올메사르탄, 로수바스타틴, 암로디핀을 결합한 3제복합제 ‘올로맥스’ 발매</li>
<li>‘나보타’, 미국 3상 임상결과 SCI급 국제학술지 게재</li>
<li>폐섬유증 신약 DWN12088 범부처 정부지원과제 선정</li>
<li>자체개발 보툴리눔 톡신, 아시아 최초 FDA 허가 획득</li>
</ol>
</div>
<div class="2018">
<h2>2018</h2>
<ol>
<li>‘나보타’, 국내 보툴리눔 톡신 최초 눈가주름 적응증 획득</li>
<li>위식도역류질환 신약 DWP14012 범부처 정부지원과제 선정</li>
</ol>
</div>
<div class="2016">
<h2>2016</h2>
<ol>
<li>대웅제약 연구소 ‘대웅바이오센터’ 준공</li>
<li>항생제 '대웅메로페넴주' 美 FDA 승인 획득</li>
</ol>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.history{
margin: 100px 0 0 100px;
}
.history h2{
font-size: 32px;
color: 000;
line-height: 1;
position: relative;
}
.history h2:before{
content: "";
display: block;
width: 17px;
height: 17px;
background: #fff;
border-radius: 100%;
border: 5px solid #ff5a2b;
box-sizing: border-box;
position: absolute; left: -48px; top: 50%;
transform: translateY(-50%);
}
.history ol{
padding: 20px 0 74px;
}
.history ol li{
font-size: 17px;
color: #000;
line-height: 29px;
}
.history div{
padding: 0 0 0 48px;
position: relative;
}
.history div:before{
content: "";
display: block;
width: 2px;
height: 100%;
background: #ddd;
position: absolute; left: 8px; top: 0;
}
.history div:first-child:before{
height: calc(100%-9px);
top: 10px;
}
결과
'TIL(today I learned)' 카테고리의 다른 글
2020.10.15 #TIL (0) 2020.10.16 2020.10.14 #TIL (0) 2020.10.15 2020.10.12 #TIL (0) 2020.10.13 2020.10.07 #TIL (0) 2020.10.08 2020.10.06 #TIL (0) 2020.10.07