20.04.27 - 05.01 :: 2주 동안 공부했던 것들이나 부족한 점을 정리하는 포스팅

논리연산자

논리연산자에는 &&(그리고) ||(또는)이 존재하는데 추가로 !(아닌)이라는 뜻을 가진 연산자가 존재한다. !는 참이면 false로 거짓이면 true로 바꿔준다. 

 

array

arrayJoin

배열의 모든 요소들을 연결해주는 역할을 해서 하나의 문자열로 만들어준다.

const arr = ['my', 'phone', 'is', 'where', '?']

console.log(arr.join(''))
//'my phone is where ?'

 

display flex

• flex-direction
  : 컨테이너 내의 아이템을 배치시 사용 할 주축과 방향을 지정한다. 
• flex-flow
  : 기본 축과 교차 축을 함께 정의 가능하다. 요소가 유연한 항목의 경우에만 flex-flow속성이 적용된다.
  (flex-direction + flex-wrap)
• flex-grow
  : 비율로 사용되는 단위가 없는 값을 허용한다. flex container내에 사용 가능한 공간의 양을 표시한다. 요소 내부에서 할당하며, 가능한 공간을 선언해준다. (flex-shrink: flex-item이 축소되는 기능, flex-basis: 나머지 공간이 분배되기 전 요소의 기본 크기를 정의, 속성와 함께 사용한다.)
• order
  : flex내부에 있는 요소들을 순서를 지정해 줄 수 있다.

A Complete Guide to Flexbox | CSS-Tricks

 

 

querySelectorAll() | querySelecor()

• querySelectorAll() : CSS선택자를 통해 document에서 일치하는 모든 element를 가져오는데, 배열로 가져옴
• querySelector() : CSS선택자를 통해 document에서 가장 처음에 있는 element를 하나만 가져옴.

추가로 여러개의 값을 가져오고 싶다고 하면 querySelector for문을 사용하거나 getElementByClassname을 사용하면 된다. 이 방법도 배열로 가져오기 때문에 for문을 사용해주면 된다.

 

 

void element.offsetWidth;

페이지가 연속적으로 변경 될 수 있도록 도와준다. 여러 항목을 연속적으로 변경하는 것이 일반적이므로 브라우저는 누적된 변경 사항을 일괄 처리하고 수행중인 작업이 끝날 때만 계산을 수행한다. 이 코드가 존재하지 않으면 반복적인 행동을 하지 못한다.

What purpose does void element.offsetWidth serve?

 

string method

• substring(시작인덱스, 종료인덱스)
• includes('')
  : 특정 문자가 문자열에 포함되어 있는지 판별해서 결과를 true, false로 반환해준다.
• indexOf()
  : string객체에서 값과 일치하는 첫번째 인덱스 반환, 없으면 -1반환
• slice()
  : 문자열 일부를 추출 가능하다. 그런 다음 새로운 문자열을 반환, ()의 값이 음수면 -1을 시작으로 문자열 맨 뒤에서 부터 계산함
• split()
  : 내가 지정한 구분자를 이용해서 여러개의 문자열로 나눈다.
• startsWith() <-> endsWith()
  : 문자열이 특정 문자로 시작하는지 확인 후 true, false로 반환.

let str = '오늘 나느은 열코한다.';
let strSub =  str.substring(0,2); 
let strString = str.substring(5, ); 

console.log(strSub); //'오늘'
console.log(strString); //'은 열코한다.'
console.log(strSub+strString); //'오늘은 열코한다.'

strString.includes('열'); //true

let strSplit = str.split('');
console.log(strSplit); //[ '오늘', '나느은', '열코한다.' ]

str.indexOf('열'); //7
str.slice(7, 9); //'열코'

strSplit[1].startsWith('나'); //true

 

viewPort

https://dev.to/fullstack_to/units-in-css-em-rem-pt-px-vw-vh-vmin-vmax-ex-ch-53l0

대부분의 브라우저의 기본 글꼴 크기는 16px로 viewport의 경우 백분율로 계산하기에 viewport의 값을 100분의 1하는 값을 의미한다. %보다 명확한 단위라고 생각하면 된다. 반응형 웹과 같은 곳에서 쓰일수록 편하며 브라우저의 넓이가 1092px이면 1vw는 10.92px이 되는 것을 의미한다.

