목록전체 글 (454)

개발새발 로그

2. 반응형웹사이트 만들기 - 링크썸네일 설정하기(Open Graph, Twitter Card)

페이스북이나 트위터에 URL을 복사해서 올리면 아래와 같이 썸네일이 나오게된다. 우리가 만들 웹사이트에도 공유하게되면 위와 같이 나오도록 속성을 설정해보자. 먼저 페이스북, LinkedIn 에서의 썸네일을 위한 Open Graph를 설정한다. 페이스북과 Linkedin의 Open Graph 1. property ="og:type" : og는 Open Graph의 약자 -> 여기 content에는 website라는 속성말고도 많은 속성이있다. https://ogp.me/#types Open Graph protocol The Open Graph protocol enables any web page to become a rich object in a social graph. ogp.me 2. 다시 이미지를 보..
HTML 2023. 7. 30. 14:07
1. HTML반응형 웹사이트 만들기 - html의 head에 meta태그 지정

반응형 웹사이트를 만드는 과정을 작성해보았다. 먼저 visual studio code를 열어서 아래와 같이 폴더와 파일을 구성해주는게 시작이다. 기본 시작을 이렇게 시작하면 된다. 이제 index.html에서 visual studio code의 자동완성 기능을 이용해 HTML 기본틀을 생성한다. 그리고 검색엔진과 viewport를 위해 meta태그들을 작성해보자 1. description : 웹페이지 설명 2. keywoeds : 웹페이지의 태그(사용자가 어떤 키워드를 가지고 검색했을 때 이 웹페이지가 나오면 좋을지) -하지만 구글 같은경우에는 이 키워드를 무작위로 작성해서 이 키워드 자체만으로 웹페이지를 사용자에게 보여주진 않는다. (없는 것보단 나으니까) 3. author : 저자 4. viewpor..
HTML 2023. 7. 30. 12:30
[JS] 백준 1011번 : Fly me to the Alpha Centauri - 수학

https://www.acmicpc.net/problem/1011 1011번: Fly me to the Alpha Centauri 우현이는 어린 시절, 지구 외의 다른 행성에서도 인류들이 살아갈 수 있는 미래가 오리라 믿었다. 그리고 그가 지구라는 세상에 발을 내려 놓은 지 23년이 지난 지금, 세계 최연소 ASNA 우주 비행 www.acmicpc.net 수학 알고리즘으로 규칙을 찾아야한다. 💬문제 이해 -아래 그림과 같이 처음과 끝은 1이어야한다. 👁‍🗨규칙 찾기 거리 (y-x) 내용 가동 횟수 1 1 1 2 1 1 2 3 1 1 1 3 4 1 2 1 3 5 1 2 1 1 4 6 1 2 2 1 4 7 1 2 2 1 1 5 8 1 2 2 2 1 5 9 1 2 3 2 1 5 10 1 2 3 2 1 1 6 ..
알고리즘/수학 2023. 7. 30. 02:00
[JS] 백준 9251번 : LCS - DP문제

https://www.acmicpc.net/problem/9251 9251번: LCS LCS(Longest Common Subsequence, 최장 공통 부분 수열)문제는 두 수열이 주어졌을 때, 모두의 부분 수열이 되는 수열 중 가장 긴 것을 찾는 문제이다. 예를 들어, ACAYKP와 CAPCAK의 LCS는 ACAK가 된다. www.acmicpc.net LCS 참고 https://velog.io/@emplam27/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EA%B7%B8%EB%A6%BC%EC%9C%BC%EB%A1%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EB%8A%94-LCS-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-Longest-Comm..
알고리즘/DP 2023. 7. 29. 02:43
[JS] 백준 7569번 : 토마토(3차원배열) - 구현문제

https://www.acmicpc.net/problem/7569 7569번: 토마토 첫 줄에는 상자의 크기를 나타내는 두 정수 M,N과 쌓아올려지는 상자의 수를 나타내는 H가 주어진다. M은 상자의 가로 칸의 수, N은 상자의 세로 칸의 수를 나타낸다. 단, 2 ≤ M ≤ 100, 2 ≤ N ≤ 100, www.acmicpc.net 이전에 토마토문제에서 3차원배열을 추가한 것이다. 📋풀이방법 1. 처음에 익은토마토의 위치를 저장한다(well배열) -> 이때 좌표에 0을 추가해서 저장한다(며칠이 걸렸는지를 위해) -처음에 안익은 토마토의 갯수를 세놓는다.(none_well) -visited도 3차원 배열로 선언해줘야한다. 2. [시간초과 주의] well배열의 idx가 well의 length만큼 되었을 때..
알고리즘/구현 2023. 7. 28. 01:17
[JS] 백준 10025번 : 적록색약 - 구현문제

https://www.acmicpc.net/problem/10026 10026번: 적록색약 적록색약은 빨간색과 초록색의 차이를 거의 느끼지 못한다. 따라서, 적록색약인 사람이 보는 그림은 아닌 사람이 보는 그림과는 좀 다를 수 있다. 크기가 N×N인 그리드의 각 칸에 R(빨강), G(초록) www.acmicpc.net 📋풀이방법 1. 적록색약인 사람과 아닌사람을 구분해서 DFS로 상하좌우를 검사해 그룹을 만든다. 2. DFS할 때 visited를 두개를 생성해서 둘이 따로 구분해준다. 🤟내 제출 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs..
알고리즘/구현 2023. 7. 27. 00:55
[JS] 백준 12865 : 평범한 배낭 - DP문제

https://www.acmicpc.net/problem/12865 12865번: 평범한 배낭 첫 줄에 물품의 수 N(1 ≤ N ≤ 100)과 준서가 버틸 수 있는 무게 K(1 ≤ K ≤ 100,000)가 주어진다. 두 번째 줄부터 N개의 줄에 거쳐 각 물건의 무게 W(1 ≤ W ≤ 100,000)와 해당 물건의 가치 V(0 ≤ V ≤ 1,000) www.acmicpc.net 📋풀이방법 1. 첫번째 물건(무게 : 6, 가치 : 13)을 dp배열에 넣어서 검사한다. 2. 두번째 물건(무게 : 4, 가치: 8)을 넣어 검사해본다. 3. 세번째 물거(무게 : 3, 가치 : 6) 4. 이를 반복해준다. 🤟내 제출 const fs = require("fs"); const filePath = process.plat..
알고리즘/DP 2023. 7. 26. 02:52
[JS] 백준 1753 : 최단경로 - 다익스트라

https://www.acmicpc.net/problem/1753 1753번: 최단경로 첫째 줄에 정점의 개수 V와 간선의 개수 E가 주어진다. (1 ≤ V ≤ 20,000, 1 ≤ E ≤ 300,000) 모든 정점에는 1부터 V까지 번호가 매겨져 있다고 가정한다. 둘째 줄에는 시작 정점의 번호 K(1 ≤ K ≤ V)가 www.acmicpc.net 풀이방법 1. 다익스트라 문제이다. 2. DP문제 같으면서 그래프 문제이다. 3. 시작노드를 기준으로 시작해서 4. 갈 수 있는 인접노드를 탐색 후 5. dist 배열에 그 인접노드 까지의 거리를 넣는다. 6. 이때 만약 현재노드에서 인접노드까지의 거리가 시작노드에서 인접노드의 거리보다 짧다면 7. dist를 짧은 거리로 갱신해준다 8. 갱신 완료 후 9. 현..
알고리즘 2023. 7. 25. 16:12
이전 Prev 1 ··· 31 32 33 34 35 36 37 ··· 57 Next 다음