백준 문제 풀이 & 스터디 프로젝트 아이디어 회의 + 가변 그리드
11:00 ~ 18:30 - 강남 커피빈 카페
⏰ 11:00 ~ 15:00
그리디 알고리즘 2839번: 설탕 배달
상근이는 요즘 설탕공장에서 설탕을 배달하고 있다.
상근이는 지금 사탕가게에 설탕을 정확하게 N킬로그램을 배달해야 한다.
설탕공장에서 만드는 설탕은 봉지에 담겨져 있다. 봉지는 3킬로그램 봉지와 5킬로그램 봉지가 있다.
상근이는 귀찮기 때문에, 최대한 적은 봉지를 들고 가려고 한다.
예를 들어, 18킬로그램 설탕을 배달해야 할 때, 3킬로그램 봉지 6개를 가져가도 되지만, 5킬로그램 3개와 3킬로그램 1개를 배달하면, 더 적은 개수의 봉지를 배달할 수 있다.
상근이가 설탕을 정확하게 N킬로그램 배달해야 할 때, 봉지 몇 개를 가져가면 되는지 그 수를 구하는 프로그램을 작성하시오.
첫째 줄에 N이 주어진다. (3 ≤ N ≤ 5000)
상근이가 배달하는 봉지의 최소 개수를 출력한다. 만약, 정확하게 N킬로그램을 만들 수 없다면 -1을 출력한다.
입력 출력
18 4
4 -1
6 2
9 3
11 3첫번째로 생각한게 입력값을 5로 나눈 값과
5로 나눈 나머지 값을 3으로 나눈 값을 더하는
아주 간단한 문제라고 생각했던 코린이였다...
입력 값이 18일 때는 이 알고리즘이 통하지만
입력 값이 6, 9, 11일 때는 통하지 않았다.
두번째로 생각한게 -5씩하면서 (마이너스한 횟수 저장)
뺀 값을 3으로 나누었을 때 나머지가 0이면
-5한 값에서 3으로 나눈 값과 저장한 횟수를 더해봤지만 실패..!
계속된 시도 끝에 5번 제출 후 실패했다 ㅜㅜ
스터디 프로젝트 아이디어 회의
⏰ 16:00 ~ 18:00
여러가지 주제(to-do list, 스케쥴 관리 등)가 나왔지만 현실적인 구현 가능 문제로 다음주 주제 결정
다음주까지 프로젝트에 대해 강사님 조언 구하기
p.s. to-do list는 개인적으로 만들어야겠다...
가변 그리드
⏰ 10:30 ~ 11:30
https://beready.co.kr/
예전에 대학교를 다니던 시절에 이 페이지를 보고 영감을 얻어서 반응형 페이지를 만들고 싶은 목표가 생겼다!
그래서 가변 그리드의 개념부터 잡으면 좋겠다 싶어서 시작!
viewport
뷰포트(viewport)란, 웹 페이지에서 사용자의 보이는 영역(visible area)
<meta name="viewport" content="width=device-width, initial-scale=1.0">width는 뷰포트의 가로 크기를 정한다.
device-width는 기기의 스크린 너비에 맞춘다는 뜻
initial-scale은 페이지에 처음 접속했을 때 보여질 확대 배율 설정
| width | initial-scale |
|---|---|
| 뷰포트의 가로 크기 | 페이지 처음 접속 시 보여질 배율 |
뷰포트를 정하지 않으면 width는 기본값인 980px
width:100%를 지정한 요소는 그냥 980px 값을 가지게 된다.
| user-scalable | minimum-scale | maximum-scale |
|---|---|---|
| 사용자의 축소/확대 허용 여부. 초기값은 yes며, no로 금지 가능 | 뷰포트의 최소 배율값 (0~10) | 뷰포트의 최대 배율값 (0~10) |
미디어 쿼리
미디어 쿼리는 반응형을 위한 기본이자 핵심!
media라는 키워드로 사용
.title {
font-size: 40px;
}
@media (max_width: 600px) {
.title {
font-size: 20px;
}
}타이틀의 텍스트 크기를 40px으로 하되, 600px보다 작은 화면에서는 20px로 줄인다는 내용
미디어 쿼리 적용
1) CSS 파일 내에 직접 작성
@media (min-width: 768px) { }2) <link>태그에 media 속성을 설정해 사용
<link rel="stylesheet" media="all and (min-width: 1200px)" href="desktop.css">
<link rel="stylesheet" media="all and (min-width: 768px) and (max-width: 1199px)" href="laptop.css">대부분의 경우 첫 번째 방법을 사용
왜냐 두 번째 방법처럼 CSS를 분리해 두더라도, 브라우저는 일단 모든 CSS 파일을 다운로드 하기 때문
HTTP 요청이 많아지면 성능이 그만큼 저하, CSS 파일 내에서 @media로 분리하는 것을 추천!
구문
미디어 쿼리 구문은 '미디어 유형 / 논리 연산자 / 특성'으로 이루어지며 대소문자를 구분하지 않는다.
