머털&보약의 기록

목차 CSS table display display 속성값으로 table, table-row, table-cell등을 사용해서 요소를 표(table)처럼 표현하는 방법 참조 url: https://www.codingfactory.net/10776 ① 테이블 전체를 나타내는 div를 생성 후 이 div내에 행과 컬럼을 중첩시킴 ② 테이블의 행별로 행 콘텐츠를 포함할 div를 생성 ③ 컬럼처럼 동작할 블록요소(div)를 위의 div안에 넣음 ④ CSS에서 전체 테이블에 해당하는 div의 display를 table로 설정, 테이블의 행에 해당하는 div의 display를 display-row로 설정, 행의 컬럼에 해당하는 div의 display를 display-cell로 설정 아래는 간단한 예시 마크업 아래는..

목차 css 선택자 결합 & 복잡한 선택자 사용법 선택자 결합 & 복잡한 선택자 사용법 ① 아래와 같이 선택하고자 하는 요소에 대한 구문을 먼저 정의함 div#greentea > blockquote: 아이디가 greentea인 div의 자손선택자 중 blockquote를 선택 ② 그리고 선택하려는 요소를 놓음 div#greentea > blockquote p(요소): blockquote의 구문에 선택하려는 요소인 p요소를 추가(이 p요소는 blockquote의 자손이어야 하며, greentea란 id를 가진 div의 자식이어야 함) ③ 그리고 의사클래스나 의사요소를 명시함 div#greentea > blockquote p:first-line {font-style: italic;} ==> id가 green..

목차 변형(transform) & 트랜지션(transition) ex) 마우스를 요소 위로 가져갈 경우 회전하게 하는 등의 효과 이 경우 요소위로 마우스를 가져갈 경우 바로 회전하기 때문에 투박스러움 위의 이미지를 좀 더 부드러운 에니메이션 효과를 주기위해서 아래와 같이 트랜지션 적용 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#%ED%9A%8C%EC%A0%84