• vw, vh: %와 가장 유사한 단위
  vw: 전체 viewport 너비의 백분율로 브라우저 윈도우의 전체 폭에 상대적이라고 할 수 있다.
  vh: 전체 viewport 높이의 백분율로 vw와 동일하게 적용된다. 

div{
	width: 50vw
    //현재 뷰포트 가로폭의 50%, 휴대폰의 가로가 320px일 때 160px을 의미한다.
	height: 100vh
    //현재 뷰포트 높이의 100%를 차지한다.
}

• vmin, vmax
  vmin: viewport 너비 또는 높이의 백분율 중 가장 작은 값.
  vmax: viewport 너비 또는 높이의 백분율 중 가장 큰 값.

div{
	//브라우저의 크기가 1092*900이라고 가정 하면
    height: 1vmin;
    //9px이 되고
    width: 1vmin;
    //10.92px이 된다.
    
    //100vmax는 위의 값 중 더 큰값을 선택하는 것이니 width의 값인 10.92
}

• calc
  백분율 및 픽셀과 같은 단위를 혼합하는 기능으로 기본 크기를 보다 안정적인(16px)로 더 작은 viewport과 결합해 브라우저가 수학을 실행 할 수 있도록 하는 기능이다. 연산자 기호 양쪽으로 공백이 삽입 되어야하며, 계산은 같은 분류끼리만 해야한다. (높이면 높이끼리, 넓이면 넓이끼리)

height: calc(16px + 0.5vw);
//연산자 주위에 공백이 필요하다.
overflow-y: auto;
//요소가 넘치는 것을 방지하는 스크롤 기능 추가

 

Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, ...)

Fun with Viewport Units | CSS-Tricks

 

CSS ellipsis : 텍스트 글자 생략

text-overflow 속성을 사용하려면 몇가지 과정이 필요하다. 그 조건이 만족되어야 생략 기호로 나타낼 수 있다. 이 속성은 display속성이 블록형태인 경우에만 적용된다. inline의 경우 적용되지 않는다. 이를 적용하기 위해서는 block 또는 inline-block과 같이 설정해야만 한다. 

• width, height가 고정적이여야한다.
• overflow:hidden; - 튀어나간 영역을 감춰야한다. 
• white-space:nowrap; - 아랫줄로 내려가는 것을 막기 위함이다.
• text-overflow: ellipsis;

 

CSS에서의 줄바꿈 

p {
  width: 13em;
  background: gold;
}

.overflow-wrap {
  overflow-wrap: break-word; //단어 단위로 끊기
}

.word-break {
  word-break: break-all; //width값에 닿으면 끊기
}

.hyphens {
  hyphens: auto; //hyphen단위로 끊기
}

 

Void element.offsetWidth;

페이지가 연속적으로 변경 될 수 있게하는 기능, 여러항목을 연속적으로 변경하는 것이 일반적이기에 브라우저는 누적된 변경사항을 일괄 처리하고 수행중인 작업이 끝날 때만 계산을 수행한다. 이 코드가 존재하지 않으면 반복적인 행동을 하지 못함.

What purpose does void element.offsetWidth serve?

 

querySelectorAll()

: 지정된 셀렉터 그룹에 일치하는 다큐먼트의 모든 엘리먼트 리스트를 나타내는 정적 list를 반환한다.

• querySelector(): 타겟의 자식요소 하나만 가져옴
• querySelectorAll(): 타겟의 모든 요소를 가져온다. 배열 형식으로 값을 가져온다.

 

Node.cloneNode ()

let liNode = commentList.cloneNode(true);

• liNode - 복제된 node의 이름
• commentList - 복제되어야 할 node
• true - 해당 node의 children 까지 복제 true, 해당 node 만 복제 false

Node.cloneNode()

만약 사용하고 싶다면?

let nodeSpan = liNode.querySelector('.font-bold');
nodeSpan.innerHTML = 'gwonRan';
let nodeVal = liNode.querySelector('.inputVal');
nodeVal.innerHTML = inputBox[i].value;