사실 이 달력이 나의 완성본이다
📆달력 이거 어떻게 만드는거냐..
라며 난감하지는 않았다. 현재 수강중인 국비 학원에서 할줄 모르는걸 연습하라고 내줄리 없었으니.
다만 2022 9 September을 <table>의 <caption>을 이용하는 것은 알겠는데
어떻게 9만 다른 크기로 파랗게 할 것인가.. 그것이 고민이였다.한창 배우던 내용이였기에 수월하게 시작했다.
일단 요일을 thead > tr > th로 따로 기입하고 일자를 다 tbody > tr > td에 집어넣는 것
예상처럼 내가 따로 크기를 주지 않아도 요일과 일자의 크기가 어느정도 편하게 분리 되었다.
다음은 빨간 날과 파란 날 그리고 달력에서 회색 처리된 전,후달의 분리
이것은 class와 id의 사용이 가능했는데 사실 이 시점에서는 그 둘의 차이를 알 수 없었다.
❔그럼 class랑 id의 차이는 뭐야
일단은 우선 순위!
- 우선 순위 : id > class > 태그 순
내가 CSS style을 적용하고자 할 때 id에 입력시킨 것이 가장 우선적으로 입력이 된다.- 호출 방법
(1) id는 #id_name 으로 불러오고
(2) class는 .class_name으로 불러온다- 재사용 혹은 재정의 가능?
(1) id는 고유 영역 식별자이기에 한 페이지에서 하나의 요소에 하나의 이름만 지정이 가능하다.
(2) class는 여러 요소에 같은 이름이 지정 가능하며 보통 여러 곳에 동일한 효과를 주고싶을 때 사용한다.
아직 배우지 않은 자바 스크립트 관련해서도 차이점이 있었지만 아직 JS를 배우지 않아서 따로 기입하지는 않았다.
위에 내용을 새로이 머릿속에 넣었으니 잘 이용해서 class로 식별자를 주기로 했다!
<table>
<caption>2022 9 September</caption>
<thead>
<tr>
<th class="sun">SUN</th>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th class="sat">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td class="otherMonth">28</td>
<td class="otherMonth">29</td>
<td class="otherMonth">30</td>
<td class="otherMonth">31</td>
<td>1</td>
<td>2</td>
<td class="sat">3</td>
</tr>
<tr>
<td class="sun">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td class="sun">9</td>
<td class="sun">10</td>
</tr>
<tr>
<td class="sun">11</td>
<td class="sun">12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td class="sat">17</td>
</tr>
<tr>
<td class="sun">18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td class="sat">24</td>
</tr>
<tr>
<td class="sun">25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td class="otherMonth">1</td>
</tr>
</tbody>
</table>
이렇게하면 아직 감이 잡히지 않는 2022 9 September를 제외하고 CSS로 넘어갈 준비가 되었다. 미술 과목이 항상 6등급이였던 내게 미적 감각은 없지만 강사님이 띄워놓은 달력을 보며 class로 구분했던 글자에 색을 입히고 padding으로 글자를 정렬하여 순조롭게 달력을 완성하던 중 table의 크기를 키우고 보니 칸 마다 크기가 서로 달라지는 것을 발견하였다. tr 태그를 이용하여 크기를 지정할 수 있었으나 꽤 노가다라 생각이 들고 달력은 같은 크기의 칸을 만든다는 목적이 있기 때문에 구글링을 통해 간단한 방법이 있는지 찾아보았다.
table-layout: fixed;
table-layout은 간단하게 말하면 '콘텐츠 내용에 따른 셀 너비 지정여부'이다. 즉, 표 내용에 따라 너비 변화를 줄 것인가인데 fixed를 사용하면 어떤 상황에서도 고정된 너비를 사용할 수 있게 된다. 그 외 auto, initial, inherit이 있는데 상세 내용은 아래에 기술하겠다.
auto : 자동 레이아웃 (기본값). 콘텐츠 내용에따라 너비가 변화한다. 최종 레이아웃이 결정되기 전까지 테이블의 모든 내용을 읽어들인 다음 정해지므로 다소 렌더링이 늦어질 수 있다.
fixed : 셀 내용에 따라 너비 달라지지 않으며 테이블의 너비와 컬럼의 너비에 의해 결정된다. 테이블의 너비가 셀안의 내용에 비해서 좁더라도 자연스럽게 줄바꿈이 일어난다. auto layout 보다 렌더링 속도가 빠르다.
initial : 이 속성의 기본값으로 설정된다.
ingerit : 부모 요소의 속성값 상속한다.
table{
margin: 60px auto;
border: 1px solid black;
border-collapse: collapse;
width: 1060px;
height: 800px;
table-layout: fixed;
}
table td, th {
border: 1px solid black;
font-size: 20px;
font-weight: 510;
}
table th {
height: 40px;
}
table td {
vertical-align: top;
padding-left: 10px;
padding-top: 10px;
}
.otherMonth {
color: darkgrey;
}
.sat {
color:royalblue;
}
.sun {
color:red;
}
table td:hover {
background-color: papayawhip;
}
table > caption {
font-size: 30px;
font-weight: 620;
}table-layout: fixed;를 입력해 칸을 맞추고 나머지를 기입해 달력의 몸을 완성하였다. 이제 2022 9 September의 처리만 남았는데 처음에는 caption을 세 개로 만들어 써보았다. 그러자 가운데정렬로 세 줄로 나누어졌다.. background-color로 확인해 보니 caption 태그 하나 당 table의 width 길이만큼 column을 가지고 있었다. 분명 배우지 않은 내용을 내줄리 없다고 생각한 나는 span태그를 사용하기로 했다. div와 같은 용도지만 block이 아닌 inline의 영역을 가진 span이 딱 9에만 내가 원하는 스타일을 지정할 수 있을 것 같아서였다. 결론적으로 맞는 생각이였다. caption 태그 안에 span 태그를 넣고 style을 지정하니 원하는대로 모양이 만들어졌다!
<caption>2022 <span>9</span> September</caption> table > caption > span {
font-size: 70px;
color: darkblue;
}후기🏳
솔직하게 말하면 달력 만드는 것 보다 벨로그 쓰는게 더 힘들었다. 아침부터 첫 내용은 어떤 걸로 쓸까..하며 남들이 올린 포스팅들 보고 어떻게 썼나보고 사실 어떠한 흐름으로 글을 써야지 하는건 진짜 틀 아닌 틀만 잡아둔 상태로 썼다. 이걸 오늘부터 매일매일 써야 100일이라니 솔직히 가능할지 어떨지 모르겠지만 시간이 없다면 다른 사람에게 정보를 주는 어차피 이제 시작 하는 사람들도 다 아는거겠지만 포스팅이라도 해야겠다. 아 달력에 대한 후기를 써야하는데.. 솔직히 아직 쉬운 내용일거라 딱히 큰 감상이 없다. 그냥 어떻게 응용 할 수 있겠다. 이거 공공페이지 어디에서 봤어! 같은 내용 ㅎㅎ 일단 시작이 반이니 벌써 벨로그 절반은 했다. 더 잘해보자고오
