01/08 회고

CSS적용

가로 가운데/ 세로 가운데

1. 가로 가운데 정렬

<style><!-- (1) -->
.outerSample{
}
.innerSample{
	margin: auto;
}
</style>

<style><!-- (2) -->
.outerSample{
	display: flex;
	justify-content : center;
}
.innerSample{
}
</style>

(1) display : block;

(2) display : flex;

 

2. 세로 가운데 정렬

<style><!-- (1) -->
.outerSample{
	position: relative;
}
.innerSample{
	position: absolute;
	top: 50%;
	margin-top: -50px; <!-- (-(안쪽div의 높이/2)) -->
}
</style>
<style><!-- (2) -->
.outerSample{
	position: relative;
}
.innerSample{
	position: absolute;
	top: 50%;
	transform: translate(0, -50%); <!-- (가로이동거리, 세로이동거리) -->
}
</style>
<style><!-- (3) -->
.outerSample{
	display : flex;
	align-items : center;
}
.innerSample{
	margin: auto;
}
</style>

(1) display : block; / margin

(2) display : block; / transform

(3) display : flex;

 

3.  가로, 세로 가운데 정렬

<style><!-- (1) -->
.outerSample{
	position: relative;
}
.innerSample{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
}
</style>
<style><!-- (2) -->
.outerSample{
	position: relative;
}
.innerSample{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
<style><!-- (3) -->
.outerSample{
	display : flex;
	justify-content: center;
	align-items : center;
}
.innerSample{
}
</style>

(1) display : block; / margin

(2) display : block; / transform

(3) display : flex;

 

 

GROUP BY에 영향 받지 않는 합계 산출

SELECT
	<!-- Group By 기준 -->
	(CASE WHEN stats = '1' THEN 'level 1이하' 
		WHEN stats = '2' THEN 'level 2' 
		WHEN stats = '3' THEN 'level 3'
        WHEN stats = '4' THEN 'level 4' 
        WHEN stats = '5' THEN 'level 5' ELSE 'level 6 이상' END) AS statsGb,
    <!-- Group By를 이용한 집계 -->
	SUM(cnt) AS sumCount,
    <!-- Group By와 상관 없이 집계 -->
	total.totsumCount
FROM public.count_stats,
    <!-- Group By와 상관 없는 부분을 SubQuery로 구현 -->
	( SELECT SUM(cnt) AS totsumCount FROM public.count_stats ) AS total
GROUP BY stats, total.totsumCount;