woox.dev

[Javascript] 자바스크립트로 숫자 3자리 마다 콤마 추가 (천단위)

woox — Tue, 27 Feb 2024 11:10:14 +0900

개요

ajax 등을 통해 데이터를 바인딩 하거나, 숫자 카운팅 애니메이션을 적용하다 보면

가독성을 위해 숫자에 천단위 마다 콤마를 추가해줘야 할 때가 있다.

이럴땐 정규식을 이용하면 간단하게 천단위 마다 콤마를 추가해 줄 수 있다

예제

const price = 15000
const price_comma = price.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")
console.log(price_comma)

위 예제는 replace() 메소드에 정규식을 이용해 콤마를 변환한다.

See the Pen [Javascript] 숫자에 3자리(천단위) 콤마 추가 by woox (@woox-styler) on CodePen.

함수화

천단위 콤마 추가를 자주 사용해야 한다면 함수로 만들어 놓고 사용하는게 편하다

function addComma(num){
  return num.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

See the Pen Untitled by woox (@woox-styler) on CodePen.

flex 사용 시 자식요소 동일한 크기로 만들기 (균등 분할)

woox — Mon, 22 Jan 2024 16:53:38 +0900

개요

보통 요소를 나열하려고 flex 를 사용하다 보면 자식 요소의 개수가 가변적으로 늘거나 줄어들 때를 고려해서

자식 요소의 크기를 결정하지 않고 나열해야 할 때가 있다

이 때 가변적인 수의 자식 요소의 크기를 동일(균등)하게 설정하고 싶다면 flex-basis 의 값을 0으로 설정하여

자식요소의 기본 넓이를 없애면 된다.

예제

보통은 자식요소에 아래와 같이 설정해서 많이 사용하게 된다

.element {
	flex: 1 1 auto;
    /*
    위는 아래의 축약형
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    */
}

한데 이럴 경우 자식요소 내부 요소의 길이에 따라 자동으로 크기가 결정되기 때문에

자식요소들이 동일한 크기로 설정되지 않는 경우가 많다.

자식요소의 내부요소 길이가 동일 할 경우에는 아래와 같이 flex: 1 1 auto; 로 부여하면 동일한 크기를 가진다

See the Pen flex flex-basis: auto by woox (@woox-styler) on CodePen.

자식요소의 내부요소 길이가 다를 경우 flex: 1 1 auto; 로 부여하면 내부요소의 길이가 긴 자식요소가 다른 요소들 보다 큰 크기를 차지한다

See the Pen flex flex-basis: auto : 내부 길이가 다를 경우 by woox (@woox-styler) on CodePen.

해결

이럴 경우 flex-basis 값을 0 으로 설정하여 기본 넓이를 없게하면 동일한 크기를 자식요소를 만들 수 있다.

.element {
	flex: 1 1 0;
    /*
    위는 아래의 축약형
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    */
}

아래와 같이 자식요소의 내부 길이가 다르더라도 동일한 크기로 설정된다.

See the Pen flex flex-basis: 0 by woox (@woox-styler) on CodePen.

flex 에서 gap 사용하기 (나열되는 요소에 여백 주기)

woox — Wed, 3 Jan 2024 16:45:29 +0900

개요

보통 요소를 나열해야 하는 경우 예전 IE 를 고려하던 시절에는 간격(여백)을 주기위해 아래와 같은 방법을 썼다

나열되는 요소에 padding 또는 margin 으로 좌우 간격을 주고 부모요소에서 margin 을 마이너스(-) 주기
나열되는 요소에 오른쪽 마진 (margin-right) 또는 왼쪽 마진 (margin-right)을 주고 처음 또는 마지막 요소에는 마진을 0으로 설정하기

하지만 이럴 경우 부모 요소에서 스타일을 주어야 하고 고정적이지 않은 요소의 수일 경우 마지막 여백 등으로 인해 css 를 여러번 써야하는 경우가 생긴다

특히 요소를 display:inline-block 해야하고 inline-block 을 사용하다보면 부모의 font-size 에 영향을 받는 경우가 생겨서 css 가 더 복잡해진다

요새는 IE를 따로 신경 쓸 필요가 없으니 flex 를 이용해 요소를 나열하고 간격을 주면 쉽다

구문

/* 단일 값으로 사용할 때 */
.element {
	display: flex;
    gap: 10px; /* 상,하,좌,우 동일 값*/
}

/* 이중 값으로 사용할 때 */
.element {
	display: flex;
    gap: 10px 5px; /* 상하, 좌우 */
}

gap에 사용하는 값은 꼭 px 단위가 아니더라도 css 상에서 사용하는 모든 단위를 쓸 수 있다

gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;
gap: 16%;
gap: 100%;
gap: calc((100% - 20px) / 3)

예제

See the Pen flex에서 gap 사용하기 by woox (@woox-styler) on CodePen.

위 예제는 상하좌우를 동일하게 설정하였다.

조건에 맞는 자식요소를 가진 부모 요소를 선택하는 has() 선택자

woox — Tue, 2 Jan 2024 18:39:04 +0900

개요

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.

위 예제는 내가 실무에서 자주 사용하는 패턴이다

특정 요소에 마우스 호버 될 경우 호버된 대상이 아닌 다른 대상들에게 영향을 줘야 할 때 사용한다.

지원 브라우저

대부분의 브라우저에서 사용가능 하다

flex 를 이용해 자식 요소를 브라우저 높이(height: 100%)에 따라 내부 스크롤 자동 생성

woox — Sun, 31 Dec 2023 18:27:23 +0900

보통 스크롤이 없는 height 100% 페이지를 구현하다 보면

내부에 컨텐츠가 많아져 내부 스크롤바가 필요할 경우가 있다.

이론적으로는 flex 를 사용하면 당연히 가능할 것 같은데 막상 구현하다 보면 생각과는 다르게 동작하지 않는 경우가 있다

기본적인 구조는 아래와 같이 구현할 경우

<style>
	html, body {height: 100%;margin: 0;font-size: 20px;}
	main {display: flex;flex-direction: column;flex: 1 1 auto;background: purple;height: 100%;}
	header {
		flex: 0 0 80px;
		background: #FFAEAE;
	}
	section {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		background: #EAE9E9;
	}
	section h2 {flex: 0 0 auto;}
	section .scroll_content {flex: 1 1 auto;overflow-y: auto;background: #D9D9D9;}
	footer {
		flex: 0 0 80px;
		background: #BEFFAE;
	}
</style>
<main>
	<header>헤더</header>
	<section>
		<h2>컨텐츠</h2>
		<div class="scroll_content">
			내용이 늘어나서 줄이 길어 집니다.<br>
			내용이 늘어나서 줄이 길어 집니다.<br>
            ............
		</div>
	</section>
	<footer>푸터</footer>
</main>

위와 같이 구현할 것이다.

한데 flex 로 이루어진 레이아웃 안에서 다시 flex 를 이용해 자식요소를 flex-basis: auto 를 이용해

고정 pixel 이 아닌 auto 로 여백을 채울경우 제대로 동작하지 않는다.

See the Pen flex 내부 flex 로 height : auto 및 scrollbar by woox (@woox-styler) on CodePen.

단순한 flex 레이아웃일 경우 잘 동작하지만 flex flex-basis: auto (height: 100%)안에서 다시 flex flex-basis: auto 일 경우 제대로 동작하지 않는다.

이때, flex-basis: auto 인 요소에 min-height: 0 을 주면 원하는 대로 잘 동작한다.

<style>
	html, body {height: 100%;margin: 0;font-size: 20px;}
	main {display: flex;flex-direction: column;flex: 1 1 auto;background: purple;height: 100%;}
	header {
		flex: 0 0 80px;
		background: #FFAEAE;
	}
	section {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		background: #EAE9E9;
		min-height: 0;
	}
	section h2 {flex: 0 0 auto;}
	section .scroll_content {flex: 1 1 auto;overflow-y: auto;background: #D9D9D9;}
	footer {
		flex: 0 0 80px;
		background: #BEFFAE;
	}
</style>
<main>
	<header>헤더</header>
	<section>
		<h2>컨텐츠</h2>
		<div class="scroll_content">
			내용이 늘어나서 줄이 길어 집니다.<br>
			내용이 늘어나서 줄이 길어 집니다.<br>
            ..................
		</div>
	</section>
	<footer>푸터</footer>
</main>

See the Pen flex 내부 flex 로 height : auto 및 scrollbar - min-height: 0; by woox (@woox-styler) on CodePen.

기본적으로 min-height 값은 auto 인데 이게 flex-basis 보다 우선적으로 적용되기 때문에 일어나는 현상이다.

나는 height 를 기준으로 예를 들었지만 width 즉 가로 형태에서도 동일하다 그때엔 min-width: 0을 주면 된다

[CSS 함수] min(), max(), clamp()

woox — Sun, 31 Dec 2023 17:04:17 +0900

min() 사용법

min() 함수는 하나이상의 인자값을 사용할 수 있으며, 그 중 가장 작은 값을 반환한다.

보통 우리가 흔히 사용하는 width, max-width 와 비슷하다

일반적으로 컨테이너가 1280px 이상으로 커지지 않기를 원할 경우

아래와 같이 스타일을 사용한다면

.container {
	width: 100%;
    max-width: 1280px;
}

아래와 같이 min() 함수를 이용할 수 있다.

.container {
	width: min(100%, 1280px);
}

반응형 마크업 시 padding 또는 margin 에 사용하면 편하다.

max() 사용법

max() 함수는 하나이상의 인자값을 사용할 수 있으며, 그 중 가장 큰 값을 반환한다.
보통 우리가 흔히 사용하는 width, min-width 와 비슷하다

컨테이너가 1280px 이하로 작아지지 않기를 원할 경우
아래와 같이 스타일을 사용한다면

.container {
	width: 100%;
    min-width: 1280px;
}

아래와 같이 max()를 이용할 수 있다

.container {
	width: max(100%, 1280px);
}

clamp() 사용법

clamp(최소값, 선호값, 최대값)

clamp() 함수는 같이 제공된 인자값으로 최소값과 최대값 사이의 선호값으로 자동 선택해준다.

.title {
	width: clamp(100px, 50%, 1280px);
}

위와 같이 사용시 최소값은 100px, 최대값은 1280px 이며 기본적으로 선호값인 50%로 width 가 설정된다

즉 해당 요소의 width가 50%로 설정되지만 100px ~ 1280px 사이에서만 설정된다

나 같은 경우엔 font-size에 많이 사용한다.

일반적으로 브라우저가 10px 이하의 폰트 사이즈를 구현하지 못하기 때문에

반응현 구현 시 아래와 같이 사용한다.

.title {
	font-size: clamp(10px, 12vw, 30px);
}

모바일 환경에서 적용하기 좋다

현재 지원가능한 브라우저는 아래와 같다.

min(), max(), clamp() : can i use