Today I Learned

TIL] 알고리즘 공부

최댓값 구하기 시간 복잡도 ↑ (N제곱) input = [3, 5, 6, 1, 2, 4] def find_max_num(array): # array의 길이만큼 아래 연산실행 for num in array: # array의 길이만큼 아래 연산실행 for compare_num in array: #비교연산 1번실행 if num < compare_num: break else: return num result = find_max_num(input) print(result) # 프로그램 동작 정리.. # num = 3 < compare_num = 5 break # num = 5 < compare_num = 6 break # num = 6 시간 복잡도 ↓ (1 + 2N) input = [3, 5, 6, 1, 2, 4..

TIL]미디어쿼리

미디어쿼리 웹에서 접속을 할 때 개개인의 모니터의 크기가 틀리거나 모바일, 태블릿 pc, 데스크톱, 랩탑 등 다양한 기기로 이용하기 때문에 현재 화면의 크기를 감지하고 화면 너비에 따라 다른 css 스타일을 적용할 수 있습니다. 아래 예제를 살펴보겠습니다! @media screen and (max-width: 480px) { body { background-color: green; } } 우선 미디어쿼리를 사용할 때 @media라고 적어줍니다. screen and 부분을 보시면 max-width가 480px로 되어있는데 480px보다 작은 화면 즉, 스마트폰에 대한 규칙을 정의하는 것입니다. 위의 예제와 같이 실제로 적용할 css 규칙은 미디어쿼리의 중괄호 안에 적어주고 미디어쿼리가 충족되면 이 규칙들이..

TIL] details와 summary

detail 인터넷을 하다 보면 펼치기 버튼을 눌러 숨겨져 있던 내용이 출력되는 걸 자주 볼 수 있다. 이러한 걸 해주는 것이 detail이다. 예제를 통해 살펴보자. 숨겨진 내용 위의 예제는 사진과 같이 p태그가 숨겨져 있다가 세부 정보를 클릭했을 때 펼쳐지면서 숨겨져 있던 p태그가 나오게 된다. summary 위의 예제를 살펴보면 세부정보라고 따로 기입한 흔적조차 없는데 웹에선 세부정보라고 나타나고 있다. 이 세부정보를 바꾸려면 어떻게 해야 할까? summary를 사용하면 된다. 아래 예제를 살펴보자. 클릭하세요! 안녕하세요! 위의 예제에선 세부 정보 summary안에 써넣은 클릭 하세요! 가 표시되는 것을 볼 수 있다. open 위의 예제들은 클릭을 해야만 펼쳐졌다! 하지만 처음 웹에 들어갔을 때 ..

TIL] flex

flex flex는 Flexible Box, Flexobx라고도 불리며 flex는 레이아웃 배치 전용 기능으로 고안되었다. 토이 프로젝트를 하면서 flex를 이용하였는데 매우 편리하였다! flex 관련 속성을 아래에서 살펴보자. flex-wrap flex-wrap은 요소들을 정렬하는 것이라고 생각하면 된다. flex-wrap 속성은 정렬된 요소들의 총넓이가 부모 넓이보다 클 때, 이 요소들을 다음 줄에 이어서 정렬해준다. flex-wrap은 display:flex;와 함께 사용한다. 아래의 예제를 살펴보자. 1 2 3 4 5 위의 코드와 코드의 결과 화면이다. 위의 코드에 flex-wrap을 적용하면 어떻게될까? 아래 예제를 살펴보자. 1 2 3 4 5 flex-wrap을 적용하면 위와 같이 나란히 정렬..

TIL] border

border border속성은 기초적인 속성이지만 다루지 않았기에 한번 다뤄보고 싶고 또한 토이 프로젝트를 진행하면서 border에 대해 공부해서 자세히 알아보고 싶었다. border는 테두리를 만드는 속성이고 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정한다. border 속성 값 border-width: 테두리의 두께 정하고 기본값은 medium이다. border-style: 선의 모양을 정하고 기본값은 none이다. border-color: 선의 색을 정한다. initial: 기본값으로 설정한다. inherit: 부모 요소의 속성 값을 상속받는다. border-style none dotted dashed solid double groove ridge inset outset border-style은 눈..

