본문 바로가기
반응형

분류 전체보기

 (174)
[ 코테 꿀팁 ] set, unordered_set (C++) set과 unordered_set은 코테 보면서 사용할 일이 그닥 많지 않다. 근데 모르면 못 써먹기 때문에 간단한 특징과 함수들을 정리해봤다. 1. 특징 1) Set - 균형 이진탐색트리 구조 - 탐색, 삽입, 삭제 모두 O(logN) 보장 - 정렬된 상태 - 값 중복 X 2) Unordered_set - 해시테이블 구조 - 탐색, 삽입, 삭제 모두 O(1) - 원소가 너무 많아지면 리헤싱 과정을 거치는데 이는 O(N) 시간 소요 - 정렬되지 않음 - 값 중복 X 균형 이진탐색트리가 뭔지, 해시테이블이 뭔지에 대한 설명은 생략하도록 한다. 이 둘의 공통점은 키(key) 값으로 접근한다는 점이다. 따라서 Key의 존재여부만을 판단할때 사용하면 좋다. 2. 함수(둘 다 똑같다) 기본 선언 : set s; ..
[ HTML+CSS ] float과 포지셔닝(static, relative, absolute, fixed) 오늘은 html 요소들의 위치를 옮기는 방법에 대해 알아볼 것이다. 1. Float float는 단어뜻 그대로 html 요소를 띄우는 역할을 한다. '박스 모델을 띄운다'가 정확한 표현인 것 같다. 예를 들어 아래와 같이 세 개의 div 태그가 있다고 해보자. 각 요소는 배경색으로 구분할 수 있다. See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen. 여기서 가장 상위의 박스 width를 20vw로 설정하고 'float: left' 속성을 부여해보자. 박스를 왼쪽으로 띄운다는 뜻이다. See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen. 결과 분석해보자. 원래 div 태..
[ HTML+CSS ] grid 쉽게 쓰자 grid를 배우는 이유는 레이아웃을 잡기 위해서다. 오직 한 가지 방법으로 웬만한 레이아웃은 다 구현할 수 있는 방법을 소개한다. 어떻게 보면 좀 무식한 방법일 수도 있는데.. 레이아웃이란게 한번만 윤곽을 잡으면 이후로 건드릴 필요가 거의 없기 때문에 '구현만 하면 되지 뭐' 마인드다. 근데 막상 구현해보면 생각보다 직관적이어서 '오 괜찮은데?' 라는 생각이 들 수도 있다. 아님 말고. 여기를 참고했다!! 무작정 따라하면서 익혀보자. 단계만 잘 따라가면 된다. 먼저 구현하고 싶은 레이아웃을 정하자. 간단한 것도 좋고, 굉장히 복잡한 것도 상관없다. 본인이 원하는 레이아웃을 하나 정하고 따라해보기를 바란다. 내가 구현하고자 하는 레이아웃은 아래와 같다. 1. 구역마다 div 태그를 하나 만든다. 내가 구현..
[ HTML+CSS ] Display 종류( block, inline inline-block, flex) 오늘의 주제는 display 속성이다. 제목과 같이 display에는 네 가지 종류가 있다. 네 가지가 어떻게 다른지 살펴보자. 모든 내용은 스탠포드 대학교 강의자료와 MDN 웹문서를 참고했다. 스탠포드 가고싶다. 우선... box-model에 대해 먼저 짚고 넘어가자. HTML 요소들은 대부분 box-model로 이루어져 있다. box-model은 아래와 같이 생겼다. 처음에는 왜 굳이 이렇게 만들었을까 싶었지만 HTML/CSS로 간단한 웹페이지를 제작해보면 box-model의 필요성을 바로 알 수 있다. HTML에서 어떤 태그를 생성하면 기본적으로 컨텐츠는 아래와 같이 박스 안에 감싸지게 된다. 앞으로 display 차이를 쉽게 확인하기 위해 박스의 width와 height를 설정해줄텐데, 아무런 설..
[ HTML + CSS ] 재미있는 HTML 태그 https://www.w3schools.com/html/default.asp HTML Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위 사이트를 보고 재밌어보이는 태그들을 따로 정리한다. 이미 잘 알려진 태그 및 속성들은 다루지 않는다. 지극히 주관적인 기준으로(내맘대로) 골랐다. 텍스트 target="_blank" : 새로운 창에 url이 열린다. ti..
[ HTML+CSS ] font-size 파헤치기 폰트 사이즈 종류마다 차이점이 궁금해서 정리해본다. 이 글의 학습목표는 아래의 단위를 이해하는 것이다. 폰트 사이즈 뿐만 아니라 width 또는 height에도 적용되기 때문에 일부 단위는 폰트가 아닌 박스로 설명할 것이다. px, em, rem, vh, vw, vmin, vmax, % 1. px 픽셀은 절대 크기다. 화면 크기가 변해도 글자 크기는 변하지 않는다. 일반적으로 html 태그의 font-size 디폴트 값은 16px이다. 절대 크기이기 때문에 다른 단위의 기준점이 되는데, 이는 em과 rem에서 자세히 알 수 있다. See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen. 2. em em은 부모 태그의 font-size에 따라..
[ 자료구조 ] 이진 탐색 트리(Binary Search Tree) 이진 탐색 트리(Binary Search Tree)는 이진 트리의 특수 케이스로 아래와 같은 특징을 가진다. 1. 각 노드는 고유한 값을 가진다. 2. 모든 노드의 왼쪽 서브트리는 자신보다 작은 값을 가지고, 오른쪽 서브트리는 자신보다 큰 값을 가진다. 개념 자체는 매우 간단하다. 그런데 구현은 생각보다 까다롭다. 내가 공부하는 책에서는 좀 가볍게 넘어가는 부분이 있어서 대학 강의자료를 참고했다. 손으로 먼저 이진 탐색 트리를 만들어보고, 구현까지 해보는게 목표다. 포인터에 대한 이해가 확실하게 되어있지 않으면 구현 코드를 이해하기 어려울 수 있다. 손으로 직접 해보기 J , E , T , A , H , M , V , P , N 을 순서대로 트리에 삽입해보자. 루트 노드부터 시작 1) 삽입 값이 현재 노..
[ 자료구조 ] 이진 트리와 순회 이진 트리는 모든 노드가 최대 두 개의 자식 노드를 갖는 트리다. 아래와 같은 특징을 갖는다. 1. 각 노드는 최대 2개의 자식을 갖는다. 2. 각 노드의 자식은 왼쪽 자식과 오른쪽 자식으로 구분된다. 이진 트리는 왼쪽 자식과 오른쪽 자식을 엄격하게 구분한다. 이게 무슨 뜻이냐 하면 원소가 같아도 위치에 따라 다른 트리로 분류될 수 있다는 뜻이다. 예를 들어 아래 두 개의 트리는 서로 다른 이진 트리다. 이진 트리는 그 구조에 따라 다섯 가지 유형으로 나뉜다. 하나씩 살펴보자. 이진 트리 종류 1. 포화 이진 트리(Perfect Binary Tree) : 모든 중간 노드가 두 개의 자식을 가지는 이진 트리. 포와 이진 트리에서 Level n 의 노드 수는 (2^n) 이라는 특징이 있다. 2. 완전 이진 ..
반응형

티스토리툴바