<div class="center"></div>
.center {
background-color: tomato;
width: 300px;
height: 300px;
margin: 0 auto;
/*
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
*/
}
→ class가 center인 div는 300px의 너비를 가지며, 좌우 나머지 공간은 같은 비율로 나눠진다.
selector:first-child {
/*첫번째 요소에 적용되는 스타일*/
}
selector:last-child {
/*마지막 요소에 적용되는 스타일*/
}
selector:nth-child(odd) {
/*홀수번째 요소에 적용되는 스타일*/
}
selector:nth-child(even) {
/*짝수번째 요소에 적용되는 스타일*/
}
<li>
<li>apple</li>
<li>banana</li>
<li>orange</li>
<li>lemon</li>
<li>mango</li>
<li>grape</li>
<ol>
<li>
태그들을 감싼다.<ol>
<li>apple</li>
<li>banana</li>
<li>orange</li>
<li>lemon</li>
<li>mango</li>
<li>grape</li>
</ol>
<ul>
<li>
태그들을 감싼다.<ul>
<li>apple</li>
<li>banana</li>
<li>orange</li>
<li>lemon</li>
<li>mango</li>
<li>grape</li>
</ul>
ul {
list-style: none;
/*원 모양 없어짐*/
}
list-style - CSS: Cascading Style Sheets | MDN
목록은 항상
<ul>
이나<ol>
로 감싸야 한다!
참고) 요소들에는 브라우저에서 지정한 margin, padding등이 있다.
ul은 margin과 padding이 지정되어있다. 직접 margin과 padding을 지정하면 브라우저가 설정한 여백은 사라진다.
padding-inline-start - CSS: Cascading Style Sheets | MDN
<table>
,<tr>
,<td>
,<th>
<table>
태그로 감싸져있어야 한다.<tr>
: table-row, 열<td>
: table-data, 셀<th>
: table-heading, 제목<table>
<tr>
<th></th>
<th>1열</th>
<th>2열</th>
</tr>
<tr>
<th>1행</th>
<td>1, 1</td>
<td>1, 2</td>
</tr>
<tr>
<th>2행</th>
<td>2, 1</td>
<td>2, 2</td>
</tr>
</table>
<table>
에 적용한다.table {
border-collapse: collapse;
}
table tr,td, th {
border: 1px solid black;
}
<td>
나 <th>
에 아래 속성들을 추가한다.<table>
<tr>
<th></th>
<th>1열</th>
<th>2열</th>
<th>3열</th>
<th>4열</th>
</tr>
<tr>
<th>1행</th>
<td>1, 1</td>
<td rowspan="2">1, 2에 rowspan2추가</td>
<td>1, 3</td>
<td>1, 4</td>
</tr>
<tr>
<th>2행</th>
<td>2, 1</td>
<td>2, 2</td>
<td>2, 3</td>
</tr>
<tr>
<th>3행</th>
<td>3, 1</td>
<td>3, 2</td>
<td>3, 3</td>
<td rowspan="2">3, 4에 rowspan2추가</td>
</tr>
<tr>
<th>4행</th>
<td>4, 1</td>
<td colspan="2">4, 2에 colspan2 추가</td>
</tr>
</table>
button:hover {
cursor: pointer;
/*마우스 커서 모양을 포인터로 바꾼다.*/
}
button:hover {
opacity: 0.8;
/*버튼에 커서를 올리면 살짝 투명해지게 했다.*/
}
조금만 더 힘내자!