본문 바로가기
728x90

전체 글112

10. 위치 지정 (position, display, float, clear) 1. positionstaticrelativeabsolutefixedstatic기본값문서의 흐름에 맞춰 배치된다.다른 속성들과 달리 따로 위치를 지정하지 않는다. relative위치값을 지정할 수 있다는 점을 제외하면 static과 같다.자신의 상대적 위치(static)을 기준으로 위치 변경 가능 position: relative; 원래 자기 자신이 있어야 하는 위치에서 left:30px 만큼 오프셋 된다.  - 실행 결과 position: relative; 원래 자기 자신이 있어야 하는 위치에서 left:30px 만큼 오프셋 된다. " data-ke-.. 2024. 7. 5.
9. CSS 박스 모델 CSS 박스 모델은 네 부분으로 나뉘며, 개발자 도구(F12)에서 확인 가능하다.content: 요소의 내용 부분padding: 내용과 테두리 사이의 간격border: 요소의 테두리 부분margin: 요소의 외부 여백  박스 모델 크기 (box-sizing)content-box: 기본값. 콘텐츠 영역만 너비 값으로 지정border-box: 테두리 영역까지 너비 값으로 지정- 활용 코드.element { box-sizing: border-box; /* 요소의 전체 크기를 콘텐츠, 안쪽 여백, 테두리까지 포함하여 계산 */ width: 200px; /* 요소의 전체 너비를 고려하여 설정 */ padding: 10px; /* 안쪽 여백 설정 */ border: 1px solid black.. 2024. 7. 5.
8. 마우스 커서 cursor 속성을 이용해서 마우스 커서의 형태를 지정할 수 있다. cursor:auto cursor:default cursor:context-menu cursor:help cursor:pointer cursor:progress cursor:wait cursor:cell cursor:crosshair cursor:text cursor:copy cursor:move cursor:not-allowed .. 2024. 7. 4.
7. 표 스타일 caption-sideborderborder-spacingborder-collapse 표 제목 위치 (caption-side)top: 제목을 표 위에 표시. 기본값bottom: 제목을 표 아래에 표시 표 테두리 (border)표의 바깥 테두리와 셀 테두리 각각 지정. - 활용 코드 table { border: 2px solid #000; /* 표 테두리에 검음색 실선 표시 */ } th, td { border: 2px dotted #000; /* 셀 테두리에 검은색 점선 표시 */ padding: 10px; /* 설 테두리와 내용 사이에 여백 지정 */ text-align: cente.. 2024. 7. 4.
728x90

티스토리툴바