daily-inklings

2025년 js를 대체하는 새로운 css기능들  Live Validation vs Late Validation Example Live Validation Enter your name (required): This field is required. Late Validation Enter your email (required): Please enter a valid email address. HTML CSS JavaScript Python Live Validation Enter your name (required): This field is required. Late Validation Enter your email (required): Please enter a valid email address. CSS 스타일 쿼리(style queries) 설명 및 예제 스타일 쿼리란? 스타일 쿼리는 특정 요소의 부모 컨테이너 스타일(예: CSS 속성 값 또는 커스텀 속성 값)을 기반으로 하위 요소에 조건부 스타일을 적용할 수 있는 기능입니다. 이는 컨테이너 크기 쿼리와 유사하지만, 크기 대신 스타일 속성을 기준으로 작동합니다. 현재는 CSS 커스텀 속성(`--variable`)만 지원되며, 실험적인 기능으로 일부 브라우저(예: Chrome)에서만 사용 가능합니다. 사용법 `@contai...

   px  -> rem  변경 자주 쓰는 사이즈 16px-> 1rem 기준 12px -> 0.75rem 13px ->0.8125rem 14px ->0.8750rem 15px -> 0.9375rem 16px -> 1.000rem 17px -> 1.0625rem 19px -> 1.1250rem 20px -> 1.1875rem 21px ->1.2500rem 22px -> 1.3750rem 23px -> 1.4375rem 24px -> 1.5000rem 25px -> 1.5625rem 26px -> 1.6250rem 27px -> 1.6875rem 28px -> 1.7500rem 29px -> 1.8125rem 30px -> 1.8750rem 31px -> 1.9375rem 32px -> 2.0000rem

HTML CSS JavaScript Python .two-line-text { display: -webkit-box; /* Flex 컨테이너처럼 동작 */ -webkit-box-orient: vertical; /* 축 방향 설정 */ overflow: hidden; /* 넘치는 텍스트 숨김 */ -webkit-line-clamp: 2; /* 최대 2줄 표시 */ line-height: 1.5; /* 줄 간격 조정 */ max-height: calc(1.5em * 2); /* 총 2줄 높이 */ text-overflow: ellipsis; /* 말줄임표 추가 */ }

HTML구조화해서 마크업 하기. 웹접근성 텍스트 박스를 먼저 마크업 하면 스크린리더가 중요한 정보를 더 빨리 전달할 수 있음  SEO최적화 검색엔진(SEO 크롤러)은 텍스트 콘텐츠를 우선적으로 크롤링 함  이미지나 그래픽 콘텐츠는 SEO우선순위가 낮음 CSS로 작업시 유지보수성 높음

모바일 페이지 작업을 할 때 크롬 모바일 모드나 일반적인 디바이스에서는 문제없이 노출되던 텍스트들이 특정 디바이스 화면(몇몇 아이폰)에서 유독 크게 보이는 경우가 발생할 때가 있다. 이러한 경우 영역이 깨지거나 원하는 페이지를 표현하는데에 어려움이 생긴다. 이럴 때 사용하는 속성이 text-size-adjus t 라는 css 속성이다. text-size-adjust는 비표준 속성 이므로 벤더 프리픽스를 사용해야한다. 1. text-size-adjust : none default 속성(기본값)으로 화면의 크기에 따라 크기를 조정하지 않음을 명시한다. 2. text-size-adjust : auto 화면의 크기에 따라 크기를 자동으로 조정할 수 있게 한다. (디바이스마다 그 크기가 달라질 수 있기 때문에 되도록 사용하지 않는다.) 3. text-size-adjust : % (퍼센트) 특정 퍼센트(%) 값을 줘서 크기를 조정한다. 100%의 값을 줘서 모든 디바이스에서 동일한 텍스트 크기를 만들 수도 있고 퍼센트 값을 낮게줘서 디바이스별로 동일하게 작게 줄 수도 있다. 사용하는 예시는 아래와 같다. HTML CSS JavaScript Python html, body{ -webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ } 주로 실무를 하면서 많이 사용했던 방법은 위의 소스와 같이 text-size-adjust : none 값을 선언하거나 100% 값을 주는 방...

스크롤 압박이 심할 때 맨위로 이동할 수 있는 버튼 만들기 아래로 스크롤하면 버튼이 나타납니다. ↑