작은기린우리

"문자열 선택자"라는 용어는 CSS에서 특정 문자열을 기반으로 요소를 선택하는 다양한 선택자들을 통칭하는 넓은 의미입니다. 말씀하신 "비슷한 이름을 가진 모든 요소를 선택하는 것"은 문자열 선택자의 한 종류인 속성 값의 시작 문자열 선택자에 해당합니다.문자열 선택자의 종류CSS에서 문자열을 기반으로 요소를 선택하는 선택자는 다음과 같이 다양하게 존재합니다.속성 값의 시작 문자열 선택자 ([attribute^="value"]):지정된 속성 값이 특정 문자열로 시작하는 요소를 선택합니다.예시: [class^="slid-item"]속성 값의 끝 문자열 선택자 ([attribute$="value"]):지정된 속성 값이 특정 문자열로 끝나는 요소를 선택합니다.예시: [class$="-last"]속성 값의 부분 문..

CSS 사용자 지정 속성이란?웹페이지를 만들다보면 CSS 내에서 반복적으로 사용되는 스타일 속성이 생겨난다. 그럴때마다 Class에 속성을 적용하는 것은 번거롭고 코드도 길어진다.그런 것을 방지하기 위해서 CSS 코드 안에서 변수처럼 값을 저장해두고 필요할 때마다 불러서 사용할 수 있게 해주는 기능을 사용하는데 그게 바로 CSS 사용자 지정 속성이다. 정의 및 사용사용자 지정 속성은 --로 시작하는 이름을 사용하여 정의한다.예를 들어 --main-color: blue;와 같이 정의할 수 있다.정의된 속성 값은 var() 함수를 사용하여 불러와 적용할 수 있다.예를 들어 color: var(--main-color);와 같이 사용할 수 있다.범위(Scope)사용자 지정 속성은 정의된 요소와 그 하위 요소에서..

컨텐츠간 여백 : vw, vhvw와 vh는 CSS에서 뷰포트(viewport)를 기준으로 하는 상대적인 길이 단위이다.뷰포트는 웹 페이지가 표시되는 브라우저 창의 보이는 영역을 의미한다. vw (Viewport Width)vw는 뷰포트 너비의 1%에 해당하는 단위입니다.예를 들어, 뷰포트 너비가 1000px이라면 1vw는 10px입니다.vw는 주로 가로 방향의 여백, 간격, 요소의 너비 등을 설정할 때 사용됩니다.화면 너비에 따라 요소의 크기가 유동적으로 변해야 하는 반응형 디자인에 유용합니다.vh (Viewport Height)vh는 뷰포트 높이의 1%에 해당하는 단위입니다.예를 들어, 뷰포트 높이가 800px이라면 1vh는 8px입니다.vh는 주로 세로 방향의 여백, 간격, 요소의 높이 등을 설정할 ..

body{ display: flex; font-family: Arial, Helvetica, sans-serif; margin: 0; padding-top: 80px; padding-left: 96px; padding-right: 24px; background-color: black; color: white;}.body{ display: flex; font-family: Arial, Helvetica, sans-serif; margin: 0; padding-top: 80px; padding-left: 96px; padding-right: 24px; background-color: black; color: white;}선..

CSS 디자인을 하다보면 스타일 규칙이 충돌할 때가 있다. 그렇게 되면 웹 브라우저는 어떤 스타일이 요소에 적용되는지를 결정하는데 그 기준이 우선순위라고 할 수 있다. CSS 우선순위 결정 요소웹 브라우저는 다음 요소들을 종합적으로 고려하여 CSS 우선순위를 결정한다. 1. 중요도 (!important 규칙)!important 규칙은 가장 높은 우선순위를 가지며, 다른 모든 규칙보다 우선하여 적용된다.하지만 !important를 남용하면 스타일 관리가 어려워지므로, 가능한 한 사용을 자제하는 것이 좋다.2. 명시도 (Specificity)명시도는 스타일 규칙이 얼마나 구체적으로 요소를 선택하는지를 나타낸다.  명시도가 높은 규칙이 낮은 규칙보다 우선하는데 다음과 같은 순서로 계산된다.인라인 스타일 (HT..