[til] 220318 - css animations, 이코테 정렬 알고리즘

💻 오늘 한 일 💻

☑️ 코코아톡 클론코딩 - more animations ~ no mobile media query (클론 끝)

☑️ BOJ - #7576 토마토

☑️ 이코테 - 정렬 강의 + 예제

 

코코아톡 클론코딩 - animations:

@keyframes heartBeat {
    0%{
        color: white;
    }
    50%{
        color: tomato;
        transform: scale(1.3);
    }
    100%{
        color: white;
    }
}
.open-post__heart-count:hover i {
    will-change: transform;
    animation: heartBeat 1s linear infinite;
}

* will-change: transform ➡️ 전에는 transform animation이 흔들리면서 불안정하게 작동했는데, 이 코드로 브라우저에게 animation이 작동할 것이라고 알려줘서 브라우저가 그래픽 카드를 사용해 accelerates the animation. 아무튼 애니메이션이 안정적으로 작동하도록 하는 코드. ➡️ 애니메이션이 흔들리거나 그럴 때 작성해주기.

✔️ 문법

.reply:focus-within .reply__column:first-child {
    display: none;
}

* reply 클래스에 focus-within 될 때 reply__column:first-child 에 적용.

 

✔️ fade 되게 하는 법 (+ transition)

.reply .reply__column:first-child,
.reply .fa-smile-wink,
.reply button {
    transition: opacity .3s ease-in-out;  /* transition 이 있어야 한 순간에 안 사라짐 */
}

.reply:focus-within .reply__column:first-child,
.reply:focus-within .fa-smile-wink,
.reply:focus-within button {
    opacity: 0;
}

* 여기서 주의할 건 opacity든 뭐든 이벤트 발생 시 적용할 속성을 transition과 함께 적용하려면 원래 element의 css 파트에다가 transition을 설정해줘야 한다는 점.

transition: [transition 적용할 속성] [초] [효과]  이런식. [transition 적용할 속성] 이 만약 전체 속성을 넣을 거면 그냥 'all' 해주면 됨.

 

✔️ mobile media query 모바일 화면 사이즈만 제공하도록 하는 법 : 

<div id="no-mobile">
        <span>Your screen is too big!!</span>
    </div>

위 코드를 모든 html 에 추가해준다.

no-mobile 전용 css 를 따로 만들어주고 (components file 에 추가)

#no-mobile {
    position: absolute; /* goes on top of everything */
    z-index: 99; /* 숫자 높게 설정해서 어떤 화면보다 더 위에 있도록 */
    height: 100vh;
    background-color: orange;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    top:0;
}

@media screen and (max-width:645px) {
    #no-mobile {
        display: none;
    }
}

여기서 포인트는 position: absolute 랑 z-index:99 (설명은 주석에)
#no-mobile div를 생성해 화면이 너무 크다는 메시지를 보여주는 커다란 div를 만듦. (가장 위에 오도록)

사용자가 화면을 645px 넘어서 넓히면 display: none; 이 적용되고, 그 이하일 때는 display:flex; 적용.

 

 

 

📝 정렬 4가지 정리:

✔️ 선택 정렬 (1/4) : <미처리 데이터 중 가장 작은 데이터를 가장 앞의 데이터와 자리 바꿔주는 과정> 을 반복

- 탐색 범위는 매번 줄어듦.

- 매번 가장 작은 원소를 탐색해야 함. -> 이중 for 문

array = [7, 5, 8, 6]

for i in range(len(array)):
	min_index = i
    for j in range(i+1, len(array)):
    	if array[min_index] > array[j]:
        	min_index = j

이제 j 에 가장 작은 값의 원소 인덱스가 저장됨.

그 후 아래처럼 스왑을 통해 <미처리 데이터 중 가장 작은 원소> 와 <가장 앞의 원소> 의 자리를 바꿔줌.

array[i], array[min_index] = array[min_index], array[i]
# 파이썬은 한 줄로 swap 가능

시간복잡도: O(N^2)

 

✔️ 삽입 정렬 (2/4) : 미처리 데이터를 하나씩 골라 적절한 위치에 삽입

(왼쪽 데이터들과 비교해서 적절한 위치로 이동시킨다)

array = [7, 5, 8, 6]

for i in range(1, len(array)):
    for j in range(i, 0, -1):  # 인덱스 거꾸로 ( 왼쪽 데이터들과 비교 )
    	if array[j] < array[j-1]:
        	array[j], array[j-1] = array[j-1], array[j]  # 자기보다 작은 데이터 만나면 멈추고 그 위치로
        else:
        	break

시간복잡도: O(N^2)
현재 리스트의 데이터가 거의 이미 정렬된 상태라면 매우 빠르게 동작. 최선의 경우 O(N) (이미 다 정렬된 경우)

 

