코딩묻은 디자이너

최근 진행중인 사이드 프로젝트의 컨셉은 손글씨 같은 느낌으로 진행중이다.

위와 같은 지글지글한 선을 웹으로 구현하기 위해 선택한 방법은 -> path를 svg화 하여 저장하여 사용하기로 했다(더 좋은 방법이 있다면 댓글 부탁드려요)

문제사항

svg 파일을 background img 로 화면에 구현하면서 문제가 생겼는데

반응형으로 제작하다보니 svg path 선이 화면의 넓이에 영향을 받는 것이다

로그인을 감싸고 있는 path와 비밀번호 아래path는 둘 다 피그마에서는 2px로 export 되었지만 화면 넓이를 늘리면 width의 경향을 받아 다음과 같이 path가 굵어진다.

해결방법

해결방법은 매우 간단

해당 svg 파일에 직접 접근해서 path태그에

를 직접 넣어주면 path값이 고정이 된다

이 태그 안에 직접 넣어준다

나의 svg 파일에는 다음과 같은 속성들이 들어있다 

stroke : path 컬러

stroke-width : path의 굵기 (기본적으로 px값인 것 같다. 다른 단위를 넣어줘도 작동한다. 생략하면 px값)

stroke-linecap : path의 끝 부분을 둥글게 해준다

vector-effect = "none-scaling-stroke" : path의 굵기가 고정된다.

해결✨

https://www.acmicpc.net/problem/1051

문제

N×M크기의 직사각형이 있다. 각 칸에는 한 자리 숫자가 적혀 있다. 이 직사각형에서 꼭짓점에 쓰여 있는 수가 모두 같은 가장 큰 정사각형을 찾는 프로그램을 작성하시오. 이때, 정사각형은 행 또는 열에 평행해야 한다.

입력

첫째 줄에 N과 M이 주어진다. N과 M은 50보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에 수가 주어진다.

출력

첫째 줄에 정답 정사각형의 크기를 출력한다.

풀이

배열에서 벗어나서 오류가 나지 않게 i+a  < N, j+a < M 조건을 걸어줬다

그리고 1씩 늘려가면서 정사각형이 있나 탐색한 후 정 사각형이 있다면 넓이를 계산해서 받아줬다!

python코드

# 1051 숫자 정사각형

N, M = map(int,input().split())

arr = [list(input()) for _ in range(N)]
if N > M:
    k = M
else:
    k = N
ans = 0
max_ans = 0
for i in range(N):
    for j in range(M):
        for a in range(k):
            if i+a < N and j+a < M and arr[i][j] == arr[i + a][j] == arr[i][j+a] == arr[i+a][j+a]:
                ans = (a + 1) * (a + 1)
                if ans > max_ans:
                    max_ans = ans
print(max_ans)

https://www.acmicpc.net/problem/4673

문제

셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다.

양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 만들 수 있다. 

예를 들어, 33으로 시작한다면 다음 수는 33 + 3 + 3 = 39이고, 그 다음 수는 39 + 3 + 9 = 51, 다음 수는 51 + 5 + 1 = 57이다. 이런식으로 다음과 같은 수열을 만들 수 있다.

33, 39, 51, 57, 69, 84, 96, 111, 114, 120, 123, 129, 141, ...

n을 d(n)의 생성자라고 한다. 위의 수열에서 33은 39의 생성자이고, 39는 51의 생성자, 51은 57의 생성자이다. 생성자가 한 개보다 많은 경우도 있다. 예를 들어, 101은 생성자가 2개(91과 100) 있다. 

생성자가 없는 숫자를 셀프 넘버라고 한다. 100보다 작은 셀프 넘버는 총 13개가 있다. 1, 3, 5, 7, 9, 20, 31, 42, 53, 64, 75, 86, 97

10000보다 작거나 같은 셀프 넘버를 한 줄에 하나씩 출력하는 프로그램을 작성하시오.

입력

입력은 없다.

출력

10,000보다 작거나 같은 셀프 넘버를 한 줄에 하나씩 증가하는 순서로 출력한다.

풀이

드디어 푼 셀프 넘버 문제

처음에는 문제 자체를 이해 못했는데 알고보니 어렵지 않은 문제다

지금 현재수 + 수를 쪼갠 수가 list 안에 속하면 지워준다. 그리고 남아있는 list를 출력해준다.

효율적이라고는 할 수 없지만 모든 수를 탐색하는 방법으로 풀었다.

python코드

# 4673 셀프 넘버

arr = []
for i in range(1,10001):
    arr.append(i)

for i in range(1, 10001):
    nums=list(str(i))
    num = i
    for j in range(len(nums)):
        num += int(nums[j])
    if num in arr:
        arr.remove(num)

for i in arr:
    print(i)

https://www.acmicpc.net/problem/3003

문제

동혁이는 오래된 창고를 뒤지다가 낡은 체스판과 피스를 발견했다.

