whatisthis?

REFERENCE Array.prototype.sort() - JavaScript | MDN sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. developer.mozilla.org Array.prototype.sort() sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환함. const array1 = [1, 30, 4, 21, 100000]; array1.sort(); >> Array [1, 100000, 21, 30, 4] 숫자여도 문자열처럼 나열한다. (ASCII코드 대로) compareFunction이 제공되지 않으면 요소를 문..

REFERENCE https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/label label - JavaScript | MDN 레이블 구문은 break나 continue 구문과 함께 사용할 수 있다. 원하는 식별자로 구문 앞에 레이블을 추가할 수 있다. developer.mozilla.org 레이블(Label) 은 중첩 반복문을 빠져나갈 때 사용함. break나 continue 구문과 함께 사용할 수 있고, 원하는 식별자로 구문 앞에 레이블(Label)을 추가할 수 있다. Syntax label : statement - break나 continue에서만 레이블을 사용할 수 있다. - break는 모든 레이블 구문에서 사용될 수..

REFERENCE https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/switch switch - JavaScript | MDN The switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case. developer.mozilla.org 케이스가 지정된 if문이라 생각하면 쉽다. if문은 조건에 true/false에 따라 달라..

REFERENCE: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/break break - JavaScript | MDN break 문은 현재 반복문, switch 문, 또는 label 문을 종료하고, 그 다음 문으로 프로그램 제어를 넘깁니다. developer.mozilla.org 현재 반복문, switch 문, 또는 label 문을 종료하고, 그 다음 문으로 프로그램 제어를 넘긴다. Switch문 https://mywebproject.tistory.com/207 Label문 https://mywebproject.tistory.com/208 * 반복문 반복문에서는 보통은 while문과 함께 사용함. #1. let i ..

Float The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow. https://developer.mozilla.org/ko/docs/Web/CSS/float float - CSS: Cascading Style Sheets | MDN CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로..

Box - Block - Inline - Inline Block - Flex display 속성 - box 의 속성을 바꿔줌. 모든 html 요소는 box로 표현되므로 display를 가지고 있음. Inline Block Inline 과 Block의 좋은 점을 합친 느낌. 지난 inline box 예제에서 의 display를 inline-block으로 설정해주자. span { display: inline-block; } display: inline (span의 default값) 일때는 ❌❌❌❌ 사용불가 ❌❌❌❌ width , height padding (top/bottom) border (top/bottom) margin (top/bottom) 위와 같은 특성때문에 padding-bottom을 해주면 위..

Box - Block - Inline - Inline Block - Flex display 속성 - box 의 속성을 바꿔줌. 모든 html 요소는 box로 표현되므로 display를 가지고 있음. Inline Box = 글자 처럼 취급. Box를 상하로 정렬했다면 Inline은 옆으로 늘이는 느낌. box 타입은 한 줄을 전부 차지해서 위-아래로 쌓이지만, inline 타입은 한 줄을 전부 차지하지 않기 때문에 한 줄에 여러 inline을 옆으로 늘일 수 있다. 대신, 만약 너무 길어진다면 자동으로 줄바꿈 된다. ** block = 면 (영역을 잡기 위해) ** inline = 선 (content를 옆으로 흐르게 하기 위해) 💡 ❌❌❌❌ 사용불가 ❌❌❌❌ width , height padding (to..

Box - Block - Inline - Inline Block - Flex display 속성 - box 의 속성을 바꿔줌. 모든 html 요소는 box로 표현되므로 display를 가지고 있음. Block - 한 줄을 전부 차지. (block : 막다 / 차단하다) - 다음 element가 자기 옆에 오지 못하고, 아래에 오도록 막아버림 1. block의 width를 따로 설정하지 않는다면, 자신의 부모의 content-box (100%) 만큼 width를 차지함. Child 2. block의 width를 따로 설정해주면? 남은 공간은 margin으로 자동으로 채움. width: 300px로 설정한다면? 남은 공간 ( 위 사진상 주황색 부분 ) 은 margin으로. computed에서 값으로 나와있진..

index.html Hello CSS style.css .box{ width: 480px; height: 480px; padding-left: 50px; padding-top: 40px; background-color: #0066FF; color: #FFF; } 우리가 원하는 결과는 정사각형 (480* 480) 인데, 개발자도구로 확인해본 결과 530*520으로 되어있다. 탭에서 확인해보니 우리가 width/height를 설정해준 부분은 content이고 padding까지 포함하니 더 커지는 것. 그래서, 전체 크기가 480*480이 되게 하려면 계산을 해서 padding left와 top값을 빼줘야함. .box{ width: 430px; height: 440px; padding-left: 50px; p..

content > padding > border > margin 순으로 바깥으로 뻗어나간다. 또한 각 값은 left, right, top, bottom으로 나눠져서 값을 따로 지정해줄 수 있다. 예> border-right : 20px; img cr : https://www.geeksforgeeks.org/ 가로 = width 세로 = height 1/ content content, 즉 내용을 담는 공간. 2/ padding content와 border사이에 안쪽 여백. 3/ border 테두리. (굵기 / 스타일 / 색상값 필요 - 순서는 무관) border: 1px solid #000000 border: none - 테두리 없앰 위쪽에만 border을 만들고 싶다면? border-top: 1px so..