본문 바로가기

전체 글

 (52)
[JAVA] - Hash, HashTable (≒ HashMap) Hash 임의의 크기의 데이터(Key)를 고정된 크기의 데이터(Value)로 저장하는 구조이다. Key의 Hash값을 사용하여 값을 저장하고, Key-Value 개수에 따라 동적으로 크기가 증가하는 associative array이다. (associative : Key하나와 Value하나가 연관되어 있으며(1:1 구조), Key를 통해 연관되는 값을 얻을 수 있는 자료구조) Key에 대한 Hash값을 구하는 과정을 해싱(Hashing)이라고 하며, 이때 사용하는 함수를 해시함수라고 한다. Hash의 장점으로 Hash값 자체를 index로 사용하기 때문에 평균 시간복잡도가 O(1)로 매우 빠르다. Hash Table (≒ Hash Map) Map 인터페이스를 구현한 컬렉션으로 Key와 Value가 짝으로 ..
[JAVA] - 연결 리스트(LinkedList) 연결 리스트(LinkedList)란 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식의 자료구조이다. 자료의 순서는 정해져 있지만, 메모리상 연속성이 보장되지는 않는다. 데이터를 관리하는데 용이하지만 데이터를 추가하거나 삭제했을 때 Index가 밀리거나 당겨지지 않고 NULL 상태로 유지되기 때문에, 탐색 속도가 느리다는 단점이 있다. 코드를 사용할 때 비슷한 형태인 ArrayList와 비교가 많이 되는데, 데이터의 추가/삭제가 많이 필요한 경우 LinkedList를, 탐색이나 정렬을 하는 용도로는 ArrayList가 적합하다. (ArrayList는 Index가 존재하여 데이터의 추가/삭제가 일어날 경우 빈 공간이 밀리거나 당겨지기 때문에 탐색 속도 ↑) 장점 ① 데이터 공간을 미리 할당하..
[JAVA] - 배열(Array), ArrayList 배열(Array) int a = 1; char num = 'one'; 와 같이 변수는 하나의 값만 저장할 수 있다. 저장해야 할 값이 적으면 위와 같이 선언을 해도 큰 문제는 없지만 저장해야 할 값이 많아질수록 많은 변수가 필요하고, 변수에 값을 저장하는데 많은 시간이 들기 때문에 매우 비효율적이다. 이런 문제를 해결하기위해 배열을 사용하면 된다. 배열은 연속된 공간에 값들을 나열시키고, 값들에 대해 인덱스(Index)를 부여해 놓은 자료구조이다. 각 데이터를 인덱스와 1대1 대응시키며, 데이터가 메모리 상에 연속적으로 저장된다. 인덱스는 대괄호 []와 같이 사용하여 배열 항목의 값을 저장하거나 읽을 때 사용된다. 예시로, 10개의 값을 배열로 선언해 보겠다. int[] age = { 10, 15, 20..
[웹페이지 기초 6] - Grid Layout Grid Layout CSS에서 제공되는 레이아웃으로 행과 열이 기반인 레이아웃 시스템이다. 지금까지 웹페이지에서 위치를 지정하기 위해 float나 position을 사용하였지만, Grid Layout을 사용하면 레이아웃을 더욱 쉽게 지정할 수 있다. 단, 최신 브라우저에서만 지원이 된다고 한다. Grid Container : 그리드 전체 영역 Grid Column : 그리드 열 Grid Rows : 그리드 행 Grid Cell : 그리드 한 칸 Grid Line : 그리드 셀을 구분해주는 선 Grid Gap : 그리드 셀 사이의 간격 Grid Area : 그리드 셀의 집합 간단하게 Grid Layout을 이용한 예제를 만들어봤는데, Grid속성은 태그 안에 선언해주면 된다. display:grid ->..
[웹페이지 기초 5] - 반응형 웹 CSS 반응형 웹이란? 예전에는 주로 pc환경에서만 웹사이트에 접속했지만, 요즘 시대에서는 스마트폰, 태블릿 등 다양한 디바이스를 통해 웹사이트에 접속을 한다. 하나의 고정된 크기로 웹페이지를 제작하면 어느 디바이스에서는 작게 보일 수도, 어느 디바이스에서는 크게 보일 수도 있는데, 화면 크기가 각각 다른 디바이스 종류에 따라 화면의 크기가 자동적으로 변하여 어디서든 최적화된 화면으로 볼 수 있게 만든 것을 반응형 웹 디자인이라고 한다. 반응형 웹으로 웹사이트를 만들면 PC 전용, 태블릿 전용, 모바일 전용과 같이 각각 별개로 웹사이트를 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 전자기기 환경에 맞춰 대응할 수 있다. 이렇게 반응형 웹으로 제작을 하면, 하나의 URL을 가지기 때문에 접속도 효율적으로..
[웹페이지 기초 4] - CSS 규칙 CSS 파일 분리 지금까지 공부를 하며 만든 간단한 웹사이트는 html 문서 안에 css 속성도 같이 선언해줬다. 코드가 많이 길지 않았기 때문에 수정하는 데에도 어려움은 없었지만, 구글이나 네이버 정도의 웹사이트를 제작하면 코드가 매우 길어져서 수정하기 매우 어려울 것이다. 이런 문제를 방지하기 위해 css를 html 문서로부터 분리시켜준다. 위에 보이는 그림처럼 html 문서에서 css를 분리할 수 있는데, 하나의 css파일로 분리해도 되고 여러 개의 css파일로 분리해도 된다. 웹사이트를 제작할 때 구현하려는 기능이 많을수록 코드가 길어지므로, 원활한 제작을 위해 css파일을 기능별로 분리하여 여러 개의 파일로 저장하는 게 좋을 것이다. : 저장되어 있는 css파일을 호출하여 적용시켜준다. 이렇게 ..
[웹페이지 기초 3] - CSS3 애니메이션 이전 게시물에서는 CSS3 변형 기초에 대해 다뤄보았고, 이번에는 애니메이션에 대해 세부적으로 공부를 해보겠다. CSS3 애니메이션 CSS 스타일을 다른 스타일로 전환할 때 부드럽게 진행시켜주는 속성이다. 키프레임을 이용한 애니메이션 @keyframes A { from { B } to { C } } -> A라는 이름을 가진 키프레임 요소에 대해, B의 속성에서 C의 속성으로 애니메이션이 진행된다. transform:rotate -> 애니메이션이 진행되면서 설정한 수치만큼 해당 요소가 회전을 한다. animation-iteration-count:infinite : 기본적으로 애니메이션은 웹페이지를 열었을 때 한번 진행되지만, 이 속성을 사용하면 애니메이션이 계속해서 반복된다. animation-direct..
[웹페이지 기초 2] - CSS3 변형 변형이란 웹페이지에 출력되는 요소의 크기나 모양이 바뀌는 것을 의미한다. 보편적으로 JavaScript나 jQuery같은 라이브러리를 이용해서 CSS3변형 작업을 한다. CSS3변형 속성을 직접적으로 적용하는 방식은 많이 쓰이지 않지만, 알아두면 웹페이지를 만들 때 차별성을 둘 수 있어 좋을 것 같다. id는 wrap으로, class는 rec로 선언하여 예시를 만들어봤다. transition-duration:2s; -> 변형 속성 설정 시, 변형이 진행되는 시간으로 2s로 설정하였으면 변형이 2초 뒤 완료된다. 1) hover 속성 : 기존에 생성된 요소위에 마우스를 올리면 2초동안 hover에서 설정한 속성 값으로 변형이 진행된다. 2) active 속성 : 기존에 생성된 요소를 마우스를 누르고 있으면..
[웹페이지 기초 1] - 홈페이지 기본 레이아웃 만들기 인터넷을 사용하면서 다양한 웹사이트를 접하게 되는데, 전체적으로 비슷한 레이아웃 구조를 가지고 있다. 대중적으로 많이 쓰이는 웹사이트인 네이버의 레이아웃 구조를 살펴보면 이와 같이 분류할 수 있다. 다른 웹사이트도 대부분 위와 같은 구조를 가지며, 본인이 웹페이지를 설계할 때도 이런 구조로 큰 틀을 잡고 만드는 것이 좋다. 이런 구조들과 비슷한 형태로 간단한 웹페이지를 만들어봤다. 내가 만든 게시판의 레이아웃 구조를 큰 틀로 나누면 이와 같다. ① header ② nav ③ content ④ section ⑤ aside ⑥ article ⑦ footer ① header 사이트 이름, 사이트 로고, 검색창 등을 정의한다. ② nav 사이트의 다른 페이지로 이동할 수 있는 메뉴 항목, 카테고리를 정의한다. ..
[CSS3 기초 7] - CSS 속성 4 (float속성 , gradient속성) float 속성 position속성과 비슷하게 요소의 위치를 설정하기 위한 속성이다. float:left -> 요소들을 왼쪽 기준으로 배치한다. float:right -> 요소들을 오른쪽 기준으로 배치한다. float 속성을 활용해서 이미지를 사용할 때도 적용할 수 있다. 기존이라면 이미지 밑으로 p태그가 표시되지만, img속성에 float:left 설정을 하여 p태그가 이미지 옆으로 표시된다. gradient 속성 2가지 이상의 색을 나타내고 싶을 때 사용되는 속성이다. 색상 설정은 https://www.colorzilla.com/gradient-editor/ 에 들어가서 원하는 색상으로 설정하면 CSS코드도 자동적으로 작성이 되는데 해당 코드를 가져와서 사용하면 된다. 이렇게 코드를 가져와서 복사하면..

티스토리툴바