체스판의 먼지를 털어내고 걸레로 닦으니 그럭저럭 쓸만한 체스판이 되었다. 하지만, 검정색 피스는 모두 있었으나, 흰색 피스는 개수가 올바르지 않았다.

체스는 총 16개의 피스를 사용하며, 킹 1개, 퀸 1개, 룩 2개, 비숍 2개, 나이트 2개, 폰 8개로 구성되어 있다.

동혁이가 발견한 흰색 피스의 개수가 주어졌을 때, 몇 개를 더하거나 빼야 올바른 세트가 되는지 구하는 프로그램을 작성하시오.

입력

첫째 줄에 동혁이가 찾은 흰색 킹, 퀸, 룩, 비숍, 나이트, 폰의 개수가 주어진다. 이 값은 0보다 크거나 같고 10보다 작거나 같은 정수이다.

출력

첫째 줄에 입력에서 주어진 순서대로 몇 개의 피스를 더하거나 빼야 되는지를 출력한다. 만약 수가 양수라면 동혁이는 그 개수 만큼 피스를 더해야 하는 것이고, 음수라면 제거해야 하는 것이다.

풀이

자신감 키우는 날~!

list로 받아서 인덱스 순서대로 접근했다.

개수가 정해져 있기 때문에 그 갯수에서 인덱스에 해당하는 것을 뺐다!

python코드

#3003 킹, 퀸, 룩, 비숍, 나이트, 폰

chess = list(map(int,input().split()))

print(1-chess[0], 1-chess[1], 2-chess[2], 2-chess[3], 2-chess[4], 8-chess[5])

https://www.acmicpc.net/problem/11722

문제

수열 A가 주어졌을 때, 가장 긴 감소하는 부분 수열을 구하는 프로그램을 작성하시오.

예를 들어, 수열 A = {10, 30, 10, 20, 20, 10} 인 경우에 가장 긴 감소하는 부분 수열은 A = {10, 30, 10, 20, 20, 10}  이고, 길이는 3이다.

입력

첫째 줄에 수열 A의 크기 N (1 ≤ N ≤ 1,000)이 주어진다.

둘째 줄에는 수열 A를 이루고 있는 Ai가 주어진다. (1 ≤ Ai ≤ 1,000)

출력

첫째 줄에 수열 A의 가장 긴 감소하는 부분 수열의 길이를 출력한다.

풀이

https://namu.wiki/w/%EC%B5%9C%EC%9E%A5%20%EC%A6%9D%EA%B0%80%20%EB%B6%80%EB%B6%84%20%EC%88%98%EC%97%B4

동적 계획법으로 풀어내는 문제

python 코드

#11722 가장 긴 감소하는 부분 수열

N = int(input())
arr = list(map(int,input().split()))

dp = [1] * N

for i in range(1,N):
    for j in range(0,i):
        if arr[i] < arr[j]:
            dp[i] = max(dp[i], dp[j]+1)
ans = max(dp)
print(ans)

https://www.acmicpc.net/problem/1991

문제

이진 트리를 입력받아 전위 순회(preorder traversal), 중위 순회(inorder traversal), 후위 순회(postorder traversal)한 결과를 출력하는 프로그램을 작성하시오.

예를 들어 위와 같은 이진 트리가 입력되면,

• 전위 순회한 결과 : ABDCEFG // (루트) (왼쪽 자식) (오른쪽 자식)
• 중위 순회한 결과 : DBAECFG // (왼쪽 자식) (루트) (오른쪽 자식)
• 후위 순회한 결과 : DBEGFCA // (왼쪽 자식) (오른쪽 자식) (루트)

가 된다.

입력

첫째 줄에는 이진 트리의 노드의 개수 N(1 ≤ N ≤ 26)이 주어진다. 둘째 줄부터 N개의 줄에 걸쳐 각 노드와 그의 왼쪽 자식 노드, 오른쪽 자식 노드가 주어진다. 노드의 이름은 A부터 차례대로 알파벳 대문자로 매겨지며, 항상 A가 루트 노드가 된다. 자식 노드가 없는 경우에는 .으로 표현한다.

출력

첫째 줄에 전위 순회, 둘째 줄에 중위 순회, 셋째 줄에 후위 순회한 결과를 출력한다. 각 줄에 N개의 알파벳을 공백 없이 출력하면 된다.

풀이

트리 문제를 풀 때 가장 고민이 저것을 어떻게 코드로 표현하느냐 인데

노드의 연결상태를 이런식으로 생각하니깐 쉬웠다!

형태는

[A,B,C]

[B,D,.]

.

.

.

이런 식으로 표현해서 0번 인덱스 1번 인덱스, 2번 인덱스로 접근했다

전위 순회 규칙을 찾아내면 중위와 후위는 비슷하게 풀이할 수 있다

python 코드

