짧은코딩

처음에 배경이 나왔다가 사라지게 하기 @keyframes hideSplashScreen { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } #splash-screen { background-color: var(--yellow); position: absolute; height: 100vh; width: 100vw; top: 0; display: flex; justify-content: center; align-items: center; font-size: 132px; z-index: 3; animation: hideSplashScreen 1s ease-in-out forwards; } @keyframes를 이용한다. 그리고 animation에..

플로이드 워셜 알고리즘 -다익스트라 vs 플로이드 다익스트라 알고리즘은 한 지점에서 다른 특정 지점까지의 최단 경로는 구하는 경우에 사용한다. 반면에 플로이드 워셜 알고리즘은 모든 지점에서 다른 모든 지점까지의 최단 경로를 모두 구해야 하는 경우에 사용한다. 또한 다익스트라 알고리즘은 그리디 알고리즘, 플로이드 알고리즘은 다이나믹 프로그래밍이라는 특징이 있다. -플로이드의 시간 복잡도 노드의 개수가 N개일 때, 알고리즘상으로 N번의 단계를 수행하고 단계마다 O(N^2)의 연산을 통해 현재 노드를 거쳐 가는 모든 경로를 고려한다. 따라서 플로이드 워셜 알고리즘의 시간 복잡도는 O(N^3)이다. 그리고 플로이드 알고리즘은 2차원 리스트에 모든 노드에 대하여 다른 모든 노드로 가는 최단 거리 정보를 담아야 한..

z-index z-index는 div가 있는 위치가 맨 앞에서부터 몇 번째인지 나타 낸다. 즉, layer의 순서가 몇 번째인지를 나타낸다. display 작업을 하거나 postition이 고정되어 있으면 layer를 갖는다. z-index의 기본값은 0이며 더 큰 숫자를 가진 부분이 위에 겹쳐서 보이게 된다. #chat-screen .status-bar { z-index: 2; } #chat-screen .alt-header { top: 10px; z-index: 1; } 이러면 status-bar가 더 위에 있다. 그리고 고정된 상단바에서 사용할 때는 상단바에 배경색을 따로 또 줘야했다. 그래야 지나간 요소들이 덮어져서 확실히 안보인다. => z-index는 absolute postion이나 fixe..

More -html No Service 18:43 110% More . 꾸릉이 010-1234-5678 Calendar Account Emotions Themes Suggestions KaKao Story KaKao Story 1 . -css .more-screen .icon-row { margin-top: 35px; } .more-suggestions { margin-top: 50px; border-top: var(--main-border); padding-top: 40px; } .more-suggestions__title { margin-bottom: 30px; } .more-suggestions__icons { display: flex; } .more-suggestions__icon { margin..

Find -html No Service 18:43 110% Find . QR Code Add by Contacts Add by ID Invite Recommended Friends You have no recommended friends. Open Chat Go to Openchat Home #리버풀 #soccer#liverpoll#salah 325 members Active 342 #리버풀 #soccer#liverpoll#salah 325 members Active 342 1 . -css .find-icons { display: flex; justify-content: space-between; } .find-icons__icon { display: flex; flex-direction: column;..

가장 빠른 길 찾기 최단 경로 알고리즘은 가장 짧은 경로를 찾는 알고리즘이라서 길 찾기 문제라고도 불린다. 컴퓨터공학과 수준에서는 다익스트라 최단 경로 알고리즘, 플로이드 워셜, 벨만 포드 알고리즘, 이렇게 3가지이다. 이 중 다익스트라 최단 경로 알고리즘, 플로이드 워셜이 코딩 테스트에서 가장 많이 등장하는 유형이다. 다익스트라 최단 경로 알고리즘 다익스트라 알고리즘은 그래프에서 특정한 노드에서 출발하여 다른 노드로 가는 최단 경로를 구해주는 알고리즘이다. 다익스트라 알고리즘은 경로에 음수가 없을 때 정상적으로 동작한다. 다익스트라 알고리즘은 가장 비용이 적은 노드를 선택해 과정을 반복하여 그리디 알고리즘으로 분류된다. -알고리즘 원리 출발 노드 설정 최단 거리 테이블 초기화 방문하지 않은 노드 중 최..

-html No Service 18:43 110% Chats 꾸릉이 밀웜이 먹고싶다 21:22 1 1 . friends.html에서 코드를 복붙하고 수정했다. -style.css .main-screen { padding: 0px var(--horizontal-space); } 그리고 .main-screen에 padding을 준다. 하지만 이로 인해 freinds.html에서 저 정보란의 간격도 벌어진다. 그래서 frinds.css에다가 margin-top: -10px을 해준다. #friends-display-link { text-align: center; display: block; background-color: #fafafa; padding: 15px 0px; font-size: 18px; margi..

이유 및 코드 강의를 보며 만들었던 emotion-diary 프로젝트를 큰 흐름을 기준으로 분석해보려고 한다. 아직은 리액트의 로직을 잘 모르는 것 같아서 분석을 하면서 정리하면 도움이 될 것이라고 생각한다. -깃허브 https://github.com/5hyun/emotion-diary GitHub - 5hyun/emotion-diary Contribute to 5hyun/emotion-diary development by creating an account on GitHub. github.com 코드는 여기서 보면된다. 초기 설정 1. 폰트, 레이아웃, 이미지 등을 세팅 2. 버튼, 헤더 등 여러 페이지에서 공통으로 사용 할 컴포넌트 세팅 App.js 1. 복잡한 컴포넌트의 로직 분리를 하기 위해 us..

https://www.acmicpc.net/problem/1931 1931번: 회의실 배정 (1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다. www.acmicpc.net 해결법 이 문제는 회의 종료 시간을 기준으로 정렬을 한다. 그리고 맨 처음 회의는 무조건 들어간다. 맨 처음 끝나는 시간을 기록하고 다음 회의 시작 시간과 비교한다. 만약 앞의 회의가 끝나는 시간보다 다음 회의 시작 시간이 같거나 크면 그 회의는 진행할 수 있다. 이런식으로 구현하면된다. 하지만 문제점은 저렇게 구현하면 시작 시간과 끝나는 시간이 같은 회의에서 틀리게 된다. 그렇기에 먼저 시작 시간으로 정렬을 한 번 해주고 나서 종료 시간을 정렬하면 해결된다. 코드 n = int(input()) ary = [] ..

하단 바 만들기 -html -css .nav { /* 아래에 고정 */ position: fixed; bottom: 0; width: 100%; /* 이거 안하면 아이콘이 몰려있다. */ background-color: #f9f9fa; padding: 20px 50px; box-sizing: border-box; /* 이거 해야 아래 고정 시 ellipsis도 보인다. */ border-top: 1px solid rgba(121, 121, 121, 0.3); } .nav__list { display: flex; justify-content: space-between; } .nav__link { color: #2e363e; } 이렇게 나오게 된다. box-sizing 박스를 만들고 200px의 너비를 준다..