본문 바로가기

전체 글502

HTML/CSS - Transition & Transformation 1. Transition - Transition은 엘리먼트 상태의 변화를 애니메이션을 통해 표현하는 방법이다. (아래 사진참고) Go Home - Transition 속성값을 사용하기 위해서는 몇가지 규칙이 있다. 먼저 형식이다. 형식) transition: 속성/all 시간 ease-in/ease-out/ease-in-out - 그 다음은 Transation을 작성해야 되는 위치와 작성 규칙이다. Transition을 사용하기 위해서는 반드시 기존상태와는 다른 상태가 적용되는 CSS가 작성되어 있어야 한다. Transition은 반드시 root CSS에 작성되어야 한다. a{}에 적혀야지 a:hover{}에 적히면 안된다. hover에 입력하면 마우스가 올려져 있는 동안은 trasition이 작동을 하.. 2020. 8. 30.
HTML/CSS - CSS Variable 1. Color - CSS에서는 색상이 매우 중요한 요소이다. IDE자체에서 제공하는 색상도 많지만 제한적이라는게 사실이다. 그렇다면 어떻게 다양한 색상을 구현할 수 있을까? CSS에서 색상을 표현하는 방법은 3가지가 있다. 1) 16진수 표현법 - 색상을 16진수로 표현 2) RGB 표현법 - 색상을 R(red), G(green), B(blue)의 비율로 표현 3) RGBa 표현법 - 색상을 R(red), G(green), B(blue)의 비율과 alpha(투명도)를 표현 2. CSS Custom Properties - variable(변수) - CSS에서도 변수를 사용할 수 있다. 어떻게 사용하고 왜 사용하는지 알아보자. - 예를 들어, 토마토 색상을 메인으로 하는 웹사이트를 제작한다고 해보자. 그렇.. 2020. 8. 27.
HTML/CSS - State & 속성 선택자(selector) 1. State - 어떤 웹사이트를 개발자 도구를 통해 살펴보면 확인할 수 있는 가장 중요한 selector(선택자)는 state이다. - 위의 사진에서 보이는 것처럼 state에는 active, hover, focus, visited, focus-within이 있다. 이를 버튼을 통해 살펴보자. 1) active - 버튼을 클릭했을 때 작동 Hello 2) hover - 마우스 커서를 버튼 위에 올렸을 때 작동 - hover가 작동되면 default border가 적용되기 때문에 설정해 놓았던 둥근 테두리가 없어진다. 그러므로 hover가 작동할 때의 테두리 모양을 따로 적용해야 한다. 3) focus - 입력란에 커서가 놓여있게 하는 기능으로, 사용자를 입력란으로 유도한다. - Tab키를 눌렀을 때,.. 2020. 8. 26.
Data Structure - 트리(Tree) & 이진탐색트리(Binary Search Tree) 1. 트리(Tree) - 트리는 node와 branch를 이용하여 구성된 데이터구조로 사이클이 없다. - 트리는 이진트리(Binary Tree)형태의 구조를 이용하여 탐색(검색) 알고리즘 구현에 많이 사용된다. * 이진트리 - 하나의 node에서 뻗어나가는 branch의 수가 최대 2개인 트리구조 [알아야 할 용어] - Node: 트리에서 데이터를 저장하는 기본 요소(데이터와 연결되어 있는 다른 노드에 대한 branch정보가 담겨있다.) - Root Node: 트리 맨 위의 노드 - Level: 최상위 노드인 root node를 level 0으로 하였을 때, branch로 연결된 하위 노드의 깊이를 나타낸다. - Parent Node: 부모 노드를 의미하며 어떤 node에 연결된 상위 node를 의미한다.. 2020. 8. 26.
HTML/CSS - Pseudo selectors(선택자) 1. Pseudo selectors (선택자) - CSS에서 특정 엘리먼트를 선택하기 위해서 아이디는 #아이디명으로 클래스는 .클래스명으로 명시한다. 아이디는 고유값으로 1개의 엘리먼트만 선택되지만, 클래스는 해당 클래스명을 가진 모든 엘리먼트가 선택된다. 상황에 따라 특정 클래스만을 선택하고 싶은 경우가 발생할 수 있다. 이럴 때 사용하는 기술이 pseudo selector이다. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected eleme.. 2020. 8. 25.
티스토리 사용 한달만에 깨달음... 오랜만에 글을 씁니다. 티스토리에 포스팅을 한지 벌써 한달이 지났고 현재 공개 게시물이 32개네요. 정보처리기사 시험이 모두 끝나고 한동안 시간관리도 잘 못하고, 게으름을 많이 피웠다고 생각했습니다. 그래도 처음 포스팅을 시작하며 다짐했던 1일 1포스팅을 어떻게든 지켜나가고 있어서 다행이고 스스로가 기특합니다. 더 열심히 공부해야겠습니다. 포스팅을 하다보면 1개의 포스팅을 2일, 길게는 3일을 쓰게 될 때가 있더군요. 글을 쓰는 작업이 얼마나 힘든지 새삼 깨닫습니다. 오늘 알고리즘 관련 포스팅을 하다보니, 제가 코드를 스크린샷으로 찍어 올리고 있는게 참... 어처구니가 없더군요. 이제서야 깨달았습니다. 티스토리에는 코드 블럭이라는 아주 좋은 기능이 있다는 것을... 한달 동안은 포스팅을 한다는 것 자체에.. 2020. 8. 25.
HTML/CSS - Position (relative&absolute) 1. Position - 웹 사이트를 만들 때, 여러가지 요소를 사용한다. 이 요소들을 조금씩 개발자가 원하는 위치에 배치하기 위해서 사용하는 속성중 하나가 position이라는 속성이다. 사용할 기본 구조는 아래 사진과 같다. 1) position: fixed; - fixed속성값을 사용하면 스크롤을 내려도 요소의 위치가 고정되어있게 된다. - fixed 속성값을 이용하기 위해서는 알아야 할 중요한 것이 있다. 바로, layer가 달라지는다는 것이다. 예시) 두개의 div태그가 있다. 1번 태그는 일반적인 div이고 2번 태그는 fixed 속성값을 적용한 태그이다. 그러므로 스크롤을 움직이면 1번 div는 제자리에 있고 2번 div는 고정된 자리에 그대로 위치한다. 하지만, 2번 div는 1번div의 .. 2020. 8. 24.
HTML/CSS - Inline_block & Flex_box 1. inline-block - style에 있는 display속성을 이용하면 inline을 block처럼 block을 inline처럼 이용할 수 있다. - 그러나 block타입을 inline속성으로 바꿔주면 화면에 잘 보이지 않는다. (아래 사진참고) -위의 사진은 div 3개를 그대로 출력한 것이다. 이를 inline 속성으로 바꿔주면 아래의 사진처럼 제대로 출력되지 않는 것을 볼 수 있다. - 이런 문제를 해결하기 위해 display속성에 inline-block이라는 속성을 이용하여 해결한다. 이를 이용하면 block을 inline 형식으로 출력할 수 있게 된다. (아래 사진 참고) - 하지만, inline-block 속성에는 문제가 많다. 위의 사진에서 볼 수 있듯이, 개발자가 만들지 않은 공백이.. 2020. 8. 24.
Data Structure - Hash Table (2) 1. Linear Probing 기법 - Close Hashing(폐쇄 해싱) 기법 중 하나로, 해싱충돌이 발생하면 Hash Table의 저장공간 안에서 충돌을 해결하는 기법이다. - 다시 말해, 충돌이 발생하면 Hash address를 이용하여 Hash Table의 빈공간을 찾아 저장하는 기법이다. - 이 기법을 사용하면 Hash Table의 저장공간 활용도를 높일 수 있다. 2. Linear Probing 기법 구현하기 [기본 구조] 시나리오1) 새로 추가하려는 데이터의 hash값에 이미 다른 데이터가 저장되어 있는 경우, hash table을 검색하여 가장 첫번째로 찾는 빈 공간에 데이터를 저장하는 방식이다. hash값 value 0 a 1 - 위의 표를 기반으로 설명합니다. 만약에 hash값이 0.. 2020. 8. 22.
Data Structure - Hash Table (1) 1. 해쉬 테이블(Hash Table) Hash Table은 Key와 Value 한 쌍으로 저장하는 데이터 구조를 갖고 있다. Key를 이용하여 원하는 data(value)를 바로 찾을 수 있기에 검색속도가 빠르다는 장점이 있다. 파이썬의 Dictionary가 해쉬 테이블이고 그렇기에 파이썬에서는 별도로 해쉬테이블을 구현할 필요가 없다. ex) dic = {"name":"Raphael", "job":"developer"} [알아야 하는 용어] 해쉬(Hash): 임의 값을 고정된 길이로 변환하는 것 해쉬 테이블(Hash Table): 키 값에 대응하는 value를 갖고 있는 저장공간으로, 키 값을 기반으로 해시함수를 통해 직접 접근이 가능한 데이터 구조 해시 함수(Hash/Hashing Function):.. 2020. 8. 22.
Data Structure - 시간 복잡도(Time Complexity) 1. 시간 복잡도 - 어떤 문제를 해결하는데에 있어 어떤 알고리즘이 가장 빠른지 판단하기 위해 알고리즘의 효율성을 수치적으로 계산한 것이다. - 알고리즘의 효율성을 측정하기 위해서 알고리즘이 복잡한 정도를 계산하는데 여기에는 시간과 공간, 2가지가 있다. 시간 복잡도 - 알고리즘의 실행 속도 공간 복잡도 - 알고리즘이 사용하는 메모리의 양/사이즈 * 현업에서 주로 사용하는 것은 시간복잡도이다. 시간복잡도에 대하여 자세히 알아보자. c) 시간 복잡도의 핵심 요소 - 반복문 - 알고리즘 구조에서 어느 부분에서 가장 시간을 많이 소요하는지를 파악하는 것이 핵심이다. - 입력의 크기가 커질수록 반복문의 수행시간이 증가하게 되며, 이는 곧 알고리즘의 수행시간을 증가시킨다. d) 시간복잡도의 표기법 종류 Big O.. 2020. 8. 21.
Data Structure - Linked List (2) 1. Linked List - 특정 노드 삭제 - 특정 노드를 삭제하는 경우는 3가지가 있다(첫노드, 중간노드, 마지막노드). 이를 배워보기 전에 베이스로 이용할 연결리스트를 코드로 작성한다. - 위의 코드를 기반으로 3가지 노드 삭제 경우를 처리하기 위한 delete메소드를 작성한다. a) head 노드 삭제 b) 마지막 노드 삭제 & 중간 노드 삭제 2. 다양한 Linked List 구조 - Double Linked List - 연결리스트의 단점은 대용량 자료검색이 힘들다는 점이다. 그 이유는 노드마다 다음 노드의 주소값을 갖고 있기 때문에 1만개의 노드 중 가장 8000번째 노드를 찾는다면 0부터 7999번까지 모든 자료를 보아야 한다. 이런 단점을 해결하기 위해 연결리스트는 다양한 구조로 구현한다.. 2020. 8. 20.

티스토리툴바