기존 Reset CSS가 아닌 최신 Reset CSS가 나왔다고 번역이 된 글을 발견해서 학습을 진행했습니다. /* box-sizing 규칙을 명시합니다. */ *, *::before, *::after { box-sizing: border-box; } /* 폰트 크기의 팽창을 방지합니다. */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-block-end: 0; } /* list를 role값으로 갖는..
스크롤이 생기는 이유들!! 1. 브라우저의 주소 표시줄 높이: 특히 모바일 브라우저에서 100vh는 종종 주소 표시줄을 포함한 전체 높이를 의미합니다. 그래서 실제로는 화면보다 조금 더 길게 나타나게 됩니다. 2. Box Model: 기본적으로 width와 height는 컨텐츠의 크기만을 포함하기 때문에, padding, border, margin 등이 추가되면 요소의 전체 크기가 100vh보다 커질 수 있습니다. 3. 다른 요소들: 해당 요소 외에도 페이지에 다른 요소들이 존재할 경우 그 요소들의 높이 때문에 스크롤이 발생할 수 있습니다. 해결 방법들 1. 모바일 브라우저의 주소 표시줄 때문에 문제가 발생한다면, window.innerHeight를 사용하여 실제 높이를 얻고 이를 요소에 적용할 수 있습..
aria-describedby와 title은 둘 다 웹 요소에 대한 추가 정보를 제공하는 데 사용되지만, 몇 가지 차이점이 있습니다. 1. 사용목적 title: title 속성은 요소에 대한 간단한 툴팁을 제공하는 데 사용됩니다. 마우스를 해당 요소 위에 올리면 툴팁이 표시됩니다. title은 주로 비교적 간단한 정보를 제공하거나 요소에 대한 간단한 설명을 제공하는 데 사용됩니다. aria-describedby: aria-describedby 속성은 웹 요소에 대한 상세한 설명이나 오류 메시지, 추가 정보 등과 같은 복잡한 내용을 제공하는 데 사용됩니다. 주로 스크린리더를 사용하는 사용자에게 추가 정보를 전달하는 데 활용됩니다. 2. 접근성 title: title 속성의 툴팁은 일반적으로 마우스 호버에 ..
이미지 스프라이트? 여러 개의 이미지를 하나의 이미지로 관리하는 이미지를 말한다. 웹 페이지를 로드하면 수 많은 이미지들을 다운받기 위해 웹 브라우저는 서버에 이미지 요청을 하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 페이지의 로딩 시간은 오래 걸리게 됩니다. 이미지 스프라이트를 사용하게 되면 이미지를 다운받기 위해 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼에선 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 관리에도 용이합니다. 예 위와 같은 아이콘들을 통째로 가지고 있는 이미지가 있다고 치자. 이 이미지의 원하는 부분을 잘라 사용하면 불러오는 이미지의 수는 줄어들 것이다. 네이버에서는 많은 카드들이 좌측으로 가는 버튼, 우측으로..
a태그 내부에 블록 요소를 넣어도 되는가? 정답은 O이다. HTML 유효성 검사 페이지를 통해 아래 코드를 검사해보자. 궁금하다! 결과는 에러가 없다고 뜬다! 원래라면 인라인 요소인 a태그 내부에 블록 요소인 div를 넣는 것이 불가능하다. HTML 4.01표준만 보더라도 인라인 요소인 a태그는 인라인 요소만 감쌀 수 있다고 규정되어 있다. 하지만 HTML5 표준에서는 가능하다고 명시되어 있다. 왜? HTML5에서는 태그 분류를 단순히 인라인, 블록으로 나눈 것이 아니라 태그와 성격와 특성에 따라 나누었다. 이는 HTML 콘텐츠 모델에서 확인할 수 있다. 이 HTML 콘텐츠 모델에 의해 a태그가 flow content(플로우 콘텐츠)를 품을 수 있다. 따라서 a태그는 인라인 속성만이 아닌 블록 요소도 담..
상대 단위 ✅ 특징 - 다양한 플랫폼들에 유동적으로 적용할 수 있다. 단위 의미 em 폰트의 기본 크기 값에 비례한 단위 ex 폰트의 기본 X 높이에 비례한 단위 ch "0"의 기본 폭에 비례한 단위 rem 최상위 요소의 폰트 크기에 비례한 단위 vw 뷰포트 너비에 비례한 단위 vh 뷰포트 높이에 비례한 단위 vmin 뷰포트의 최소 너비, 높이에 비례한 단위 % 브라우저 기본 글꼴을 100%하고 상대적 크기를 나타냄 절대 단위 ✅ 특징 - 규격이 정해져 있다 - 각 단위들 끼리 값 변환이 가능하다. 단위 의미 cm 센티미터 단위 mm 밀리미터 단위 in 인치(inch) 단위로, 2.54cm과 같음 px 픽셀(pixels) 단위로, 1/96inch와 같음 pt 포인트(point) 단위로, 1/72inch와..
target의 주의점 MDN 문서를 확인해보면 window.opener API의 악의적인 사용을 방지하는걸 고려하라고 권장하고 있습니다. 이를 막기위해 rel="noopener" 와 rel="noreferrer" 를 사용하면 됩니다. noopener target="_blank" 사용 시 새 창으로 브라우저를 열게 되면 새로운 창에서 연결 페이지에 부분적으로 액세스할 수 있는 보안 취약점이 생기게 됩니다. 즉, window.opener 객체를 통해 연결된 페이지에서 이전 페이지를 제어할 수 있는 권한이 주어진다는 것입니다. 하지만 rel=”noopener”를 주게되면 새로 열린 페이지에서 window.opener 객체가 존재하지 않게 됩니다. noreferrer noopener와 유사한 기능으로 새로 열리..
form 사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만듭니다. form 동작 방식 입력도니 데이터를 한 번에 서버로 전송합니다. 전송한 데이터는 웹 서버가 처리하고 결과에 따른 또 다른 웹 페이지를 보여줍니다. form 내용을 작성한다 form 안에 있는 모든 데이터를 웹 서버로 보낸다 웹 서버는 받은 form 데이터를 처리하기 위해 웹 프로그램으로 넘긴다 웹 프로그램은 폼 데이터를 처리한다 처리결과에 따른 새로운 html 페이지를 웹 서버에 보낸다 웹 서버는 받은 html 페이지를 브라우저에 보낸다 브라우저는 받는 html 페이지를 보여준다 form 태그 사용시 주의점 form 요소를 사용할 때 주의할 사항으로는 태그 사이에는 다른 태그가 삽입이 안되며, 의 이름 속성은 한 페이지에서 중복하여..
키보드 focus 마우스가 고장나거나 키보드로만 조작해야 할 일이 있을 때 주로 Tab 키를 사용해 웹 페이지의 기능을 사용해야합니다. 웹은 사용자와 상호작용이 가능한 요소들을 focus되도록 합니다. 대표적으로 , , 같은 양식(form) 관련 요소(element)와 요소를 들 수 있습니다. tabindex 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정합니다. 웹 페이지를 구성하다 보면 불가피하게 시각적인 디자인 때문에 폼 요소나 링크 요소가 논리적이지 않게 만들어야 하는 경우가 있습니다. 이때 tabindex로 페이지 탐색에 논리적 순서를 부여하여 사용자가 자연스럽게 페이지를 탐색할 수 있도록 합니다. tabi..
box-sizing 속성 box-sizing 속성은 CSS의 테두리 영역의 크기를 결정합니다. box-sizing 속성값에는 content-box와 border-box가 있습니다. 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. (기본값) border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. content-box 지정한 CSS width 및 height를 컨텐츠 영역에만 적용합니다. border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있습니다...