# 1991 트리 순회
def preorder(n):
    print(arr[n][0],end='')
    if arr[n][1] != '.':
        for i in range(len(arr)):
            if arr[i][0] == arr[n][1]:
                preorder(i)
    if arr[n][2] != '.':
        for i in range(len(arr)):
            if arr[i][0] == arr[n][2]:
                preorder(i)
def inorder(n):
    if arr[n][1] != '.':
        for i in range(len(arr)):
            if arr[i][0] == arr[n][1]:
                inorder(i)
    print(arr[n][0],end='')
    if arr[n][2] != '.':
        for i in range(len(arr)):
            if(arr[i][0]) == arr[n][2]:
                inorder(i)
def postorder(n):
    if arr[n][1] != '.':
        for i in range(len(arr)):
            if arr[i][0] == arr[n][1]:
                postorder(i)
    if arr[n][2] != '.':
        for i in range(len(arr)):
            if(arr[i][0]) == arr[n][2]:
                postorder(i)
    print(arr[n][0],end='')

N = int(input())
arr = []

for t in range(N):
    arr.append(list(map(str,input().split())))

preorder(0)
print()
inorder(0)
print()
postorder(0)

오류상황

eslint를 사용할 때 나타는 오류로

eslint 상에서는 이렇게 빈 div를 사용할 수 없다

해결방법

<div /> 로 닫는 /를 넣어주었다! 생각보다 간단하게 해결;;;

https://www.acmicpc.net/problem/11724

문제

방향 없는 그래프가 주어졌을 때, 연결 요소 (Connected Component)의 개수를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 정점의 개수 N과 간선의 개수 M이 주어진다. (1 ≤ N ≤ 1,000, 0 ≤ M ≤ N×(N-1)/2) 둘째 줄부터 M개의 줄에 간선의 양 끝점 u와 v가 주어진다. (1 ≤ u, v ≤ N, u ≠ v) 같은 간선은 한 번만 주어진다.

출력

첫째 줄에 연결 요소의 개수를 출력한다.

풀이

연결요소를 구해야 하는 문제인데 처음에는 연결요소가 뭘 출력하라는건지 헷갈렸는데

뭉쳐진 덩어리의 갯수를 구하는 문제였다.

더이상 연결된 요소가 없을 때 까지 탐색해야 하므로 dfs 깊이 탐색을 사용했다.

연결관계를 나타낼 리스트 arr과 방문 여부를 체크할 visited 리스트를 만들었다

입력을 받을 때 방향이 없는 그래프라서

arr[u].append(v)
arr[v].append(u)

양방향으로 입력했다.

재귀를 돌면서 만약 방문 했을 경우 visited에 1을 입력하고, 방문하지 않은 경로만 이동한다

dfs를 완료한것은 더이상 탐색할 노드가 없다는 뜻이니 ans += 1을 했다

python코드

# 11724 연결 요소의 개수
import sys
sys.setrecursionlimit(10**6)

def dfs(n):
    for i in range(len(arr[n])):
        if visited[arr[n][i]] == 0:
            visited[arr[n][i]] = 1
            dfs(arr[n][i])

N, M = map(int,input().split())
arr = [[] * (N+1) for _ in range(N+1)]
visited = [0] * (N+1)
ans = 0
for m in range(M):
    u,v = map(int,sys.stdin.readline().rstrip().split())
    arr[u].append(v)
    arr[v].append(u)

for i in range(1, N+1):
    if visited[i] == 0:
        visited[i] = 1
        dfs(i)
        ans += 1
print(ans)

https://www.acmicpc.net/problem/11656

문제

접미사 배열은 문자열 S의 모든 접미사를 사전순으로 정렬해 놓은 배열이다.

baekjoon의 접미사는 baekjoon, aekjoon, ekjoon, kjoon, joon, oon, on, n 으로 총 8가지가 있고, 이를 사전순으로 정렬하면, aekjoon, baekjoon, ekjoon, joon, kjoon, n, on, oon이 된다.

문자열 S가 주어졌을 때, 모든 접미사를 사전순으로 정렬한 다음 출력하는 프로그램을 작성하시오.

입력

첫째 줄에 문자열 S가 주어진다. S는 알파벳 소문자로만 이루어져 있고, 길이는 1,000보다 작거나 같다.

출력

첫째 줄부터 S의 접미사를 사전순으로 한 줄에 하나씩 출력한다.

풀이

처음에는 재귀를 통해 풀었는데 RecursionError가 나와서 그냥 단순 for문을 통해 풀이하도록 바꿨다

슬라이싱을 통해 문자열값의 범위를 지정해서 받아와 배열에 저장한 후 sort로 정렬하였다

python코드

# 11656 점미사 배열

text = input()
arr = []

for i in range(len(text)):
    arr.append(text[i:len(text)])

arr.sort()
for i in arr:
    print(i)

python 재귀 제한 해제

import sys
sys.setrecursionlimit(10**6)