table은 기본적으로 줄(row)와 행(colum)으로 구성되어 있음 테이블 요소 태그 - tr th td 셀병합 1. 가로칸을 합칠 때는 합쳐지는 칸을 삭제 후 시작칸에 colspan="합쳐지는 칸수" 2. 세로칸을 합칠 때는 합쳐지는 칸을 삭제 후 시작칸에 rowspan="합쳐지는 칸수" 3. 가로, 세로칸 모두 합칠 때는 합쳐지는 가로, 세로 칸 모두 삭제 후 시작칸에 rowspan, colspan을 모두 적용 thead - 테이블의 행 그룹 중 제목 셀그룹 테이블 내에 한 번 사용 tbody - 테이블의 본문 행 tfoot - 레코드 내용의 소계, 합계 등 정보에 해당하는 푸터 행 테이블 내에 한 번 사용 thead를 이용하면 테이블의 본문이 긴 상태에서 출력할 때 제목 셀그룹을 반복적으로 출력..

요소, 객체를 변환하는 속성 요소에 회전, 크기조절, 기울이기, 이동효과를 부여함 transform으로 아무리 모양을 변형해도 자신의 고유축은 변경불가 회전 rotateX() - X축을 기준으로 회전 rotateX() - Y축을 기준으로 회전 rotate() 크기 scaleX() scaleY() scale() 기울이기 skewX() skewY() skew() 이동 translateX() translateY() translate() transform: translateX(10px) rotate(10deg) translateY(10px); !작성한 순서대로 효과가 적용됨

https://codepen.io/suyeon-hong-the-vuer/pen/JjNvGev Hover Effect02 ... codepen.io

https://codepen.io/suyeon-hong-the-vuer/pen/MWmVPdZ Hover Effect03 ... codepen.io

정해진 시간동안 요소에 속성값을 부드럽게 부드럽게 변화시키는 속성 transition 적용할 수 있는 속성 위치 - top, left, right, bottom 크기 - widht, height 박스속성 - margin, padding 테두리 속성 - border-width, border-radius, border-color 색상 - color, background-color 투명도 - opacity 변환속성 - transform transition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정 trainsition-duration : 이벤트를 몇 초동안 진행할지 지정 transition-property : 어떤 속성을 변형할지 지정 transition-timing-function : 수치 변..

absolute 적용시 부모태그가 자식의 높이값을 인식하지 못하기 때문에 레이아웃이 깨지는 현상이 있음 부모태그에 height값을 지정해줘야 원하는 레이아웃 모양을 잡을 수 있다