TIL] 자바 기초(3)

상수의 데이터 타입 변수는 변할 수 있는 값을 의미하고 상수는 변하지 않는 값을 의미한다. 예를 들어 int a = 1; 에서 int는 데이터 타입 a는 변수이고 1은 상수인 것이다. 산술 연술자 산술 연술자는 크게 다섯 가지가 존재한다. + = 더하기 - = 빼기 * = 곱하기 / = 몫 % = 나머지 사용하는 방법은 아래에서 살펴보자. // result의 값은 2 int result = 1 + 1; System.out.println(result); // result의 값은 1 result = result - 1; System.out.println(result); //result의 값은 2 result = result * 2; System.out.println(result); // result의 값은 ..

TIL] table

table table은 표를 만들어주는 html태그이다. 표뿐만 아니라 갤러리도 만들 수 있고 다양하게 응용이 가능한 태그이다. 테이블의 구성 요소 테이블은 여러 가지 구성요소가 있다. 아래에서 살펴보자 : 테이블을 만드는 태그 : 테이블의 헤더 부분을 만드는 태그 : 테이블의 행을 만드는 태그 : 테이블의 열을 만드는 태그 테이블을 만들 때는 순서가 있다. 테이블의 순서는 다음과 같다. 제일 바깥 쪽에 이 들어가게 되고 가장 위에 라는 테이블 헤더 태그를 사용한다. 그다음은 행을 만드는 태그가 들어가게 되고 tr태그 안에는 열을 만들어주는 태그가 들어가게 된다. 테이블 코드 블록 테이블예제 입니다. 1번칸 2번칸 2번줄 1번칸 2번줄 2번칸 위의 예제처럼 코딩을 하게 되면 아래와 같이 표시된다. 테이블..

TIL]first-child, last-child 선택자

가상 클래스와, 가상 요소를 쓰는 이유 타입 선택자, id, class 선택자, 전체 선택자로는 구체적인 작업을 할 수 없는 부분들을 작업하기 위해 사용한다. 예를 들어 어떤 요소도 첫 번째 줄만 선택해서 스타일을 주는 방법이 없는데 가상 클래스와 가상 요소를 사용하면 구체적으로 집어 스타일을 주는 것이 가능해진다. first-child first-child는 부모 요소 안에 있는 첫 번째 자식만을 선택할 수 있는 선택 자이다. 사용방법은 간단하다. 요소:first-child {속성: 속성 값;} 코드로 살펴보자면 아래와 같이 사용하면 된다. html 예제 1번예제 2번예제 3번예제 4번예제 예제입니다. 1번예제입니다. 2번예제입니다. 3번예제입니다. 4번예제입니다. css p:first-child{co..

TIL] html에 video 넣기

video태그 html에서 비디오를 올리려면 어떻게 해야 할까? 비디오 태그를 활용하면 된다. 비디오 태그의 예제를 살펴보자

TIL] 동적 프로그래밍

동적 프로그래밍 동적 프로그래밍은 이름부터 생소하다. 동적 프로그래밍은 다이내믹 프로그래밍이라고도 부르고 동적 계획법이라 부르기도한다. 동적 프로그래밍의 원리는 주어진 문제를 풀기 위해서 문제를 여러 개의 하위 문제로 나누어 푼 다음 그것을 결합하여 최종적인 답을 구하는 것이다. 동적 프로그래밍의 장점 동적 프로그래밍의 장점으로는 하위 문제의 해결을 계산한 뒤 그 해결책을 저장하여 후에 같은 하위 문제가 나왔을 경우 저장된 해결책을 재활용하여 간단하게 해결하여 내려가므로 계산 횟수를 줄일 수 있다. 저장된 해결책을 재활용하는 것을 메모 이제이 션이라고 부른다. 또한 프로그램을 구현할 때에 필요한 모든 가능성을 고려해서 구현하게 되기 때문에 동적 계획법을 이용하여 항상 최적의 결과를 얻을 수 있다. 동적 ..