CSS
box-sizing
box-sizing을 알려면 먼저 box model부터 알아야 한다. box model은 HTML 요소가 웹 페이지에서 차지하는 영역을 정의한 것이다.
그림을 통해 한 요소의 box model의 크기를 계산하면 다음과 같다.
안쪽부터 순서대로
:콘텐츠 크기 + padding값 + border값 + margin값
padding과 margin은 **border를 기준으로 내부인지 외부인지**에 따라 여백을 설정하는 속성이라고 보면 된다.
그렇다면 box-sizing이란?
: box-sizing은 요소의 너비와 높이를 계산하는 방법을 지정하는 속성 이다. box-sizing의 초기값은 content-box이다.
💡 content-box
: 설정한 width와 height 값이 곧 요소 내부의 콘텐츠 크기
💡 border-box
: 설정한 width와 height 값이 안쪽 여백과 테두리까지 포함
즉 border-box로 설정하면 요소의 width 값은 콘텐츠 크기 + 좌우 padding 값 + 좌우 border 값으로 계산된다.
코드카타
16번 - x만큼 간격이 있는 n개의 숫자
자바스크립트 배열 추가, 삭제 함수
- 배열 요소를 추가하는 방법
- push
let arr = ['a', 'b', 'c'];
// arr = ['a', 'b', 'c', 'd'];
arr.push('d'); // 배열의 끝(뒷쪽)에 요소를 추가- unshift
let arr = ['a', 'b', 'c'];
// arr = ['d', 'a', 'b', 'c'];
arr.unshift('d'); // 배열의 앞쪽에 요소를 추가- splice : arr.splice("위치", 0, ["요소1", "요소2"...])
splice 함수는 원하는 위치에 하나 이상의 요소를 추가하거나 삭제할 수 있다.
let arr = ['a', 'b', 'c'];
// arr = ['a', 'b', 'd', 'c']
arr.splice(2, 0, 'd'); // index 2 ('c')의 위치에 요소를 추가
// arr = ['a', 'b', 'd', 'c', 'e', 'f']
arr.splice(4, 0, 'e', 'f'); // index 4의 위치에 2개의 요소를 추가- 배열 요소를 삭제하는 방법
- pop
let arr = ['a', 'b', 'c', 'e', 'f'];
// arr = ['a', 'b', 'c', 'e']
arr.pop(); // 배열의 마지막 요소를 제거
// arr = ['a', 'b', 'c']
const popped = arr.pop(); // arr의 마지막 요소를 제거하면서 popped에 arr에서 제거한 요소를 반환 받을 수 있음
// popped = 'e'- shift
let arr = ['a', 'b', 'c', 'e', 'f'];
// arr = ['b', 'c', 'e', 'f']
arr.shift(); // 배열의 첫 번째 요소를 제거
// arr = ['c', 'e', 'f']
const shifted = arr.shift(); // arr의 첫 번째 요소를 제거하면서 shifted에 arr에서 제거한 요소를 반환 받을 수 있음
// shifted = 'b'- splice : arr.splice("시작위치", "제거건수")
let arr = ['a', 'b', 'c', 'e', 'f'];
// arr = ['a', 'b', 'e', 'f'];
arr.splice(2, 1); // index 2 부터 1개의 요소('c')를 제거
// arr = ['a', 'f'];
arr.splice(1, 2); // index 1 부터 2개의 요소('b', 'e')를 제거
// arr = ['a'];
const removed = arr.splice(1, 1); // 제거한 요소를 반환 받을 수 있음
// removed = 'f'- delete
let arr = ['a', 'b', 'c', 'e', 'f'];
// arr = ['a', undefined, 'c', 'e', 'f'];
delete arr[1]; // delete로 배열을 삭제할 경우 요소는 그대로 존재하며 값만 삭제됨splice 함수에 대한 추가 기능
array.splice("시작위치", "제거건수", ["요소1", "요소2" ... ])splice 함수는 요소를 제거 후 해당 위치에 새로운 요소를 추가할 수 있다.
함수를 사용하지 않고 추가, 삭제 방법
(자바스크립트는 배열의 길이를 동적으로 변경할 수 있다.)
let arr = ['a', 'b', 'c'];
// arr = ['a', 'b', 'c', 'e']
arr[arr.length] = 'e'; // 배열의 끝에 요소를 추가
// arr = ['a', 'b', 'c']
arr.length = arr.length - 1; // 배열의 크기를 한 칸 줄인다.
// arr = ['a', 'b', 'c', undefined, undefined, 'g']
arr[5] = 'g'; // index 5에 요소를 추가, 빈 요소 ([3],[4])는 undefined