CSS

counter-reset: 카운터이름 시작숫자초기화 하는 속성으로 카운터 이름을 지정하고, 초깃값은 ‘0’ 이다.초깃값을 설정하려면 이름을 지정하고 시작 숫자를 입력한다.counter-increment: 카운터이름 증가할숫자counter-reset에서 초기화 된 cou

텍스트 라인의 높이를 의미하고, 행간을 제어할 때 사용한다.line-height로 제어되는 부분을 line-box 라고도 하며, 폰트 사이즈 + 상하단의 여백 까지를 의미한다.number 와 % 로 선언할 때, 두 값 모두 font-size를 기준으로 동작하기 때문에

문자 인코딩 방식을 지정한다. 스타일 시트의 첫 번째 요소여야 한다.브라우저 사이즈, 디바이스에 따라 설정이 가능2배수, 3배수 설정 가능세로 모드: Portrait(포트레이트) 모드가로 모드: Landscape(랜드스케이프) 모드IE 지원 안함 주어진 하나 이상의 c

: HTML 문서의 일부를 DOM 트리 구조와는 상관없는 방법으로 선택할 때 사용된다.:hover:active:link:checked:not():disabled,:nth-of-type() :is() | :where() - CSS4에서 포함된 가상 클래스로, 여러 선택된

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share데스크탑 (PC)데스크탑 (PC)의 뷰포트는 웹 브라우저 창 (visibla area)의 뷰포트와 같다.때문에 사용자가 브

block - div, h1, pinline - a, span, em, strong inline-block - width & height 를 가진다. padding & margin을 가진다. line-height 스타일 적용 가능.Flexbox 가변 상자 레이아웃 모듈

레이아웃 배치 기능을 구현할 수 있는 스타일로 기본 축과 교차 축에 따라 요소를 배치한다. flex를 선언하는 상위 부모는 flex container, 하위 요소들은 flex item이라고 불립니다.뷰포트 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소

요소를 일반적인 문서 흐름에 따라 배치한다.positon: sticky 속성을 적용한 요소는 평소 문서 안에서 positon: static 상태와 같이 일반적인 문서 흐름에 따라 배치해 있다가, 스크롤 위치가 임계점(내가 지정한 top / bottom / left /

https://codepen.io/ohmy0418/pen/PoaJaEw다단 레이아웃(multi-column)은 다단 텍스트 정의가 쉽도록 블록 레이아웃 모드를 확장한다. column-count단 수를 특정 숫자로 설정한다.예) column-count: 3col

웹 페이지가 브라우저에서 렌더링이 될 때 위와 같은 흐름으로 보면 된다. CSSOM을 빌드하는 과정에서 웹 폰트 링크를 다운로드 하기 시작하는데, 이 때 웹 폰트 파일처럼 외부 링크로 연결된 파일이 다운로드가 완료되지 않았으면, 브라우저는 해당 파일을 사용하는 콘

@font-face 를 사용해서 웹 페이지의 텍스트에 온라인 폰트 (online fonts)를 적용할 수 있다. @font-face를 사용해서 디자이너가 원하는 폰트를 사용할 수 있게 함으로써, 컴퓨터에 설치된 폰트로만 사용해야 했던 제약이 없어지게 되었다!아래 예제에

픽셀 단위는 CSS의 가장 기본적인 단위이다. 픽셀 단위로 값을 입력하는 것은, 내가 원하는 값을 정확하게 이 값이라고 절댓값으로 단호하게 선언하는 것이다. 1px은 사용자 디스플레이 기기의 논리적 해상도 1pt에 대응하며, 픽셀 단위로 지정한 크기는 나중에 크기를 변

전체 요소를 대상으로 함인접 선택자, 앞의 요소 바로 뒤에 있는 요소만 적용X 바로 하위 직계 Y만을 적용인접 선택자, X 아래에 있는 모든 Y 요소를 적용속성 선택자(Attribute selector), title 어트리뷰트 값을 갖는 요소만 적용속성 선택자(Attr

Transform(변형) | 웹접근성과 웹표준(https://seulbinim.github.io/WSA/transform.html요소 박스를 변형하는 속성. 2차원 및 3차원 변형이 가능하며 변형 형태별로 함수 타입의 속성 값을 지정한다.HTML 요소 박스를

요소에 지정된 속성을 변환하고자 할 때 사용하는 속성속성 값으로 특정 CSS 속성을 지정하면 해당 속성만 변환되고, all을 지정할 경우 요소에 지정된 모든 속성이 변환된다. 2개 이상의 속성을 지정할 경우 콤마(,)로 구분하면 여러 개를 지정할 수 있다.변환이 진행되

애니메이션은 애니메이션을 나타내는 CSS 스타일과 sequence(분기)를 나타내는 복수의 키프레임(@keyframes)들로 이루어진다.transition 프로퍼티는 요소 프로퍼티 값이 다른 값으로 변화할 때 주로 사용하며, 요소의 로드와 함께 자동으로 동작되지 않는다

IE 지원 안함filter 속성은 흐림 효과나 색상 변형, 대비 조절 등 그래픽 효과를 요소에 적용한다. 보통 filter는 이미지, 배경, 테두리 렌더링을 조정하는데 쓰인다.img, svg, div 등에 적용할 수 있다.svg 필터를 가리키는 URI를 받는다.주어진

IE 지원 안함<img> 나 <video>, <svg>, <object> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정한다.프로필 이미지, 고정된 크기의 썸네일을 출력하는 경우에 제각각의 크기를 가진 콘텐츠

IE 지원 안함 blend-mode 자료형은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의하는데, 즉 배경의 혼합 상태를 정의한다.blend-mode는 크게 background-blend-mode 와 mix-blend-mode 로 설정할 수 있다.backgro

문서의 최상위에서 바로 작성한 변수어떤 규칙도 포함되지 않고, 문서 어디서나 사용이 가능class | id가 선언된 블록 코드 { } 내에서만 유효 범위를 가짐정의한 블록의 상위 블록에서 절대사용할 수 없음!global 플래그를 사용하면 전역 변수로 사용할 수 있다.\

연구소 팀의 모든 프로젝트는 IRIS-Design-Core 레파지토리를 Git Submodule/Subtree로 가져와서 style-core 폴더 하위에 담아 퍼블리싱 작업을 하고 있다.이 IDC 에셋을 제외하고 각각 프로젝트에서 사용하는 에셋(이미지, 아이콘, 스타일

💡 CHECK사전에 테마를 몇 가지 지정해두고 사용자가 선택하게 하는지?테마 별로 컬러 지정 필요 (기본, 다크테마, 라이트테마 등등)최상단 html에 클래스를 부여하면, 테마에 맞춰 일괄 변경됨사용자가 컬러 하나를 선택하면 그 컬러에 따라 채도/명도/밝기 등 단위로