과외 수업하면서, 선생님이 주신 양식 그대로 이력서 만들기 !
완전 똑같이 넓이, 높이, 폰트 사이즈까지 따라하며 맞추다보니 자동으로 css 적용하는 기술이 느는 것 같다.
특히, table 로 칸들의 넓이, 높이를 조절해야만 했는데 div 조절처럼 쉽게 되는 게 아니라(전체적으로 흔들려서)
어려웠지만, 가운데 td를 조절하면 위의 td까지 조절되는 것을 발견하여 그렇게 높이 조절을 했다.
아래는 css내용
<style>
.bigdiv{
border:3px solid black;
width:525px;
height:730px;
text-align:center;
margin:0 auto;
}
.middiv{
border:1px solid black;
width:auto;
height:640px;
margin:2px;
margin-top:5px;
}
table{
border-collapse:collapse;
border-spacing:0;
}
td{
border:1px solid black;
text-align:center;
font-size:13px;
border-spacing:0px;
}
#tr10 td{
height:22px;
}
#tr11 p{
color:black;
padding-bottom:30px;
font-size:12px;
}
#tr8 td{
height:10px;
}
#tr6 td{
height:10px;
font-size:10px;
}
#tr7 td{
height:10px;
}
</style>
이건 body내용
<body>
<div class="bigdiv">
<div class="middiv">
<table>
<tr id="tr1">
<td rowspan="3" style="width:90px; height:120px;">사 진</td>
<td colspan="4" style="width:435px; height:50px; font-size:18px;">이 력 서</td>
</tr>
<tr id="tr2">
<td rowspan="2" style="width:50px;" >성 명</td>
<td rowspan="2" style="width:150px; text-align:right;">인 </td>
<td colspan="2">생 년 월 일</td>
</tr>
<tr id="tr3">
<td colspan="2" style="height:35px;"> 년 월 일생 (만 세)</td>
</tr>
<tr id="tr4">
<td style="height:5px;">주 소</td>
<td colspan="4">주소 내용</td>
</tr>
<tr id="tr5">
<td style="height:5px;">전 화 번 호</td>
<td colspan="4">(휴대전화)</td>
</tr>
<tr id="tr6">
<td rowspan="3">가 족 관 계</td>
<td>관계</td>
<td>성명</td>
<td>연령</td>
<td>현재직업</td>
</tr>
<tr id="tr7">
<td></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr id="tr8">
<td ></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
<table>
<tr id="tr9">
<td colspan="3" style=" width:110px; height:10px;">년 월 일</td>
<td style="width:300px; height:25px;">학 력 및 경 력 사 항</td>
<td style="width:100px;">기관 및 장소</td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr10">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr11" >
<td colspan="6" style="height:20px; border:none;"><p style="border:none;">위의 기재한 내용은 사실과 다름이 없습니다.<br/>20 년 월 일 작성자 (인)</p></td>
</tr>
</table>
</div>
</div>
<HTML/CSS 만을 이용하여 양식 만들기 느낀점>
1. 처음 설정할 때 div 영역을 나누는 것이 중요하다.
2. 저런 양식은 table 로 만드는 게 아니라 div로 애초에 만드는 것이 편하다
3. class, id 활용 제법 잘하는 듯(뿌듯)
'☕ 따뜻한 개발 한 잔' 카테고리의 다른 글
| 기동대_ 프로젝트 제목 / 설명 / 와이어 프레임 (0) | 2022.10.31 |
|---|---|
| [overflow] 위메프 따라하기 중 카테고리를 펼치자 아래 영역이 내려가 버림 | 해결 방법 (0) | 2022.10.04 |
| [코딩연습] 나무위키 싸이트 따라하기 (0) | 2022.09.01 |
| [Spring] AOP Advice의 종류 (0) | 2022.08.07 |
| [Spring] AOP 방식이 뭐야? (0) | 2022.08.05 |
댓글