css 썸네일형 리스트형 [JS] HTML 요소 크기가져오기. (offsetWidth, clientWidth, scrollWidth, getBoundingClientRect 필자는 얼마전에 JS에서 HTML 요소의 크기를 가져와서 계산해야하는 일이 발생했다. 예전에 어렴풋이 사용한 기억이 있어서, IDE의 코드 자동완성기능을 믿고, 그냥 element.width라고 쳐보니 많은 속성들이 나왔다. 속성이 여러개가 있다는 것은 분명 차이가 있을것이고 제품에서는 정확한 결과를 내야하기 때문에 이 차이들을 알 필요가 있다. 알아보자. 1. element.offsetWidth (Height) element.offsetWidth는 margin을 제외한, padding값, border값까지 계산한 값을 가져온다. (일반적으로 많이쓰임) 아래의 코드를 보자 글씨글씨글씨글씨글씨글씨글씨글씨 실행을 시켜 보면 위와같이 margin을 제외한 초록색 부분까지의 크기, padding값과 border.. 더보기 [CSS] box-sizing: border-box; 1. element의 여백 이 속성을 정확하게 알아보기 위해서는 HTML Element의 여백(margin, padding)에 대해 알고 있어야한다. 글씨글씨 결과는 아래와 같다. margin은 바깥으로 밀어내며, padding은 안쪽으로밀어내고 그 안에 100x100의 div안에 글씨가 쓰여졌다. 따라서 margin을 제외한 실측 크기는 160x160이다. 그렇다면 우리는 항상 디자인적으로 padding과 border를 얼만큼 줄건데 요소의 총크기는 얼마니까 width, height에 미리 여백값을 뺀 값을 넣어야 하는걸까. 아니다. 이딴식이면 코딩안했음. 1. box-sizing: border-box; 이때를 위해서 box-sizing: border-box;가 있는 것이다. 아래와 같이 추가하고 글씨.. 더보기 [CSS] CSS로 반응형 웹 만드는 방법 오늘 소개할 CSS는 미디어 쿼리 (@media)이다. 미디어 쿼리란? (@media) 화면 출력 장치 중 일부를 참조하거나, 가로 사이즈를 기준으로 기존에 작성했던 HTML 코드로도 다른 화면을 구현할 수 있게 만들어줌. CSS 작성하는 방법 @media only all and (조건) {실행} @media - 미디어 쿼리가 시작됨을 알린다. only - 미디어 쿼리를 지원하지 않는 브라우저에 대하여 특정 스타일을 적용할 수 있음. 생략하면 기본값으로 only가 들어가기 때문에 주로 생략한다. not으로 부정할수도 있다. all - 미디어 쿼리를 실행시킬 미디어 타입을 정해준다. (screen, tv, print, speech, all) 생략하면 기본값으로 all이 들어간다. 주로 screen을 사용한.. 더보기 이전 1 다음
