2023/10/22 2

jquery 반응형 화면 사이즈 새로 측정하기. 미디어쿼리 구간과 오차 없애기

반응형 페이지를 만들 때, 윈도우 사이즈가 변할 때마다 윈도우(또는 html, body) 너비를 새로 측정하여 집어넣게 된다. 그런데 이렇게 하니, 제이쿼리의 이벤트 발생 구간과 미디어쿼리의 효과 적용 구간이 15px정도 오차가 생기는 것을 발견했다. (이렇게 되면 그 오차범위에 속하는 너비의 디바이스를 이용하면, css와 js의 효과가 서로 다른 구간의 것이 적용되므로 실패한 ux를 제공하게 될 수 있다!!!) 오차가 발생한 원인은 스크롤바의 너비였다. 미디어쿼리의 윈도우 너비는 스크롤바를 포함하여 측정되고, 제이쿼리에서 구한 윈도우(또는 html, body)의 width값은 스크롤바 너비를 제외하고 측정된다. 윈도우(또는 html, body)의 width값에 스크롤바 너비를 더하는것은 스크롤바의 너비..

JS(JQuery) 2023.10.22

html 특수문자 코드표 (Entity code) (+엔티티 모음 링크)

HTML 엔티티(Entity)란? HTML 문서를 작성할 때 마크업과 충돌하는 것을 방지하고 브라우저가 문자열을 해석하는데 혼란을 막기 위해 특정 문자열을 예약어(reserved characters)로 지정한 문자셋을 말한다. 따서 태그와 혼용될 수 있는 아래와 같은 특수문자는 엔티티로 사용해야 한다. 그런데 이외에도 특수문자는 너무나도 많은데, 이들도 다 엔티티로 써야 할까?🤔 요즘에는 html에 특수문자를 그대로 입력하여도 깨진다거나 보이지 않거나 하지는 않는다고 한다. 그러나 특수문자를 그대로 작성하는 경우, W3C Validator는 해당 특수문자를 오류로 인식한다고 하니 엔티티로 사용하는 것을 지향하는것이 좋겠다. + 추가 엔티티가 생각보다 다양한데다가 입력과 편집도 수월하다보니 아이콘으로 사용..

HTML 2023.10.22