본문 바로가기
반응형

CSS3

웹 scroll, offset, client Height 의 차이 웹페이지, 또는 요소의 높이값 정보를 얻는 속성은 대표적으로 clientHeight와 offsetHeight, scrollHeight가 있습니다. 세 속성은 어떤 경우에는 값은 높이값을 표시하지만, 어떤 경우에는 다른 높이값을 표시합니다. 각 속성이 표시하는 높이 값의 의미는 다음과 같습니다. clientHeight 는 요소의 내부 높이입니다. 패딩 값은 포함되며, 스크롤바, 테두리, 마진은 제외됩니다. offsetHeight 는 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함됩니다. 마진은 제외됩니다. scrollHeight 는 요소에 들어있는 컨텐츠의 전체 높이입니다. 패딩과 테두리가 포함됩니다. 마진은 제외됩니다. 그림으로 표현하면 다음과 같습니다. 세속성 모두 정수값으로 표현되.. 2022. 11. 24.
요소 정렬 clear css 속성 출처 : https://electronic-moongchi.tistory.com/22 [css] clear(none, both, left, right) 의 속성 이전에 float 속성에 대해서 배웠는데, https://heavenlake.tistory.com/64 요소 영역, 정렬 float 출처 : https://electronic-moongchi.tistory.com/21?category=710947 [css] float(left, right, none) 의 속성 float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다. 로 띄우거나 하지 마라... floa.. heavenlake.tistory.com float 은 왼쪽, 오른쪽으로 해당 객체를 위치 시켜서 정렬하는 속성이었다. 그렇다면.. 2021. 8. 5.
요소 영역, 정렬 float 출처 : https://electronic-moongchi.tistory.com/21?category=710947 [css] float(left, right, none) 의 속성 float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다. 로 띄우거나 하지 마라... float 속성은 묶음 태그(block element) 만 적용할 수 있다. 묶음 태그 : 등 float 의 속성 사용법 none (기본값) : 정렬하지 않는다. left : 왼쪽으로 정렬한다. right: 오른쪽으로 정렬한다. 기본 html 소스 소스보기 실행 결과는 다음과 같다. 이제부터 위의 html 문서에서 float 속성을 적용해 보자. 1. float: none div { width: 100px; height: 100p.. 2021. 8. 5.
반응형

티스토리툴바