2007년 12월 14일
CSS, 메모
margin
body { margin: 8px; } /* [상,하,좌,우] 모든 8px */
body { margin: 8px 7px; } /* [상,하]=8px [좌,우]=7px */
body { margin: 8px 7px 6px; } /* [상]=8px, [우]=7px, [하]=6px, [좌]=[우] */
body { margin: 8px 7px 6px 5px; } /* [상]=8px, [우]=7px, [하]=6px, [좌]=5px */
값이 1개 이면, [상,하,좌,우]
값이 2개 이면, [상,하][좌,우]
값이 3개 이면, [상][우][하] 좌는 우의 값을 사용
값이 4개 이면, [상][우][하][좌] [상]에서 시작하여 시계방향
위의 순서는 padding, border에 대해서도 동일하다.
border
div { border: solid 1px #7c7; }
cursor
다음과 같은 형태로 사용한 소스를 본적이 있는데, 이 코드는 IE에서는 손모양으로 보이지만 FF에서는 캐럿으로 보인다.
<a class="a_exp" onclick="view(24)" onmouseover="this.style.cursor='hand'"> ...more</a>
다음과 같이 CSS 스타일을 지정하면 마우스 오버시 IE와 FF에서 둘 다 손모양으로 제대로 보인다.
a { cursor: pointer; }
다음 내용도 확인
onmouseover="this.style.cursor='pointer'"
body { margin: 8px; } /* [상,하,좌,우] 모든 8px */
body { margin: 8px 7px; } /* [상,하]=8px [좌,우]=7px */
body { margin: 8px 7px 6px; } /* [상]=8px, [우]=7px, [하]=6px, [좌]=[우] */
body { margin: 8px 7px 6px 5px; } /* [상]=8px, [우]=7px, [하]=6px, [좌]=5px */
값이 1개 이면, [상,하,좌,우]
값이 2개 이면, [상,하][좌,우]
값이 3개 이면, [상][우][하] 좌는 우의 값을 사용
값이 4개 이면, [상][우][하][좌] [상]에서 시작하여 시계방향
위의 순서는 padding, border에 대해서도 동일하다.
border
div { border: solid 1px #7c7; }
cursor
다음과 같은 형태로 사용한 소스를 본적이 있는데, 이 코드는 IE에서는 손모양으로 보이지만 FF에서는 캐럿으로 보인다.
<a class="a_exp" onclick="view(24)" onmouseover="this.style.cursor='hand'"> ...more</a>
다음과 같이 CSS 스타일을 지정하면 마우스 오버시 IE와 FF에서 둘 다 손모양으로 제대로 보인다.
a { cursor: pointer; }
다음 내용도 확인
onmouseover="this.style.cursor='pointer'"
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]