개발/HTML | CSS

CSS에서 리스트의 스타일을 조정하는 데 사용되는list-style-type과 list-style-position 속성에 대해 깊이 있게 알아보겠습니다.이 두 속성은 HTML 리스트의 기본 모양과 배치를 변경하여 웹 페이지의 디자인과 가독성을 향상시키는 데 중요한 역할을 합니다.list-style-type 속성list-style-type 속성은순서 없는 목록()과 순서 있는 목록()의 항목 앞에 표시되는 마커(marker)의 모양을 결정합니다. 기본적으로 요소는 채워진 원형 불릿(disc)을, 요소는 숫자(decimal)를 마커로 사용합니다. 그러나 list-style-type 속성을 활용하면 다양한 마커 스타일로 변경할 수 있습니다.주요 값과 설명disc: 채워진 원형 불릿입니다. (의 기본값)cir..

오늘은 CSS의 :has() 선택자에 대해 알아보려고 해요.이 기능이 왜 중요한지, 어떻게 사용하는지,그리고 어떻게 활용할 수 있는지 자세히 살펴보겠습니다.:has() 선택자란?:has() 선택자는 CSS에서 오랫동안 기다려온 '부모 선택자'의 역할을 합니다.특정 조건을 만족하는 요소를 선택할 수 있게 해주는데요, 이게 왜 중요할까요?기존에는 자식 요소를 기준으로 부모 요소의 스타일을 변경하는 게 CSS만으로는 불가능했거든요.JavaScript를 사용해야 했죠.하지만 :has()를 사용하면 순수 CSS로 이런 작업이 가능해집니다.브라우저 지원 현황2023년 기준으로 :has()는 대부분의 최신 브라우저에서 지원됩니다.Chrome, Edge: 105 버전부터Firefox: 121 버전부터Safari: 15..

HTML의 태그는 사용자로부터 다양한 형태의 데이터를 입력받기 위해 사용됩니다. 각 type 속성은 입력받는 데이터의 형식과 기능을 정의합니다.아래에서는 HTML의 모든 input 태그의 type 속성과 그 정의, 예시를 소개합니다. button클릭 시 특정 동작을 수행하는 버튼입니다. checkbox여러 개의 선택지 중에서 하나 이상을 선택할 수 있는 체크박스입니다. color색상을 선택할 수 있는 입력 필드입니다. date날짜를 선택할 수 있는 입력 필드입니다. email이메일 주소를 입력받기 위한 필드로, 유효한 이메일 형식인지 검증합니다. file파일을 업로드할 수 있는 입력 필드입니다.  hidden사용자에게 보이지 않지만, 서버로 전송할 데이터를 포함하는 필드입니다. number숫자만 입력받..

성능이 좋은 웹을 만들기 위해서는UI/UX에 영향을 미치지 않는 선에서 적은 용량을 쓰는 것이 중요하다폰트의 다양한 포맷 종류 & 폰트 포맷 변경 사이트각각의 폰트는 지원되는 브라우저 범위가 다 다르다웹 페이지의 폰트가 모든 장치와 브라우저에서 잘 보이도록 하려면다양한 폰트 형식을 지원해주는 것이 좋다 다양한 폰트 포맷을 알아보자용량은EOT  --  TTF/OTF  --  WOFF  --  WOFF2순으로 작다  즉 WOFF2가 가장 작은 용량을 가진다 웹페이지 제작시 WOFF, WOFF2 를 많이 사용한다그러나 WOFF2는 최신 기술이므로 크로스 브라우징을 위해WOFF2를 사용하되, 해석하지 못하는 브라우저에는 WOFF, TTF 등을 사용할 수 있도록 설정해준다 TTF / OTF백터 기반 폰트형식sca..