전체 글

개요 ajax 등을 통해 데이터를 바인딩 하거나, 숫자 카운팅 애니메이션을 적용하다 보면 가독성을 위해 숫자에 천단위 마다 콤마를 추가해줘야 할 때가 있다. 이럴땐 정규식을 이용하면 간단하게 천단위 마다 콤마를 추가해 줄 수 있다 예제 const price = 15000 const price_comma = price.toString().replace(/\B(? 위 예제는 replace() 메소드에 정규식을 이용해 콤마를 변환한다. See the Pen [Javascript] 숫자에 3자리(천단위) 콤마 추가 by woox (@woox-styler) on CodePen. 함수화 천단위 콤마 추가를 자주 사용해야 한다면 함수로 만들어 놓고 사용하는게 편하다 function addComma(num){ retu..

개요 보통 요소를 나열하려고 flex 를 사용하다 보면 자식 요소의 개수가 가변적으로 늘거나 줄어들 때를 고려해서 자식 요소의 크기를 결정하지 않고 나열해야 할 때가 있다 이 때 가변적인 수의 자식 요소의 크기를 동일(균등)하게 설정하고 싶다면 flex-basis 의 값을 0으로 설정하여 자식요소의 기본 넓이를 없애면 된다. 예제 보통은 자식요소에 아래와 같이 설정해서 많이 사용하게 된다 .element { flex: 1 1 auto; /* 위는 아래의 축약형 flex-grow: 1; flex-shrink: 1; flex-basis: auto; */ } 한데 이럴 경우 자식요소 내부 요소의 길이에 따라 자동으로 크기가 결정되기 때문에 자식요소들이 동일한 크기로 설정되지 않는 경우가 많다. 자식요소의 내부..

개요 보통 요소를 나열해야 하는 경우 예전 IE 를 고려하던 시절에는 간격(여백)을 주기위해 아래와 같은 방법을 썼다 나열되는 요소에 padding 또는 margin 으로 좌우 간격을 주고 부모요소에서 margin 을 마이너스(-) 주기 나열되는 요소에 오른쪽 마진 (margin-right) 또는 왼쪽 마진 (margin-right)을 주고 처음 또는 마지막 요소에는 마진을 0으로 설정하기 하지만 이럴 경우 부모 요소에서 스타일을 주어야 하고 고정적이지 않은 요소의 수일 경우 마지막 여백 등으로 인해 css 를 여러번 써야하는 경우가 생긴다 특히 요소를 display:inline-block 해야하고 inline-block 을 사용하다보면 부모의 font-size 에 영향을 받는 경우가 생겨서 css 가 ..

개요 has() 선택자는 특정 조건의 요소를 자식으로 가진 부모 요소를 선택할때 유용하게 사용할 수 있다. 기존에는 javascript 를 이용해야만 구현가능 했던 기능을 javascript 없이 구현할 수 있어 편하다 구문 selector:has(sub-selector) { /* CSS rules */ } 예제 li:has(a) { border: 1px solid #000; } a 요소를 가진 li 에만 border 를 줄 경우 응용1 See the Pen :has() 예제 - hover by woox (@woox-styler) on CodePen. 위 예제는 내가 실무에서 자주 사용하는 패턴이다 특정 요소에 마우스 호버 될 경우 호버된 대상이 아닌 다른 대상들에게 영향을 줘야 할 때 사용한다. 지원 ..

보통 스크롤이 없는 height 100% 페이지를 구현하다 보면 내부에 컨텐츠가 많아져 내부 스크롤바가 필요할 경우가 있다. 이론적으로는 flex 를 사용하면 당연히 가능할 것 같은데 막상 구현하다 보면 생각과는 다르게 동작하지 않는 경우가 있다 기본적인 구조는 아래와 같이 구현할 경우 헤더 컨텐츠 내용이 늘어나서 줄이 길어 집니다. 내용이 늘어나서 줄이 길어 집니다. ............ 푸터 위와 같이 구현할 것이다. 한데 flex 로 이루어진 레이아웃 안에서 다시 flex 를 이용해 자식요소를 flex-basis: auto 를 이용해 고정 pixel 이 아닌 auto 로 여백을 채울경우 제대로 동작하지 않는다. See the Pen flex 내부 flex 로 height : auto 및 scrol..

min() 사용법 min() 함수는 하나이상의 인자값을 사용할 수 있으며, 그 중 가장 작은 값을 반환한다. 보통 우리가 흔히 사용하는 width, max-width 와 비슷하다 일반적으로 컨테이너가 1280px 이상으로 커지지 않기를 원할 경우 아래와 같이 스타일을 사용한다면 .container { width: 100%; max-width: 1280px; } 아래와 같이 min() 함수를 이용할 수 있다. .container { width: min(100%, 1280px); } 반응형 마크업 시 padding 또는 margin 에 사용하면 편하다. max() 사용법 max() 함수는 하나이상의 인자값을 사용할 수 있으며, 그 중 가장 큰 값을 반환한다. 보통 우리가 흔히 사용하는 width, min-w..