CSS3 getBoundingClientRect() Vs css 좌표 getBoundingClientRect()는 엘리먼트의 좌표값을 알 수 있는 api입니다. 그런데, 이 좌표값이 css와 혼동이 있어서 정리 해 보았습니다. getBoundingClientRect() css ex) (getBoundingClientRect()) right:1240px; bottom:569 (css) position: fixed right:40px; bottom:40px; 두 좌표가 같은 element를 의미하고 있습니다. (화면크기에 따라 위에 해당 하는 값 다를 수 있음) 결론 getBoundingClientRect()를 이용할 때는 right, bottom의 기준이 왼쪽 상단이지만, css에서 right, bottom을 측정할 때는 element를 기준으로 값을 지정했습니다. 2022. 2. 1. [CSS] box-sizing 어느 날 css 파일 속 box-sizing 역할이 궁금하여 알아보았습니다. * { box-sizing: border-box; } box-sizing값을 content-box(default)로 설정하면 박스의 width를 content의 길이만큼 설정하고, box-sizing값을 border-box로 설정하면 width를 border*2 + padding*2 + content의 길이로 설정 가능하여 css작업 시 더 편하게 width값을 설정할 수 있습니다. Example s box-sizing: border-box; width를 100으로 설정하고 border를 5로 설정했지만, border-box를 기준으로 하기때문에 content사이즈가 자동으로 90이 됩니다. box-sizing: content-.. 2022. 1. 24. [CSS] position position이란? css 문서상에서 요소를 배치할때 사용하는 속성입니다. 속성은 static, relative, absolute, fixed, sticky 총 5가지인데, 여기서는 static, relative, absolute를 집중적으로 알아보겠습니다. static position: static; 이 속성의 값은 기본값입니다. position에 대한 값을 쓰지 않으면 요소는 기본적으로 static으로 할당됩니다. 예시와 그림을 보겠습니다. 코드 더보기 html css .container { position: static; top: 40px; width:500px; height:400px; background-color: antiquewhite; } .ex2 { width: 200px; height.. 2021. 12. 21. 이전 1 다음 반응형
