전체 글 126

왜 typeof null은 object일까.

Null은 object 값이 '의도적으로' 없는 것을 의미한다. primitive value 중의 하나지만 typeof null //object typeof 함수에서 object를 리턴한다. 이는 stackoverflow.com/questions/20480729/why-does-typeofnull-return-object-but-you-cant-assign-properties-to-it/20480863#20480863 여기서 그 이유를 알 수 있다. 이와 비슷한 경우로 NaN이 있는데, NaN은 not a number의 줄임말임에도 불구하고 typeof NaN은 number를 리턴한다. 그 이유는 NaN이 Number를 다룰 때 사용되기 때문이다. 따라서 이에 연정선에서, null은 object가 '의도..

primitive type vs. reference type

지금은 확실하게 개념이 잡혀있는 것 같지 않기에 우선 오늘 알게 된 것을 정리하고 넘어가려고 한다. primitive type은 let a = 3; 과 같이 선언과 할당과정을 거칠 때, 1) a에 주소를 할당 (a의 주소는 300) 2)3에 주소를 할당 (b의 주소는 500) 3) a가 값으로 3의 주소를 가짐 (300의 주소를 가지는 변수명 a는 주소 500을 값으로 가짐) 과 같은 방식이 이루어진다. 이때, 만약 a = 4; 로 a에 다른 값을 할당하면, 1) 4에 주소를 할당 (4의 주소는 501) 2) a가 값으로 4의 주소를 가짐 (300의 주소를 가지는 변수명 a는 주소 501을 값으로 가짐) 따라서 숫자 3은 주소 500에 그대로 남아있는 상태가 된다. (주소 500에 할당되어 있는 데이터는..

Flexbox

heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog flex에 대해 매우 자세히 나와있는 곳이다. 우선 container에는 display, flex-flow, justify-content 속성을 사용할 수 있다. 또한 그 container 안의 박스들에는 order, flex, align-self 속성을 사용할 수 있다. container display container..

길/CSS 2021.01.24

line-height

기본적으로 부모 값을 상속한다. line-height은 px을 이용하여 고정할 수도 있고 rem/em을 이용하여 상속 받아 사용할 수 있다. 혹은 그냥 숫자만 입력할 수 있다. 숫자를 입력하면 폰트 사이즈를 기준으로 입력된 숫자를 배율로 적용하여 행간이 정해지는 것으로 보인다. 따라서 숫자를 이용하여 정하는 것이 다양한 폰트 사이즈에 따른 상대적인 행간을 적용하기 좋은 것으로 보인다. rem이나 em을 사용한다면 루트나 부모에서의 행간 수치에 대해 배수로 적용되기 때문에, 원하는 태그 안에 있는 폰트가 해당 수치보다 크면 글자가 겹쳐지게 된다.

길/CSS 2021.01.24

box model

block vs. inline, inline-block block inline-block inline 줄바꿈 여부 줄바꿈 가능 줄바꿈 불가 줄바꿈 불가 기본적인 너비 100% 글자가 차지하는 만큼 글자가 차지하는 만큼 width, height 부여 가능 여부 가능 가능 불가능 과 같은 inline 엘리먼트에 display : inline-block 속성을 주면, 이 차지하는 고유의 크기를 지정할 수 있게 된다. border border는 border에 특성을 부여한다. border는 단축 속성으로서 아래의 하위 속성을 갖는다. border-color border-style border-width developer.mozilla.org/ko/docs/Web/CSS/border border - CSS: Ca..

길/CSS 2021.01.21