본문 바로가기

분류 전체보기

 (65)
어떻게 사랑할 것인가 -장영희- 중학교 국어 수업 위해 사서 읽었던 책... 고인이 된 장영희 교수님을 서강대 교정에서 뵐 순 없지만, 교수님의 말씀처럼 ‘책을 통해 만나’ 깊은 대화를 나눌 수 있었다. 중학교 때 ‘만나 뵈었을’ 때보다 더 공감, 이해되는 부분이 많았고 종강 이후 내 생활에 대해 되돌아보는 계기가 되었다. 특히 중간에 수록된 교수님의 편지 내용과 인생을 짝사랑에 비유한 부분은 오랜만에 내 마음속 깊은 울림을 주었다. “...하지만 삶은 조각 퍼즐 맞추기 같은 것입니다. 지금 들고 있는 마음의 조각이 여러분 삶 전체의 그림 중 어디에 속하는지는 긴 세월이 지난 다음에야 알 수 있습니다. 지금 조금 아파도, 남보다 뒤떨어지는 것 같아도 바로 그 경험이 훗날 여러분의 삶을 풍부하고 의미있게 만드는 힘이 될 수 있습니다.” ..
Visual Studio Code Live Server 플러그인으로 웹 개발 쉽게 하자 HTML / CSS / JS 등으로 웹 개발을 할 때, 수정된 사항을 직접 확인하기 위해 VS Code에서 저장하고, 웹브라우저에서 새로고침하는 작업을 반복하는 경우가 많다.필자는 왼쪽에 에디터, 오른쪽에 브라우저를 띄워 놓고 작업하는데 계속해서 프로그램을 왔다갔다 하면서 조작하는 게 여간 귀찮은 일이 아니었다.이런 불편함을 해소해 줄 비주얼 스튜디오 코드의 플러그인을 소개한다. Live Server 플러그인은 Visual Studio Code 에디터에서 저장`(Ctrl + S || Cmd + S)`이 감지되면 자동으로 로컬 서버를 통해 웹브라우저에 수정사항을 반영해 보여준다.Visual Studio Code의 '확장' 탭에서 "Live Server"를 검색하여 설치한다. 설치된 후 확인할 html/ht..
Neumorphism (뉴모피즘) CSS로 만들기 1. 뉴모피즘 소개 디자인 커뮤니티인 Dribble에 한 디자이너가 새로운 형태의 UI 디자인을 올렸고, 이것이 큰 호응을 얻으면서 뉴모피즘은 2020년도에 주목받는 UI 트렌드 중 하나가 되었다. (New + Skeuomorphism = Neumorphism) 이를 웹사이트에 적용하기 위한 효과적이면서도 간단한 방법을 찾다 보니 box-shadow 속성을 이용하면 비교적 쉽게 구현 가능하다는 사실을 알게 되었다. 1-1. Neumorphism.io 사용 우선 슬라이더로 다양한 옵션을 조절해 복사 -붙여넣기 가능한 CSS 코드를 만들어주는 서비스인 Neumorphism.io를 소개하고자 한다. 이를 이용하면 손쉽게 원하는 뉴모피즘 효과에 해당하는 코드를 얻을 수 있다. Neumorphism/Soft UI..
웹사이트 상단 진행바 넣기 / HTML 16진수 색상코드 쉽게 얻는 법 1. Progress Bar 적용하기스크롤이 있는 페이지에서, 페이지 상단에 현재 어느 정도까지 읽었는지 표시되는 Progress Bar를 적용하는 방법을 다뤄보고자 한다. 위 사진과 같이 읽은(스크롤한) 정도에 따라 차오르는 진행바는 다음과 같은 내용을 웹페이지의 `body` 태그 안에 넣어서 적용할 수 있다.  1-1. PrognRoll jQuery 플러그인 CDN으로 적용  height 우측에 있는 숫자를 수정해서 진행바의 굵기를 설정할 수 있디. 1-2. 색상코드 찾아서 넣기진행바의 색깔은 16진수 색상코드를 입력해서 설정하는데, 위 예시의 경우는 `#ab9bbf`으로, 연보라색이다.갓구글 검색을 이용하면 색상코드 값을 쉽게 구할 수 있는데, 구글에 위 예시인 `#ab9bbf`를 ..
세그먼트 트리 (Segment Tree) - C/C++로 설명 세그먼트 트리(Segment Tree)는 효율적으로 구간합이나 최소값, 최대값을 구하는 데 매우 유용한 자료구조이다. 특히, 데이터가 자주 업데이트되면서도 특정 구간의 값을 빠르게 조회해야 하는 상황에서 효과적이다. 다음은 세그먼트 트리의 기본 개념과 사용법을 예제를 통해 정리한 내용이다.세그먼트 트리 - 쓰임새세그먼트 트리는 연속적인 데이터가 있을 때, 특정 범위의 합/ 최소, 최대값 등을 구할 때 유용하게 활용될 수 있다.특정 구간의 합을 구하는 방법에 대해 살펴보자면, 일반적으로 다음과 같은 방법이 떠오른다..   1. $arr[l] + arr[l+1] + ... + arr[r-1] + arr[r]$을 일일히 더해 구하는 방법  2. $i$번째까지의 합을 저장하는 배열을 하나 더 만들어서, 조금 더..
SwiftUI로 API에서 JSON 데이터 불러오는 방법: 아이폰 날씨 앱 개발기 1. Open API 날씨 어플리케이션 틀 만들기 Open API를 활용하여 날씨 어플리케이션의 틀을 만들어보고자 알아보았다. 기존 UIKit 방식에 비해 SwiftUI는 자료가 그리 많지는 않았다. 먼저 날씨 정보를 제공해주는 API를 찾아야 하는데, Dark Sky API는 새로운 사용자를 받지 않고 곧 서비스 종료될 것이라 하기에 대안을 찾았다. 1-1. Current Weather Data API 개요 결론적으로 OpenWeatherMap에서 제공해주는 Current Weather Data API를 이용하기로 하였다. openweathermap.org/api Weather API - OpenWeatherMap Please sign up and use our fast and easy-to-work ..
스크롤에 따라 애니메이션 효과 적용해주는 간단 라이브러리: AOS 1. AOS(Animate On Scroll) 라이브러리 소개가끔 웹서핑을 하다 보면 스크롤 위치에 따라 글자, 사진 등의 컨텐츠가 나타나는 효과가 적용된 사이트를 볼 수 있다.  스크롤을 했을 때 요소에 나타나기 애니메이션 효과를 구현해주는 라이브러리를 소개하고자 한다.바로 `AOS(Animate On Scroll Library)`이다. 간단한 적용 예시와 설명은 라이브러리 홈페이지에서도 확인할 수 있다.https://michalsnik.github.io/aos/ AOS - Animate on scroll libraryAOS Animate On Scroll Library Scroll downmichalsnik.github.io 2. 준비 과정혹 JavaScript를 다루는 방법을 모르더라도, `div`..
Vim과 PuTTY 손쉽게 사용하자! 학교 프로그래밍 실습 시간에 Vim을 사용해 프로그래밍 중인데 사용이 불편하다면? vimrc 파일을 수정(생성)하여 좀 더 쉽게 사용할 수 있게 하자. vimrc? Vim 편집기의 각종 설정 사항을 저장하는 파일 Putty 등의 프로그램에 로그인하여 접속한 후 vi .vimrc를 타이핑해 vimrc 파일을 생성해보자. 빨간색 강조된 줄들 정도 입력해 봅시다 set number : 줄 번호를 표시함 set ai : Auto Indent (자동 들여쓰기) set si : Smart Indent set cindent : c언어 형식 들여쓰기 적용 set shiftwidth=4 : 들여쓰기(탭) 간격을 4칸으로 set tabstop=4 : 탭 문자 한번에 backspace로 지우기 가능 set title : 창..
티스토리 블로그 상단바(메뉴바) 애플 홈페이지 느낌 내기 1. Apple 홈페이지 메뉴바 둘러보기애플사 홈페이지는 화려한 전환 효과와 다채로운 애니메이션으로 유명하다. 그중에서도 특히 나의 블로그에 적용하고 싶었던 부분은 애플 특유의 반투명 블러 이펙트(뿌연 느낌?)가 적용된 고정 상태바이다. 티스토리의 HTML / CSS 편집 기능을 통해 블로그에 이러한 느낌을 내는 방법을 알아보자. 2. Tistory CSS 수정하기 티스토리 블로그에서 상단바를 담당하는 CSS 코드는 `#header` 부분이다. 이 부분에 상단바의 위치, 너비, 높이, 색상 등 속성이 서술되어 있다. 이 CSS 코드를 수정하기 위하여 블로그 관리 홈으로 들어간다.티스토리에서 HTML / CSS 소스 코드를 수정하는 방법은 대부분 알고 있으리라 생각하지만 혹시 모르는 분들을 위해 서술하겠다..
[C/C++] 백준 11092 Safe Passage 11092 Safe Passage 11092번: Safe Passage A group of friends snuck away from their school campus, but now they must return from the main campus gate to their dorm while remaining undetected by the many teachers who patrol the campus. Fortunately, they have an invisibility cloak, but it is only lar www.acmicpc.net C++ #include #include #include using namespace std; vector list; int DP (int e) { if(..
[C/C++] 백준 14501 퇴사 14501 퇴사 14501번: 퇴사 첫째 줄에 백준이가 얻을 수 있는 최대 이익을 출력한다. www.acmicpc.net 마지막 날부터 거꾸로 생각하면 풀기 쉬워진다. DP[i]: n 번째 날부터 i 번째 날까지 일했을 때 얻는 최대 이익. DP[i]는 두 가지 경우로 나눌 수 있는데, i 번째 날에 잡힌 상담을 하는 경우와 그렇지 않은 경우이다. i 번째 날에 잡힌 상담을 하지 않는 경우: DP[i] = DP[i + 1]과 같다 할 수 있다. i 번째 날에 잡힌 상담을 하는 경우: DP[i] = DP[ i + (i 번째 날에 잡힌 상담 일수)] + (i 번째 날에 잡힌 상담의 금액) 이때 i + (i 번째 잡힌 상담 일수)가 n+1을 넘으면 일을 할 수 없으므로 예외 처리를 해준다. C #include..
[C/C++] 백준 12865 평범한 배낭 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 C #include #define MAX(a, b) (((a) > (b)) ? (a) : (b)) int DP[103][100003]; int w[103]; int v[103]; int main() { int n, k; scanf("%d %d", &n, &k); for (int i = 1; i n >> k; for (int i = 1; i > w[i] >> v[i]; for ..

티스토리툴바