개발새발 로그

float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법 float 프로퍼티는 본래 아래 예제와 같이 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다. See the Pen Untitled by 신준혁 (@miduksdl-the-lessful) on CodePen. float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다. none 요소를 떠 있게 하지 ..

1. position 프로퍼티☝ position 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다. 1.1 static (기본위치) static은 position 프로퍼티의 기본값으로 position 프로퍼티를 지정하지 않았을 때와 같다. 기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다. 기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용될 수 있다. 좌표 프로퍼티(top, bottom, left, right)를 같이 사용할 수 없으며 사용할 경우에는 무시된다. .stati..

폰트 및 텍스트 관련 프로퍼티는 폰트의 크기, 폰트의 지정, 폰트의 스타일, 텍스트 정렬 등을 정의한다. 1. font-size 프로퍼티 .font-size-40 { font-size: 40px; } .font-size-2x { font-size: 2.0em; } .font-size-150ps { font-size: 150%; } .font-size-large { font-size: large; } 2. font-family 프로퍼티 폰트를 지정한다. 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않는다. https://developer.mozilla.org/en-US/docs/Web/CSS/font-family font-family - CSS: Cascading Style Sheets | MDN ..

1. background-image 프로퍼티 요소에 배경 이미지를 지정한다. body { background-image: url("http://poiemaweb.com/img/bg/dot.png"); } 2. background-repeat 프로퍼티 배경 이미지의 반복을 지정한다. 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다. ->background-repeat 프로퍼티의 기본값이 repeat이기 때문 ->반복 출력을 멈추고 싶은 경우, background-repeat 프로퍼티값에 no-repeat를 설정한다. x축으로만 배경 이미지를 반복할 경우, background-repeat 프로퍼티값에 repeat-x, y축으로만 배경 이미지를 반복할 경우, repe..

위상정렬 순서가 정해져있는 작업을 차례로 수행해야할 때 그 순서를 결정하기 위해 사용하는 알고리즘 위상정렬을 통해 여러개의 순서를 조건에 부합하는 일직선의 순서로 만든다. 배고픔 -> 돈벌기-> 배달 앱 설치하기 -> 배달시킬 음식 고르기 -> 주문서 작성하기 -> 결제하기 -> 배달 완료 위상정렬은 다른 수서의 답 또한 존재할 수 있다. 위상정렬은 사이클이 존재하지않는 그래프(DAG)에만 적용가능하다. 위상정렬은 현재 그래프가 위상정렬이 가능한지 판별가능 위상정렬이 가능하다면 그 결과는 무엇인지 와 같은 두가지의 해결책을 낸다. 위상정렬은 스택과 큐를 이용한 두가지의 방식이 존재한다. 큐를 이용한 방식 1. 진입차수가 0인 정점을 큐에 삽입한다. -> 특정한 노드로 들어오는 노드의 개수 = 진입 차수 ..

다익스트라 알고리즘은 [하나의 정점에서 출발 했을 때 다른 모든 정점으로의 최단 경로를 구하는 알고리즘]입니다. 만약 [모든 정점에서 모든 정점으로의 최단 경로]를 구하고 싶다면 플로이드 와샬 알고리즘을 사용해야합니다. 다익스트라 알고리즘은 가장 적은 비용을 하나씩 선택해야 했다면 플로이드 와샬 알고리즘은 기본적으로 거쳐가는 정점을 기준으로 알고리즘을 수행한다느 점입니다. 다음과 같은 그래프가 있다고 가정해보자 이때 각각의 정점이 다른 정점으로 가는 최소비용을 이차원 배열의 형태로 출력하면 다음과 같다. 0 [1->1] 2 [1->2] 4 Infinity Infinity 3 [2->1] 0 [2->2] 5 2 Infinity Infinity Infinity 0 7 4 Infinity Infinity In..

다익스트라 알고리즘은 다이나믹 프로그래밍을 활용한 최단경로탐색 알고리즘입니다. 이전에 배운 크루스칼 알고리즘은 최소비용 신장트리이다. 다른점은 크루스칼은 모든정점이 연결될 때의 최소비용이고 다익스트라는 특별한 정점에서 다른 모든 정점으로 가는 최단 경로다. 즉 크루스칼은 모든 정정이 연결만 되면 되는 경우이고, 다익스트라는 어떤 정점을 기준으로 모든 정점을 도착지점으로 했을 때 갈 수 있는 최소비용을 구하는 것이다. 다익스트라 알고리즘은 특정한 정점에서 다른 모든 정점으로 가는 최단 경로를 구합니다. 이때 음의간선은 포함할 수 없는데 이것이 다익스트라가 현실세계에서 사용하기 매우 적합한 알고리즘 중 하나입니다. 다익스트라가 다이나믹 프로그래밍이기도 하고, 그리디 알고리즘으로 분류되기도 한다. 다이나믹 프..

display 프로퍼티 display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다 (공간조차 사라진다) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HTML 요소는 block 또는 inline 특성을 갖는다. block 레벨 요소 block 특성을 가지는 요소(block 레벨 요소 또는 block 요소)는 아래와 같은 특징..