안내
Utility-Frist CSS 방법론을 사용하여, 미리 정의되지 않은 클래스를 동적으로 생성하여 사용합니다. 핵심은 반복적으로 사용되는 원자 단위의 스타일 조각들을 유틸리티 클래스 규칙으로 사용하여 빠르고 유연하게 스타일을 적용할 수 있습니다.
특히 재사용 가능한 유틸리티 클래스를 사용하며, 클래스 이름이 곧 스타일 자체를 설명하기 때문에 누구나 쉽고 빠르게 클래스들을 조합하여 다양한 디자인을 만들 수 있습니다.
협업 시 HTML에서 바로 디자인 변경 및 조정이 가능하기 때문에 복잡하게 요청하고 처리하는 등의 작업 시간이 대폭 감소합니다.
전체 프로젝트에 걸쳐 동일한 유틸리티 클래스를 사용함으로써 스타일의 일관성을 유지할 수 있고 매번 새로운 클래스명을 고민하고 정의하는 대신 이미 만들어진 유틸리티 클래스를 사용하여 더욱 빠르고 효율적인 개발이 가능해 집니다.
다른 라이브러리와 종속성이 없기 때문에 확장팩 설치 이외 요구되는 까다로운 조건이 없습니다.
다른 라이브러리와는 달리 무제한의 값과 단위를 자유롭게 조합하여 사용할 수 있습니다.
또한, 총 7가지 해상도에 대응하는 미디어 쿼리 접두사를 이용하여 아주 간편하게 반응형 웹 어플리케이션을 구축할 수 있습니다.
별도의 학습없이 논리적으로 클래스명을 이해하고 예측하여 사용할 수 있도록 러닝커브를 최소화 하였습니다.
사용자가 저장한 클래스를 동적으로 스타일이 생성되며, CSS에서 가능한 모든 단위체계를 사용할 수 있으며 폭 넓은 자유도로 어떠한 환경에서도 사용할 수 있습니다.
특징
재사용 가능한 유틸리티 클래스
직관적인 스타일링
유지보수의 용이성
코드의 일관성
빠른 개발 속도
요구사항
별도의 추가 요구사항은 필요없습니다.
확장팩 설정
별도의 추가 설정이 필요없습니다.
Class name rules
최소한의 러닝커브를 위해 가장 직관적인 클래스명 생성 규칙을 도입했습니다.
우선 클래스명의 기준은 스타일의 스타일에 사용된 붙임표(-, hypen)를 기준으로 정해집니다.
예를들어 단위가 있는 margin-top:1px의 경우 margin과 top의 사이에있는 붙임표를 기준으로 가장 첫글자를 사용하여 .mt1px과 같이 사용할 수 있습니다.
Raw Lebel의 단위를 만들어 사용하고자하는 대부분의 경우 .[클래스명][값][단위]의 규칙만으로 사용할 수 있습니다.
단, 스타일 명이 중복되어 동일한 클래스명이 생성되는 상황을 피하기 위해 예외 처리된 클래스명들이 있습니다.
단위를 사용하는 클래스명의 규칙들 :
- mt: margin-top'
- mr: margin-right'
- ml: margin-left'
- mb: margin-bottom'
- ma: margin'
- pt: padding-top'
- pr: padding-right'
- pl: padding-left'
- pb: padding-bottom'
- pa: padding'
- t: top'
- r: right'
- l: left'
- b: bottom'
- w: width'
- h: height'
- maxw: max-width' 예외
- maxh: max-height' 예외
- minw: min-width' 예외
- minh: min-height' 예외
- br: border-radius'
- lh: line-height'
- fs: font-size'
- o: opacity'
단위를 사용하지 않는 클래스명의 규칙들 :
- tar : text-align:right
- tal : text-align:left
- tac : text-align:center
- taj : text-align:justify
- fr : float:right
- fl : float:left
- fn : float:none
- cb : clear:both
- cr : clear:right
- cl : clear:left
- cn : clear:none
- ps : position:static
- pr : position:relative
- pa : position:absolute
- pf : position:fixed
- pi : position:initial
- sticky : position:stick 예외
- di : display:inline
- db : display:block
- dib : display:inline-block
- dn : display:none
- dt : display:table
- dtc : display:table-cell
- vh : visibility:hidden
- vv : visibility:visible
- vi : visibility:initial
- df : display:flex
- dif : display:inline-flex
- fa : flex:auto
- fi : flex:initial
- fdr : flex-direction:row
- fdrr : flex-direction:row-reverse
- fdc : flex-direction:column
- fdcr : flex-direction:column-reverse
- fwn : flex-wrap:nowrap
- fww : flex-wrap:wrap
- fwr : flex-wrap:wrap-reverse
- fgu : flex-grow:unset
- jcfs : justify-content:flex-start
- jcfe : justify-content:flex-end
- jcc : justify-content:center
- jcsb : justify-content:space-between
- jcsa : justify-content:space-around
- acs : align-content:stretch
- acfs : align-content:flex-start
- acfe : align-content:flex-end
- acc : align-content:center
- acsb : align-content:space-between
- acsa : align-content:space-around
- ais : align-items:stretch
- aifs : align-items:flex-start
- aife : align-items:flex-end
- aic : align-items:center
- aib : align-items:baseline
- asa : align-self:auto
- ass : align-self:stretch
- asfs : align-self:flex-start
- asfe : align-self:flex-end
- asc : align-self:center
- asb : align-self:baseline
- fshi : flex-shrink:initial
- fshu : flex-shrink:unset
- tlf : table-layout:fixed
- tla : table-layout:auto
- fsn : normal
- fsi : italic
- fso : oblique
- fsini : font-style:initial 예외
- fsinh : font-style:inherit 예외
- wb : word-break:break-all
- wsn : white-space:nowrap
- wsp : white-space:pre
- wspl : white-space:pre-line
- wspw : white-space:pre-wrap
- wsi : white-space:initial
- vat : vertical-align:top
- vam : vertical-align:middle
- vab : vertical-align:bottom
- vabl : vertical-align:baseline
- oa : overflow:auto
- oh : overflow:hidden
- oxh : overflow-x:hidden
- oyh : overflow-y:hidden
- oxa : overflow-x:auto
- oya : overflow-y:auto
- cp : cursor:pointer
- cd : cursor:default
- cm : cursor:move
- ct : cursor:text
- cw : cursor:wait
- cn : cursor:none
이 상세 클래스명에 대한 규칙들은 아래 가이드 문서를 참고하여 주시기 바랍니다.
http://
How to use
이 확장 기능을 사용자의 필요에 맞게 구성하려면, .vscode/settings.json 파일에서 다음 설정을 조정할 수 있습니다:
- 처리할 파일 확장자 지정:
- atomic.selectedLanguages: 이 확장 기능이 적용될 파일 확장자를 배열 형태로 지정합니다. 예를 들어, HTML 파일만 처리하려면 ["html"]로 설정합니다.
( 아무 옵션도 없을 경우 기본값은 html입니다. )
- 예시 : "atomic.selectedLanguages": ["html", "php", "js"]
- CSS 파일이 저장될 경로 지정:
- atomic.cssDirectoryPath: 생성된 CSS 파일이 저장될 경로를 지정합니다. 상대 경로 또는 절대 경로를 사용할 수 있습니다.
- 예시 : "atomic.cssDirectoryPath": "/assets/css/"
{
"atomic.selectedLanguages": ["html"],
"atomic.cssDirectoryPath": "/assets/css/"
}
Release Notes
1.0.0
처음 만들어 본 확장프로그램이라 버그나 오류가 있을 수 있습니다만, 앞으로 지속적으로 개선하여 더 좋은 서비스를 만들어 나갈 수 있도록 최선을 다하겠습니다.