안녕하세요!
전기차 충전소 관련한 정보 페이지 간단하게 만들어보기 본문
728x90
반응형
안녕하세요
이번에 전기차 충전소 프로젝트를 하며 간단히 정보를 전달 해 줄 페이지를 만들어보았습니다.
정보전달을 할때 중요한건 정적이지만 깔끔함을 줘야한다는 점인데요, 간단하게 만들 수 있으니 참고해서 만들어보시길 바라겠습니다!
각 이미지는 경로 설정하여 사용하시면 될 것 같습니다~
<body>
<div class="etitle">
<div>
<h2 class="h2title">전기차충전정보</h2>
</div>
<h4 class="h4title">충전속도에 따른 충전기 분류</h3>
<div class="fast-normal">
<div class="ulfchardiv">
<ul class="ulfchar">급속충전기</ul>
<li class="ulfcharli">완전방전상태에서 80%충전까지 30분이 소요됨</li>
<li class="ulfcharli">주로 고속도로 휴게소, 공공기관 등 외부장소에 설치됨</li>
<li class="ulfcharli">충전기는 고용량의 전력을 공급하여야 하므로 100kW급이 주로 설치됨</li>
<li class="ulfcharli">사용요금은 100km 당 2,700원 정도임</li>
</div>
<div class="ulnchardiv">
<ul class="ulnchar">완속충전기</ul>
<li class="ulfcharli">완전방전에서 완전충전까지 4~5시간이 소요됨</li>
<li class="ulfcharli">주로 주택이나 아파트에 설치됨</li>
<li class="ulfcharli">배터리 용량은 약 6~7kW 전력용량을 가진 충전기가 주로 설치됨</li>
<li class="ulfcharli">전기요금은 100km당, 1,100원 정도임</li>
</div>
</div>
<h3 class="capatitle">충전기 별 용량 및 시간 비교</h3>
<div class="chartab">
<table>
<tbody class="chartab-1">
<td>구분</td>
<td>초급속 충전기</td>
<td>급속 충전기</td>
<td>완속 충전기</td>
</tbody>
<tbody class="chartab2-2">
<td>공급용량</td>
<td>300kW,350kW</td>
<td>50kW,100kW,200kW</td>
<td>3~7kW</td>
</tbody>
<tbody class="chartab2-2">
<td>충전시간</td>
<td>약 20분</td>
<td>약 30-60분</td>
<td>4-5시간</td>
</tbody>
</table>
</div>
<h3 class="h3title">설치 유형에 따른 충전기 분류</h3>
<div class="chartab2">
<table>
<tbody class="chartab2-1">
<td>구분</td>
<td>벽부형 충전기</td>
<td>스탠드형 충전기</td>
<td>이동형 충전기</td>
</tbody>
<tbody class="chartab2-2">
<td>공급용량</td>
<td>3~7kW</td>
<td>3~7kW</td>
<td>3kW(MAX)</td>
</tbody>
<tbody class="chartab2-2">
<td>충전시간</td>
<td>4-6시간</td>
<td>4-6시간</td>
<td>6-9시간</td>
</tbody>
<tbody class="chartab2-2">
<td>사진</td>
<td>
<div class="tablepic"><img src="/images/install1.png" alt="벽부형 충전기">
</div>
</td>
<td>
<div class="tablepic"><img src="/images/install2.png" alt="스탠드형 충전기"></div>
</td>
<td>
<div class="tablepic"><img src="/images/portable1.png" alt="이동형 충전기1">
<img src="/images/portable2.png" alt="이동형 충전기2">
</div>
</td>
</tbody>
<tbody class="chartab2-2">
<td rowspan="3">특징</td>
<td colspan="2">
<li class="ulfcharli">분전함,기초패드 설치</li>
<li class="ulfcharli">U형볼라드, 차량스토퍼, 차선도색(설치 또는 미설치)</li>
<li class="ulfcharli">충전기 위치가 외부에 설치되어 눈, 비에 노출될 경우만 케노피 설치</li>
</td>
<td colspan="2">
<li class="ulfcharli">220V 콘센트에 간단한 식별장치(RFID태그) 부착하여 충전</li>
<li class="ulfcharli">태그가 부착된 다른 건물에서도 충전 가능
</td>
</tbody>
</table>
</div>
<h3 class="h3title">전기차 충전기 커넥터 및 차량측 소켓</h3>
<div class="chartab2">
<table>
<tbody class="chartab2-1">
<td>구분</td>
<td>AC단상 5핀(완속)</td>
<td>AC3상7핀(급속/완속)</td>
<td>DC차데모 10핀(급속)</td>
<td>DC콤보 7핀(급속)</td>
</tbody>
<tbody class="chartab2-2">
<td>충전커넥터</td>
<td>
<div class="tablepic"><img src="/images/connector1.png" alt="AC단상5핀커넥터"></div>
</td>
<td>
<div class="tablepic"><img src="/images/connector2.png" alt="AC3상7핀(급속/완속)"></div>
</td>
<td>
<div class="tablepic"><img src="/images/connector3.png" alt="DC차데모 10핀(급속)"></div>
</td>
<td>
<div class="tablepic"><img src="/images/connector4.png" alt="DC콤보 7핀(급속)"></div>
</td>
</tbody>
<tbody class="chartab2-2">
<td>차량측소켓</td>
<td>
<div class="tablepic"><img src="/images/connector1car.png" alt="AC단상5핀커넥터 차"></div>
</td>
<td>
<div class="tablepic"><img src="/images/connector2car.png" alt="AC3상7핀(급속/완속) 차"></div>
</td>
<td>
<div class="tablepic"><img src="/images/connector3car.png" alt="DC차데모 10핀(급속) 차"></div>
</td>
<td>
<div class="tablepic"><img src="/images/connector4car.png" alt="DC콤보 7핀(급속) 차"></div>
</td>
</tbody>
<tbody class="chartab2-2">
<td>사진</td>
<td>블루온,레이,쏘울,아이오닉,스파크,i3,Leaf,볼트,ZOE</td>
<td>SM3 Z.E.</td>
<td>블루온,레이,쏘울,아이오닉,Leaf</td>
<td>스파크,i3,볼트,아이오닉,i3,ZOE,코나,쏘울</td>
</tbody>
</table>
</div>
<h3 class="h3title">전기차 차종별 충전방식</h3>
<div class="chartab2">
<table>
<tbody class="chartab2-1">
<td>구분</td>
<td>차종</td>
<td>급속충전</td>
<td>완속충전</td>
</tbody>
<tbody class="chartab2-2">
<td rowspan="2">현대기아차</td>
<td rowspan="2">
<li>블루온,레이,쏘울,아이오닉</li>
<hr class="sephr">
<li>아이오닉,코나,니로,쏘울</li>
</td>
<td>
<li>DC차데모10핀</li>
<hr class="sephr">
<li>DC콤보7핀</li>
<td>AC단상5핀</td>
</tbody>
<tbody class="chartab2-2">
<td>르노삼성</td>
<td>
<li>ZOE</li>
<hr class="sephr">
<li>SM3 Z.E.</li>
</td>
<td>
<li>DC콤보7핀</li>
<hr class="sephr">
<li>AC3상7핀</li>
</td>
<td>
<li>AC단상5핀</li>
<hr class="sephr">
<li>AC단상7핀</li>
</td>
</tbody>
<tbody class="chartab2-2">
<td>한국GM</td>
<td>스파크,볼트</td>
<td>DC콤보7핀</td>
<td>AC단상5핀</td>
</tbody>
<tbody class="chartab2-2">
<td>BMW</td>
<td>i3</td>
<td>DC콤보7핀</td>
<td>AC단상5핀</td>
</tbody>
<tbody class="chartab2-2">
<td>닛산</td>
<td>Leaf</td>
<td>DC차데모10핀</td>
<td>AC단상5핀</td>
</tbody>
</table>
</div>
<div class="chartab3"></div>
</div>
</div>
</div>
</section>
</body>
<style>
.etitle {
display: flex;
border-radius: 20px;
padding: 10px;
margin: 0px 20px;
background-color: #ffffff;
top: 0px;
transition: 0.2s;
position: relative;
box-shadow: 4px 12px 30px 6px rgba(0, 0, 0, 0.09);
justify-content: center;
flex-direction: column;
font-family: 'TmoneyRoundWindregular';
}
.fast-normal {
display: flex;
justify-content: center;
flex-direction: row;
padding: 10px;
margin-left: -81px;
}
.h2title {
display: flex;
justify-content: center;
margin-bottom: 50px;
font-size: 50px;
margin-top: 40px;
font-family: 'TmoneyRoundWindExtraBold';
}
.h3title {
display: flex;
justify-content: center;
margin-top: 60px;
margin-bottom: 40px;
font-size: 30px;
font-family: 'TmoneyRoundWindExtraBold';
}
.h4title {
margin-bottom: 50px;
display: flex;
justify-content: center;
font-size: 30px;
font-family: 'TmoneyRoundWindExtraBold';
}
.capatitle {
display: flex;
justify-content: center;
margin-top: 40px;
margin-bottom: 40px;
font-size: 30px;
font-family: 'TmoneyRoundWindExtraBold';
}
.ulfchar {
font-size: 25px;
margin-bottom: 30px;
font-family: 'TmoneyRoundWindExtraBold';
}
.ulnchar {
font-size: 25px;
margin-bottom: 30px;
font-family: 'TmoneyRoundWindExtraBold';
}
.ulfchardiv {
margin-bottom: 30px;
padding-right: 30px;
}
.ulnchardiv {
margin-bottom: 30px;
padding-left: 30px;
}
table {
width: 95%;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 10px;
}
.ulfcharli {
list-style-type: disc;
text-align: left;
}
.chartab {
display: flex;
justify-content: center;
}
.chartab-1 {
margin-bottom: 0;
background-color: #43a6ff;
z-index: 1;
color: white;
text-align: center;
margin: 40px 0px;
}
.chartab2 {
display: flex;
justify-content: center;
}
.chartab2 * {
text-align: center;
}
.chartab2-1 {
width: 20%;
margin-bottom: 0;
background-color: #43a6ff;
color: white;
z-index: 1;
}
.chartab2-2 {
width: 26.6%;
text-align: center;
margin: 40px 0px;
}
.chartab3 {
margin-bottom: 30px;
}
.tablepic {
padding: 0px 5px;
}
.sephr {
margin: 7px;
padding: 0px;
}
</style>
해당 내용에 필요하신부분만 바꿔서 사용하시면 될 것 같습니다! 감사합니다!
728x90
반응형
'개발일지2' 카테고리의 다른 글
| 데이터분석 ML/DL 프로젝트(2) (0) | 2024.01.19 |
|---|---|
| 데이터 분석 및 ML/DL 프로젝트 (0) | 2024.01.17 |
| 카카오 지도 API로 자기 위치에서 마커 위치까지 길찾기 기능 만들기 어렵지 않아요!(스프링부트 thymeleaf) (2) | 2023.11.05 |
| 개발일지2 (인스타 클론 코딩 )(16h mini project) (0) | 2023.10.31 |
| 개발일지2 첫번째글. (인스타 클론 코딩) (0) | 2023.09.15 |
'개발일지2' Related Articles
more
