table
: 엑셀처럼 사용할 수 있음
<구성요소>
- thead - th로만 구성되어 있는 요소
- tbody - 내용
- ( tfoot - 잘 사용되지 않음 )
<구성요소-디테일>
- tr - td, th를 감쌈
- td - 기본 글씨
- th - 강조
< border-collapse >
: 여백 겹치기를 어떻게 할지 지정
기본값: separate; (여백 겹쳐지지 않음)
table {
border-collapse: collapse;
}-> table 요소 여백을 다 겹침
container
: 웹사이트에서 (여백을 제외한) 사용되는 부분
.con 이나 #con 입력하면 자동으로 div ~ 생성됨
::before, ::after
: 항목 이전, 이후에 넣을 요소
ul > li::after {
content: "님";
}-> li 모든 요소 뒤에 "님"이 붙음
- content를 꼭 써야함! 없더라도 ""; 포함시키기
- 다른 요소를 넣을 때에는 display를 지정해줘야 한다.
transition
: CSS에 애니메이션
div {
width: 10%;
height: 100px;
background-color: darkred;
transition: width 5s;
}-> width값이 hover width값으로 변하는 데 5초 걸림
hover에 넣으면 X (마우스를 뗐을 때 갑자기 변함)
div {
transition: width 2s 3s;
}-> 3초 딜레이 시간 지정
