공부하고 또 공부하는

[개요] relative 인 컨테이너 내부에 absolute 인 객체가 있으면 절대 좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 됩니다.(없다면 전체 문서가 기준) [예시] [결과]

[개요] cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다. auto : 자동 dafault : 기본값(화살표) pointer : 손가락모양(클릭 가능한 버튼) wait : 로딩 등 다양한 종류의 값이 있습니다. [사용법] .btn-wait { cursor: wait } [예시] [결과]

[개요] display 속성은 요소를 어떻게 보여줄지를 결정합니다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다. none : 보이지 않음 block : 블록 박스 Inline : 인라인 박스 Inline-block : block과 Inline의 중간 형태 none 요소를 렌더링하지 않도록 설정합니다.. visibility 속성을 hidden 으로 설정한 것과 달리, 영역도 차지하지 않습니다. [예시] [결과] block div태그, p태그, h태그, li태그 등이 이에 해당됩니다. 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 ..

[개요] border 속성은 태그의 테두리를 설정하는 속성으로, background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다. width-style-color 의 순서로 사용합니다. border-width 테두리의 두꼐로, 주로 px단위를 사용합니다. border-style 테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재합니다. border-color 테두리의 색상으로, 값은 color 속성의 포맷을 사용합니다. [예시] [결과] [방향] 테두리의 특정 방향만 따로 설정할 수도 있습니다. border-top border-bottom border-left border-right border-bottom-color 처럼 방향과 색, 두께, 스타일을 따로 설정할 수도 있습니다...