html, 스타일시트(css, scss)47 [css] 글자 밑줄 긋고 밑줄에 스타일 넣기 / text-decoration https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration text-decoration - CSS: Cascading Style Sheets | MDNThe text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.developer.mozilla.orghttps://hianna.tistory.com/679.. 2025. 4. 3. [CSS] 가상 클래스(:root)로 전역 변수(var) 다루기 의사 클래스란?'의사 클래스(pseudo-class)'의 'pseudo' 즉 의사(擬似)는 한자로 '비길 의'에 '닮을 사'로, 유사한 비슷한 이란 의미를 담고있다. 영어 'pseudo-'는 접두사로 허위의, 거짓의, 가짜의, 유사의 라는 의미로 사용된다. '의사 클래스'는 다른 말로 '가상 클래스'로도 불리는데, 일반적으로 '의사 클래스'라는 용어가 더 정확하고 많이 사용된다. 1. 의사 클래스의사 클래스 (pseudo-class) 는 HTML 요소의 특정 상태에 스타일을 적용할 수 있도록 도와주는 CSS 문법이다.예를들어, a:hover {} 를 사용하면, a 태그 위에 마우스가 올라갔을 때 { } 괄호 안의 css 속성이 a태그에 적용되도록 한다. 선택자 혹은 클래스(class)나 아이디(id) .. 2025. 4. 3. [ css ] Style Queries / 스타일 쿼리 효율적으로 사용하기 " 목차 "">" 목차 " Style Queries 01. At-rules (@)CSS에서 @로 시작하는 규칙(At-rules)는 특정 조건에서 스타일을 정의하거나 CSS의 동작을 제어하는 역할을 한다.대표적인 @규칙으로 다음 9가지가 있다.미디어 쿼리 (@media)컨테이너 쿼리 (@container)서체 임포트 (@font-face)CSS 모듈 (@import)키프레임 애니메이션 (@keyframes)CSS 계층화 (@layer)CSS 지원 여부 확인 (@supports)페이지 스타일링 (@page)카운터 스타일 (@counter-style)이 외에도 추가적인 @ 규칙이 존재하지만 위 규칙이 가장 많이 사용된다. Style Queries 02. 스타일 쿼리(Style Queries)란?일반적.. 2025. 2. 19. [html] ARIA(Accessible Rich Internet Applications)란? 📌 ARIA(Accessible Rich Internet Applications)란?ARIA(Accessible Rich Internet Applications)는 웹 접근성을 높이기 위한 속성을 제공하는 기술이다.특히 동적 콘텐츠(예: JavaScript 기반 인터페이스)나 스크린 리더를 사용할 때 사용자가 더 잘 이해할 수 있도록 보조 기술에 정보를 추가하는 역할을 한다.🎯 ARIA가 왜 필요할까?일반적인 HTML 태그(, 등)는 기본적으로 의미(semantic)를 가지고 있어, 브라우저와 보조 기술(스크린 리더 등)이 쉽게 해석할 수 있다.하지만 JavaScript로 동적으로 UI를 변경하는 웹 애플리케이션에서는 HTML 태그만으로는 충분하지 않을 수 있다. 비표준 UI 요소 (예: 버튼) .. 2025. 2. 17. [html] Amazon searchbox 속성 1. autocomplete="off"브라우저가 입력 값을 자동으로 완성하는 기능을 끌지(off), 켤지(on) 설정하는 속성입니다.on이면 사용자가 이전에 입력한 값을 바탕으로 추천 목록을 제공합니다.검색창 같은 경우, 브라우저의 자동 완성 기능이 방해가 될 수 있어서 off로 설정하는 경우가 많습니다.2. dir="auto"텍스트의 방향을 설정하는 속성입니다.값으로는 ltr(왼쪽→오른쪽), rtl(오른쪽→왼쪽), auto를 사용할 수 있습니다.auto로 설정하면 입력한 텍스트의 언어에 따라 방향이 자동 결정됩니다.예: 영어(left-to-right, ltr), 아랍어(right-to-left, rtl) 등3. aria-label="Amazon 검색"aria-label 속성은 접근성을 위한 속성으로, .. 2025. 2. 17. [HTML/CSS/JavaScript] <table>, <template> 태그로 표 생성하고 꾸미기 태그 1. 태그 기본형https://yerica.tistory.com/66 태그는 HTML 문서에 표를 만드는 태그이다. , , 등으로 문서의 영역을 구분하는 기초적인 부분은 넘기고,여러가지 속성으로 표를 구성하는 방법에 대해 알아보겠다. 기본적으로 각각의 브라우저는 에 대한 속성을 가지고 있다.크롬에서 의 기본 속성은 아래와 같다.table { display: table; border-collapse: separate; box-sizing: border-box; text-indent: initial; unicode-bidi: isolate; border-spacing: 2px; border-color: gray;}tr { display: table-row.. 2025. 1. 22. 이전 1 2 3 4 ··· 8 다음
