20250822 - 학습일지 - CSS

• opacity transition - copen 재확인요

div {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: width 3s, opacity 3s;
  opacity:0.22;
}

.class_div:hover {
  width: 100%;
  transition : width 100%;
  opacity:1;
}

<div class="class_div"></div>

• before after

<ul>
	<li>연예인</li>
	<li>연예인</li>
	<li>연예인</li>
	<li>연예인</li>
</ul>

ul > li {
	position: relative;
	margin: 20px;
	padding: 10px;
	background-color: pink;
	width: 100px;
}

ul > li::after {
	content: "";
	position: absolute;
	width: 0;
	height: 2px;
	background-color: black;
	bottom: 0;
	left: 0;
	transition: width .3s;
}

ul > li:hover::after {
	width: 100%;
}

• table css

.con {
  width: 1000px;
}
.con.table {
  width: 100%;
  border-collapse: collapse;
}
table th,
table td {
  border: 1px black solid;
  text-align: center;
  padding: 10px;
}
table tbody > tr:hover {
  background-color: blue;
}
table tbody > tr > td:hover {
  background-color: yellow;
}

<div class="con">
  <table border="1">
    <thead>
      <tr>
        <th>교시</th>
        <th>월</th>
        <th>화</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1교시</td>
        <td>수학</td>
        <td>영어</td>
      </tr>
    </tbody>
  </table>
</div>