머털&보약의 기록

목차 css 속성 표기법 padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px; ==> padding: 0px(위); 20px(오른쪽); 30px(아래); 10px(왼쪽); padding과 margin 둘다 같은 속기법 사용 가능 만일 padding이나 margin이 모든 방향에서 같은 값을 가지면 padding: 20px(위, 오른쪽, 아래, 왼쪽 모두 같은 값) 이런식으로 작성할 수 있음 padding이나 margin을 단축하는 또 다른 방법: 위아래가 동일하고 우측과 좌측이 동일한 경우 ==> padding: 0px(위, 아래) 20px(우,좌); 속기법 암기를 위해서는 속기법 순서가 시계방향으로 된다고 생각...

목차 css 레이아웃 떠 있는 레이아웃: float 사용, 단점은 div전체를 옮겨야 한다는 점과 두개의 컬럼을 만들수 없다는 점 젤로 레이아웃: 페이지에 있는 모든 콘텐츠 주위를 고정된 크기의 div로 감싸고 고정된 레이아웃을 만든 후, margin을 auto로 설정해서 좌우에 동일한 너비의 margin이 있고 가운데 content영역이 있다는 점(많은 블로그가 이런 형태), 단점은 콘텐츠가 브라우저창 전체를 채우려고 확장되지 않는 다는 점이지만 이를 단점이라고 생각하지 않는 사람도 많다고 함 출처 : Head First HTML and CSS(개정판)

목차 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