✔️ 퀵 정렬 (3/4) : 기준 데이터 (Pivot) 를 설정, <(왼쪽에서부터) 기준보다 큰 데이터>와 <(오른쪽에서부터) 기준보다 작은 데이터>의 위치 바꿔 분할 작업 후 다시 각각의 분할된 부분에서 다시 분할 작업 반복. 일반적으로 가장 많이 사용. 빠른 정렬 알고리즘.

- 하다보면 위치가 엇갈리는 경우 (피벗보다 큰게 오른쪽에 있고 작은게 왼쪽에 있을 때) 가 생기는데 이 때는 <피벗> 과 <작은 데이터>의 위치를 바꾼다.

- 호어분할방식을 사용, 피벗을 리스트의 첫 번째 데이터로 설정.

- 재귀적:다시 왼쪽 데이터 묶음에 대해 퀵 정렬, 오른쪽에도 다시 퀵 정렬.

array = [7, 5, 8, 6]

def quick_sort(array, start, end): #(배열, 첫번째 원소 인덱스, 마지막 인덱스)
	if start >= end: # 원소가 1개인 경우 종료
    	return
    pivot = start    # 피벗은 첫 번째 원소
    left = start + 1 
    right = end      
    while (left <= right):   # 분할 작업 (자리 교체의 반복) (엇갈리지 않을 때까지)
    	while (left <= end and array[left] <= array[pivot]):     # 피벗보다 작은 데이터 찾기
        	left += 1
        while (right > start and array[right] >= array[pivot]):  # 피벗보다 큰 데이터 찾기
        	right -= 1
        if (left > right):   #엇갈렸다면 <피벗>과 <작은 데이터> 자리 교체
        	array[right], array[pivot] = array[pivot], array[right]
        else:                #엇갈리지 않았다면 <작은 데이터>와 <큰 데이터> 자리 교체
        	array[left], array[right] = array[right], array[left]
    # 분할 작업 완료 후 각 분할에 대해 다시 분할 작업 수행 (재귀적으로)
    quick_sort(array, start, right-1)
    quick_sort(array, right+1, end)
        
quick_sort(array, 0, len(array)-1)

아래는 더 짧은 방법: (단 더 비효율적)

def quick_sort(array):
	if len(array) <= 1:   # 원소가 하나 이하면 종료
    	return array
    pivot = array[0]
    tail = array[1:]    # 피벗을 제외한 리스트
    
    left_side = [x for x in tail if x <= pivot] # 분할된 왼쪽 부분 리스트
    right_side = [x for x in tail if x > pivot] # 분할된 오른쪽 부분 리스트
    
    return (quick_sort(left_side) + [pivot] + quick_sort(right_side))  # 각각 정렬 후 다시 합침

시간복잡도: O(NlogN)
최악의 경우 O(N^2) (피벗이 중간 값이 아니라 극단의 값일 때) 

 

✔️ 계수 정렬 (4/4) : 데이터의 크기 범위가 제한되어 정수 형태로 표현할 수 있을 때

각 데이터가 몇개 있는지 인덱스마다 값을 새로운 배열을 만들어 저장.

array = [7, 5, 9, 0, 3, 1, 6, 2, 9, 1, 4, 8, 0, 5, 2] # 0, 1, 2는 두 번씩, 나머지는 한 번씩 있음.
count = [0] * (max(array)+1)  # 0부터 가장 큰 값까지 전체를 포함하도록 새로운 배열 생성

for i in range(len(array)):
	count[array[i]] += 1  # 배열의 원소 값 = count 배열의 인덱스 값. 해당 인덱스에 원소의 개수를 저장.
for i in range(len(count)):
	for j in range(count[i]):  # 원소의 개수(횟수), 즉 count[i]의 값만큼 해당 원소 출력
    	print(i, end=' ')

- 만약 K, 즉 배열의 최대값이 데이터 전체 개수에 비해 너무 클 때는 비효율적.
- 동일 값을 가지는 데이터가 많을 때는 효율적.

출처: 이것이 취업을 위한 코딩 테스트다 with 파이썬

시간복잡도: 최악의 경우에도 O(N+K)   (K: 데이터 중 최댓값, 즉 count 배열의 크기)

 

※ 파이썬에서 제공하는 표준 라이브러리 .sort()를 사용하면 최악의 경우에도 시간복잡도가 O(NlogN) 

따라서 문제에서 라이브러리 사용을 제한하지 않으면 이를 사용

- 유튭 강의 들으면서 동시에 정리하는 식으로 해봤는데 시간이 너어~무 오래걸린다.

그냥 강의 틀어놓고 책 보면서 이해한 담에 간단히 정리해보는 게 나을 듯.