CSS - attr()CSS attr() 함수는 선택한 요소의 속성 값을 반환한다고 설명되어 있다.의사 요소(::before, ::after)와 함께 사용할 수 있다.즉, CSS에서 HTML요소의 속성 값을 가져올 수 있다. Syntaxattr(attribute-name type fallback)attribute-name : required. 해당 요소의 속성 이름.type : optional. 속성 값의 유형 또는 단위.유형 또는 단위들예시 : string, color, url, integer, number, length, angle, em px..등의 단위, deg grad rad, time, s ms, Hz kHz, %, frequencyfallback : required. 속성이 누락되었거나 잘못..

BEM이란?BEM은 Block, Element, Modifier의 약어로 얀덱스(Yandex)사가 제창했다.사용자 인터페이스를 독립된 블록으로 분리하여 복잡한 페이지에서도 간단하고 신속하게 개발할 수 있도록 하는 것이 목적.모듈 기반의 방법이다.다른 설계 기법에 비해 엄격하고 강력하다. BEM 기본클래스 셀렉터를 사용해야 한다./* ❌요소형 셀렉터는 사용하지 않는다. */a {}a.button {}/* ✅ 클래스 셀렉터 사용. */.button {}상세도를 높이지 않는다./* ❌ 상세도를 높이지 않는다. */.button.button-theme-caution {}/* ✅ 상세도를 높이지 않음. */.button-theme-caution {}.menu {}.menu__item {}.menu__item--a..

CSS 방법론css 방법론이란?웹 개발에서 CSS를 체계적으로 작성하고 관리하기 위한 설계 방식이나 철학을 의미한다.유지보수성과 확장성을 높이기 위한 목적으로 이러한 방법론이 등장하게 되었다.프로젝트 규모가 커질수록 이러한 방법론의 필요성이 높아진다.쉽게 이야기하면 'CSS 클래스를 명명하는 방법' 이다. CSS 방법론이 필요한 이유1. 스타일 충돌 방지전역에서 .button 같은 이름을 여러 번 쓰면 의도치 않게 스타일이 겹치거나 덮어쓰기가 발생할 수 있음.방법론을 적용하면 클래스 이름이 명확하고 고유해져 충돌을 방지함.2. 유지보수가 쉬움구조화되지 않은 CSS는 어디서 수정해야 할지 알기 어려움.방법론은 컴포넌트 중심으로 설계되어 있어 수정이 필요한 위치를 쉽게 찾고 고칠 수 있음.3. 협업에 유리여..

CSS : contain property웹 페이지에서는오래전부터 가로로 스크롤이 생기는 것을 방지하기위해 상위 요소에 overflow: hidden;을 적용해왔다. 예를 들어 예상치 못하게 텍스트 또는 요소가 넘쳐서 화면 밖으로 나가거나화면 밖에서 안으로 들어오거나 안에서 밖으로 나가는 인터랙션이 있을 경우 와 같은 상황에서 화면에 가로 스크롤이 발생한다. 이는 매우 빈번한 상황이다. 간혹 이런 처리가 안되어 있어서 보기 좋지 않게 가로로 스크롤이 가능한 사이트들이 가끔 보이지만, 한편으로는 빈번하게 일어날 수 있는 이런 상황에 비해서는 가로 스크롤이 발생하지 않는 사이트가 대다수인 이유는 꽤 오래전부터 가로 스크롤이 발생하지 않게 하기 위해서 상위 요소에 overflow: hidden;을 적용해 주는 ..

CSS CounterCSS 이용하여   요소처럼 자동으로 넘버링 하게 해줍니다.CSS Counter는 CSS에서 유지 관리하는 "변수"로, CSS는 값을 추적하여 규칙에 따라 값을 증가시킬 수 있습니다. 사용되는 속성CSS 카운터는 "변수"와 같습니다. 변수 값은 CSS 규칙에 의해 증가될 수 있습니다(사용 횟수를 추적합니다).counter-reset : 카운터를 생성하거나 재설정합니다.counter-increment : 카운터 값을 증가시킵니다.content : 생성된 콘텐츠 삽입.counter()또는 counters()함수 : 카운터 값을 요소에 추가합니다.body { counter-reset: section 0; /* counter 이름을 'section'으로 지정합니다. 초기값은 0입니다. 초..

# CSS 변수- 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. ## 표기법 및 사용법사용 : 변수 맨 앞에 -- 를 붙여준다.호출 :  var() 함수를 사용해 접근한다./* 변수 선언 및 할당 */:root { --color-main: black; /* :root 의사 클래스에 선언하면 CSS 전역으로 선언됨. */}/* 변수 사용 */.box { color: var(--color-main);}HTML 문서의 루트 요소는 요소이므로 :root 와 html 은 같음.CSS 변수도 지역 변수 스코프가 가능하다./* 지역 변수 선언 및 사용 */div { --color-main: pink; /* CSS 지역 변수 선언 ..