분류 전체보기

TIL] (자료구조)링크드 리스트

링크드 리스트 링크드 리스트는 연결 리스트라고도 합니다. 배열은 순차적으로 연결된 공간에 데이터를 나열하는 데이터 구조를 가지고 있고 링크드 리스트는 떨어진 곳에 존재하는 데이터를 화살표(포인터)로 연결해서 관리합니다. 링크드 리스트는 미리 데이터 공간을 할당하지 않아도 되는 장점이 있지만 연결을 위한 별도 데이터 공간이 필요하여 저장공간 효율은 높지 않습니다. 또한 연결 정보를 찾는 시간이 필요하여 접근 속도가 느리다는 단점이 있습니다. 용어 노드 : 데이터 저장 단위입니다. (데이터 값, 포인터)로 구성되어 있습니다. 포인터 : 각 노드 안에서 다음이나 이전의 노드와의 연결 정보를 가지고 있습니다. head : 맨 앞을 가르킵니다. before : 현재 위치 전입니다. current : 현재 탐색 위..

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은 눈..

첫 협업! 팀토이프로젝트를 하며 느낀점

첫 번째 협업 팀 토이 프로젝트 개인 토이 프로젝트를 3개를 마치고 처음으로 협업 토이 프로젝트를 진행했다. 세 번째 토이 프로젝트는 포스팅하지 않았는데 세 번째 토이 프로젝트는 배경에 동영상을 넣고 지도 로그인 후 지도 기능 외에 두 번째 토이 프로젝트와 비슷하여 올리지 않았다! 세 번째 토이 프로젝트도 나에게 많은 것을 깨닫게 해 주었지만 포스팅하기는 민망했다! 첫 번째 협업에서 내가 맡은 파트는 로그인 기능 구현과 회원가입 구현 그리고 메모장 기능 구현이었다. 팀 토이 프로젝트를 하며 느낀 점 팀 토이프로젝트를 하면서 느낀 점은 우선 협업을 하니 확실하게 책임감이 더해졌다. 우선 팀에 피해가 가지 않도록 납기를 맞춰야 했고 내가 무언가 틀을 잡지 않거나 팀원분이 틀을 잡지 않으면 진행할 수 없는 상..

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..