CSS

CSS 결합자 (Combinators), 형제, 자식, 자손

CSS 결합자(Combinators)는 두 개 이상의 선택자를 결합하여 특정 요소를 선택하는 데 사용됩니다. 간단한 예제를 통해 CSS 결합자에 대해 알아보도록 하겠습니다. CSS 결합자 (Combinators) 참고로 MDN은 결합자(combinator)로 표기하고 w3schools은 선택자(selector)로 표기하고 있습니다. 인접 형제 결합자 (+) 일반 형제 결합자(~) 자식 결합자 (>) 자손 결합자 (space) 인접 형제(+) (adjacent sibling combinator) 인접 형제 결합자는 (+)로 표시하며 앞에서 지정한 요소의 바로 다음(첫 번째)에 위치하는 형제 요소만 선택합니다. 예제 : div + p { background-color: yellow; } <p>문단</p> <div> <p>문단1 (div 자식 요소)</p> <p>문단2 (div 자식 요소)</p> </div> <p>문단3 (div 다음에 위치한 형제 요소)</p><!-- 선택 --> <p>문단4 (div 다음 다음에 위치한 형제 요소)</p> <div> <p>문단5 (div 자식 요소)</p><!-- 선택 --> <p>문단6 (div 자식 요소)</p> </div> <p>문단7 (div 다음에 위치한 형제 요소)</p> <p>문단8 (div 다음 다음에 위치한 형제 요소)</p> w3schools 예제를 참고해 보세요 일반 형제(~) 일반 형제 결합자는 (~)로 표시하며 앞에서 지정한 요소 다음에 오는 형제 요소를 선택합니다. 예제 : div ~ p { background-color:…

2023-05-05

Html input type number 화살표 제거(스핀 버튼)

Html input type number 화살표 제거, input 태그 중 숫자만 입력할 수 있는 type number에 표시되는 스핀 버튼 화살표를 CSS를 이용해 제거하는 방법입니다. 기본 적으로 넘버 타입 인풋은 입력 창에 마우스를 올리거나 포커스가 되면 오른쪽에 스핀 버튼이 표시됩니다. 표시된 스핀 버튼의 화살표를 클릭해 숫자를 증감시킬 수 있어 편리하지만 때론 숨겨야 할 때도 있어 제거하는 방법 알아보았습니다. input type number 화살표 제거 CSS를 이용해 화살표 표시를 제거하는 방법으로 아래 코드를 이용할 수 있습니다. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } 크롬 브라우저와 사파리, 엣지, 오페라, 파이어 폭스까지 모두 화살표 표시가 제거된 것을 확인했습니다.

2022-09-08