분류 전체보기

css white-space

css white-space 속성은 연속된 빈칸들에 대한 제어와 개행 문자에 대한 처리를 어떻게 할지에 대한 속성입니다. white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; 하나씩 설명하겠습니다. white-space 속성은 필요할때마다 문서 참고하여서 적용하시는게 건강에 좋을것 같습니다. normal 연속된 공백을 하나로 합칩니다. 개행문자도 다른 띄어쓰기들과 동일하게 처리합니다. 줄이 길어지면 줄바꿈을 해줍니다. nowrap 연속된 공백을 합치고, 줄바꿈은 태그로만 가능합니다.. 부모요소의 크기또한 무시합니다. pre..

css float

css float은 설정된 요소가 흐름을 빠져나와서 다른 요소들이 자기 컨테이너 주위에 배치되는 것을 제어할 수 있습니다. 말이 어려우니 예시와 함께 살펴보겠습니다. float은 아래의 값과 같이 다양한 값을 가질 수 있습니다. // 키워드 값 float: left; float: right; float: none; float: inline-start; float: inline-end; // 전역 값 float: inherit; float: initial; float: unset; 주요 값들의 예시만 살펴보면서 어떻게 화면에 출력되는지 살펴보겠습니다. float: left float 설정을 left를 주게 되면 부모 영역의 top:0, left:0 으로 위치하게 되고 나머지 요소들은 자신의 주위를 감싸게 ..

css display: flex, flex: 1

display flex는 자식 요소들의 정렬을 위하여 사용합니다. 부모 요소에 display: flex를 추가해주면 자식 요소들의 정렬을 제어할 수 있습니다. 자식 요소들이 display: inline 이건 block이건 레이아웃을 설정할 수 있습니다. display: flex를 주게 되면 자식 요소들은 자신이 가진 컨텐츠의 크기만큼만 넓이를 가지게 됩니다. 이때 자식요소들에는 width와 height 속성을 부여할 수 있습니다. 원래 inline 속성에는 width, height을 줄 수가 없지만 display: flex를 부모요소에 적용함으로써 위의 이미지와 같이 width, height 을 줄 수 있습니다. flex-direction 자식 요소들의 정렬방향을 제어할 때 사용합니다. flex-dire..

Typescript 유틸리티 타입 [Utility Types]

타입스크립트에서는 여러가지 유틸리티 타입을 제공해 줍니다. 잘 사용하게 되면 이미 선언한 타입들에서 입맛에 맞게 원하는 타입만 입력받을수 있게 해주어 유용할 때가 있었습니다. 전체 유틸리티 타입중 자주 사용하는 것들 위주로 정리를 해보려 합니다. Partial 타입의 모든 타입들을 optional로 만들어 줍니다. 아래의 이미지와 코드에서는 type People에서 name, age, job은 필수 입력 요소입니다. 하지만 Partial로 인해 전부 optional property로 바뀐것을 확인할 수 있습니다. // Partial type People = { name: string; age: number; job: string; house?: boolean; } type 백수 = Partial cons..

Typescript '<variable>' is declared but its value is never read.

제목과 이미지에 나와있는 error는 typescript를 사용하면서 발생할 수 있습니다. 위와 같은 에러 상황이 나올수 있는 경우는 두가지 입니다. 1. 선언후에 사용하지 않는 변수가 있으면 Typescript compiler가 에러를 뱉어내게 됩니다. 2. functional Component에서 인자로 받은 변수를 사용하지 않으면 에러를 뱉어내게 됩니다. 가장 좋은 방법은 지시하는 대로 따르는 것이라 생각해요. 사용하지 않는 변수는 지워주고 사용하지 않는 인자도 지워주는 것이 좋지 않을까 싶습니다. 이 에러가 발생하는 원인과 해결책은 tsconfig.json에 있습니다. 아래와 같이 변경해주면 compile 해주는데 문제는 발생하지 않습니다. 아래 두개의 property가 true이면 위의 사진과 ..

작업 [백준 2056] - python

import heapq import sys input = sys.stdin.readline INF = 1e6 + 1 def BOJ2056() : N = int(input()) time = [0] graph = [[] for _ in range(N+1)] indegree = [0 for _ in range(N+1)] queue = [] for i in range(N) : temp = list(map(int, input().split())) time.append(temp[0]) if len(temp) > 2 : indegree[i+1] = len(temp[2:]) for k in temp[2:] : graph[k].append(i+1) for i in range(1, N+1) : if indegree[i] ..

display: block, inline, inline-block, none

display가 inline인지 block인지 확인할 수 있는 간단한 방법이 있습니다. 확인해보고 싶은 영역에 background-color를 설정해주면 확인할 수 있습니다. inline은 자신의 영역만 차지합니다. 또한 옆으로 쌓이게 됩니다. block은 가로 영역 전부를 차지합니다. 또한 위아래로 쌓이게 됩니다. 위의 이미지에서 확인할 수 있는 block은 , , , 이 있고 , 은 display속성이 Inline 입니다. display: block display: block은 가로영역 전부를 차지하게 됩니다. 또한 위아래로 스택처럼 쌓이게 되어 줄바꿈이 된것처럼 나타나게 됩니다. width, height을 설정할 수 있습니다. display: inline display: inline은 자신의 영역만..

box-sizing 속성

css의 속성중에 box-sizing은 요소의 넓이와 높이가 계산되는 방식에 변화를 줄 수 있습니다. box-sizing을 border-box로 주게 되면 css 속성중 설정한 width, height으로 태그가 고정되게 됩니다. padding과 border-width를 키워도 해당 태그는 width와 height으로 고정됩니다. box-sizing을 content-box로 주게 되면 padding과 border-width를 제외한 컨텐츠 들만 설정된 width와 height의 값을 가지게 됩니다. 아래의 코드를 보겠습니다. 코드의 실행 결과는 아래의 이미지 입니다. border-box content-box border-box의 총 width는 100px 입니다. content-box의 총 width는 ..

label 태그

Input 태그를 작성시 label 태그는 왜 필요한지???? 어떤 이점이 있을지 알고 싶었습니다. 크게 2가지의 이유로 필요하다고 생각합니다. 1. label 태그와 input 태그를 연결해주면 label 태그를 클릭함으로써 input 태그가 체크 or focusing 되게 할 수 있습니다. 이러한 동작은 웹의 ux에 도움을 줄것 같네요 2. 스크린 리더기에서 label 태그를 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있습니다. 이러한 두가지 이유가 있으니 이제 어떻게 사용하는지 알아보도록 하겠습니다. click me click me input 태그는 Label 밖에 위치할 수도 있고 안에 위치할 수도 있습니다. 밖에 위치할 경우 label의 for와 input의 id 값이 ..

innerHTML, insertAdjacentHTML, textContent, innerText

최근 프로젝트를 구현하던 중 DOM 요소의 text를 바꾸는 데도 innerHTML을 쓰는 것으로 피드백을 받은적이 있습니다. 그래서 어떠한 경우에 innerHTML을 써야 하는지 비슷한 대체 기능들은 언제 사용하여야 하는지를 알아 보려 합니다. innerHTML const content = htmlString; element.innerHTML = content; 와 같은 방식으로 사용할 수 있습니다. 위의 코드를 실행하면 element 내부의 모든 자손은 제거되고 문자열 htmlString의 HTML들을 파싱하고 생성된 노드로 대체됩니다. (HTML 로 파싱되기 때문에 HTML의 양식에 맞아야 합니다) innerHTML은 보안상의 허점을 가지고 있습니다. 스크립트 태그가 추가되는 경우가 있을수 있습니다..