1) <table> 태그 공부하기
2) <table> 태그를 이용해서 특정 날짜 배경색을 원하는 색으로 변경하기
3) 각각의 날짜에 마우스를 올리면 날짜가 커지도록 하기(30px)
4) 6월에 있는 공휴일 및 휴일은 날짜를 빨간색으로 변경
5) 6월 13일 클릭하면 자신이 원하는 페이지로 이동하도록 연결. 단, 클릭 시 새로운 창이 열리면서 링크가 열리도록 할 것
6) 13일 해당 날짜에는 마우스를 올려도 날짜가 커지지 않고 폰트가 두꺼워 지도록 변경
1. 구조
- calendar.html
- calendar.css
2. <head>
css 분리하여 연결
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="calendar.css">
<title>과제-달력</title>
</head>
3. <body> 구조
<body>
<div class="calendar-Container"> // 달력 전체 컨테이너
<div class="calendar-Img"> // 달력의 이미지 공간
</div>
<div class="calendar-Month"> // 달력의 달 글자 공간
</div>
<div class="calendar-Date"> // 달력의 날짜 글자 공간
<table>
<thead> // 달력의 머리인 요일을 넣기 위하여 thead설정 (중앙정렬, bold)
<tr class="date-style">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody> // 달력의 날짜들이 들어가는 표 공간
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="calendar-logo"> // 로고를 넣는 공간
</div>
</div>
</body>
4. 결과물
- HTMl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="calendar.css">
<title>과제-달력</title>
</head>
<body>
<div class="calendar-Container">
<div class="calendar-Img">
<img src="/산돌1.png" alt="6월 이미지">
</div>
<div class="calendar-Month">
<h1 id="month-text">6</h1>
<h3>June</h3>
</div>
<div class="calendar-Date">
<table>
<thead>
<tr class="date-style">
<th>월요일</th>
<th>화요일</th>
<th>수요일</th>
<th>목요일</th>
<th>금요일</th>
<th>토요일</th>
<th>일요일</th>
</tr>
</thead>
<tbody>
<tr>
<td class ="class-date">30</td>
<td>31</td>
<td class ="class-date">1
<span class="holiday">지방선거</span>
</td>
<td>2</td>
<td class ="class-date">3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class ="class-date">6
<span class="holiday">현충일</span>
</td>
<td>7</td>
<td class ="class-date">8</td>
<td>9</td>
<td class ="class-date">10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td id="class-start">13
<a href="https://search.naver.com">이동합니다!</a>
</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<div class="calendar-logo">
<img src="/코딩온.png" id="logo" alt="코딩온로고">
</div>
</div>
</body>
</html>- css
body{
margin: 0;
min-height: 100vh;
background-color: #eec0c6;
display: flex;
align-items: center;
justify-content: center;
}
.calendar-Container {
width: 500px;
height: 700px;
padding: 20px;
background-color: whitesmoke;
}
img {
width: 500px;
height: 300px;
}
.calendar-Month {
height: 60px;
text-align: center;
margin-top: 5px;
margin-bottom:10px;
}
h1 , h3 {
margin: 0;
}
.calendar-Date table {
width: 500px;
height: 300px;
table-layout: fixed;
border-collapse: collapse;
}
tbody{
border-style: solid;
border-color: #eec0c6 ;
vertical-align: top;
}
tbody td{
border-style: solid;
border-color: #eec0c6 ;
}
tbody td:nth-child(6), th:nth-child(6) {
color:rgb(32, 126, 234);
}
tbody td:nth-last-child(1), th:nth-last-child(1) {
color:rgb(255, 72, 0);
}
.class-date {
background-color: rgb(248, 248, 108);
}
.holiday {
font-size: 10px;
color: red;
}
a {
font-size: 10px;
text-decoration: none;
}
td:hover:not(#class-start) {
font-size: 30px;
}
#class-start:hover {
font-weight: bold;
}
.calendar-logo{
display: flex;
justify-content: center;
}
#logo{
width: 30px;
height: 30px;
margin-top: 5px;
border-radius: 50px;
}
5. 문제
- hover 시 선택자 우선 순의를 적용해도 동시에 실행됨.
td:hover:not(#class-start) {
font-size: 30px;
}
#class-start:hover {
font-weight: bold;
}- :not(#class-start) 을 사용해서 #class-start 만 적용되지 않도록 하였음.
✅ :not(selector) 선택자
1) 특정 요소/ 특정 선택자 를 제외한 모든 요소를 선택
p {
color: red;
}
:not(p) {
color: blue;
}
.btn-group button:not(:last-child) {
border-right : none; // 중복테두리 방지
}- 읽기 : P 요소의 글자색은 red 를 줄거고, p요소가 아닌 것은 글자색을 blue 를 줄거야.
2) 정의
- :not( ) 중첩 허용하지 않음. ( :not(:not(...)) 안됨. )
- :not( * ) 허용하지 않음. ( 요소 아닌 요소 선택은 안됨. )
- 명시도가 높아짐. ( #apple:not(#lemon)가 #apple 보다 명시도가 높음. )
- :not( .apple )이라면, apple이 아닌 모든 요소를 의미.
- hover 시 표 크기 변경 되는 문제.
.calendar-Date table {
width: 500px;
height: 300px;
table-layout: fixed;
border-collapse: collapse;
}- table-layout: fixed; 적용하였으나 hover 시 폰트 커지면서 칸도 넓어짐.
- 전체 큰 틀은 유지되지만 행/열 즉, 칸의 크기는 좍좍 늘어남.
✅ table-layout: fixed;
1) table-layout 속성값을 fixed로 설정 하면 셀 안의 데이터가 길어져서 지정한 너비 이상으로 셀을 밀어버리는 것을 막을 수 있다.
2) width를 설정해야한다. 내가 놓친 점이다.
table
{
table-layout:fixed;
}
td,th
{
width:20px;
word-wrap:break-word;
}
3) 사용
table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/- 공휴일 표시를 위해 각 td마다 class 혹은 id를 일일이 적용해야하나?
tbody td:nth-child(6), th:nth-child(6) {
color:rgb(32, 126, 234);
}
tbody td:nth-last-child(1), th:nth-last-child(1) {
color:rgb(255, 72, 0);
}- td:nth-child() , th:nth-child() 를 사용하여 td,th의 n번째 자식들에게 같은 효과를 적용.
- td:nth-last-child() , th:nth-last-child() 를 사용하여 td,th의 마지막 자식에게 효과 적용
🧩 참고 자료
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
:not() - CSS: Cascading Style Sheets | MDN
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
developer.mozilla.org
https://code-examples.net/ko/q/3fded6
html - 자동 - tr 크기 고정
많은 사람들이 여전히 레이아웃 컨트롤, 데이터 등에 테이블을 사용합니다.이 중 하나의 예가 인기있는 jqGrid입니다. 그러나 내가 할 수없는 몇 가지 마술 사건이 있습니다 (큰 소리로 울부 짖는
code-examples.net
table(테이블)에 table-layout 속성으로 너비 고정하기!!
table(테이블) 넓이 고정하기!! table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지합니다. 보통 셀안의 내용이 한글인 경우 공백이 중
jowook.tistory.com
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
table-layout - CSS: Cascading Style Sheets | MDN
The table-layout CSS property sets the algorithm used to lay out <table> cells, rows, and columns.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
CSS 선택자 - CSS: Cascading Style Sheets | MDN
CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.
developer.mozilla.org
https://parkgaebung.tistory.com/72
CSS 선택자 우선순위
선택자 우선순위 순위 선언방식 설명 예시 1 !important 우선순위 최상위 명령어. 속성값 바로 뒤에 넣는다. p { color: red !important; } 2 inline style html 문서에서 tag 내에 style을 정의한 것 3 id Select..
parkgaebung.tistory.com
'HTML, CSS' 카테고리의 다른 글
| [HTML, CSS] background 속성 (+ Flex-grow 추가예정) (0) | 2022.07.19 |
|---|---|
| [CSS] <table> 사용하지 않고 달력 만들기 / CSS text 속성 (0) | 2022.06.25 |
| [CSS] CSS선택자(셀렉터 조합) 사용하기 (0) | 2022.06.20 |
| [HTML] HTML 태그 사용하여 HTML문서 만들기 (0) | 2022.06.16 |
댓글