👩🏻‍💻STUDY

상수객체 const로 선언된 객체는 수정 될 수 있다. const user = { name: 'John' }; user.name = 'Pete'; console.log(user.name); // Pete const는 한 번이라도 값을 할당한 변수가 변경되는 걸 막는다. 변수 user는 객체 참조 값을 저장하고 있는데, const는 이 값이 변경되는걸 막는 것이지, 객체의 내용 (프로퍼티)을 변경하는 건 막지않는다. 계산된 프로퍼티 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있을 경우, 이를 계산된 프로퍼티 (computed propery) 라고 부른다. let fruit = prompt('어떤 과일을 구매하시겠습니까?', 'appl..

nullish 병합연산자 ?? 최근에 추가됨. 스펙에 추가된지 얼마안된 문법. 구식 브라우저는 폴리필이 필요하다. nullsh 병합연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다. a ?? b 의 평가 결과는 다음과 같다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다. x = (a !== null && a !== undefined) ? a : b; ??와 ||의 차이 ||는 첫 번째 truthy값을 반환. ??는 첫 번째 정의된(defined) 값을 반환. null과 un..

웹접근성 주의할 부분 1. label || title form에서 label과 input이 들어갈 때 label에 input 의 아이디를 넣어 연결시켜준다. 하지만 label이 없을 경우 input에 title=""를 넣어 명시해준다. 2. aria-hidden 화면상 숨겨지거나 가려진 콘텐츠 ARIA를 적용하여 모바일 스크린리더기가 접근하지 않도록 구현. undefined(default) true 접근성 API 차단. (화면표시 여부와 무관 API 차단) false 접근성 API 사용. (화면에 표시한 경우 API 사용) aria-hidden vs hidden aria-hidden :: 화면에 표시되나 접근성API(보조기기 접근 가능성) 차단 상태 결정. hidden :: 화면에 표시되지 않아 접근 불..

parent child 차이를 보기 위해 먼저 .parent 클릭! // jQuery $('.parent').on('click', function(e) { console.log('e.target', e.target); console.log('e.currentTarget', e.currentTarget); console.log('$(this)', $(this)); console.log('this', this); }); .child 클릭! // jQuery $('.parent').on('click', function(e) { console.log('e.target', e.target); console.log('e.currentTarget', e.currentTarget); console.log('$(this..

1. flex-basis : 아이템의 기본크기 기본값 auto #container { display: flex; max-width: 800px; margin: auto; border: 3px solid #000; background-color: #fff; } .item { font-size: 40px; flex-basis: auto; } #container { /* 위와 동일 */ } .item { font-size: 40px; flex-basis: 120px; } 2. flex-grow : 아이템의 너비 비율 기본값 0 flex-grow 값이 1이면 1:1 비율로 맞춰지는게 아니라 여백을 기준으로 비율이 맞춰지는 것이다. .item { flex-grow: 1; } 너비를 똑같이 나타내고 싶을 때는, ...

flex-basis가 항상 width에 적용되는 것은 아니다. flex-direction: row인 경우, flex-basis 는 너비를 제어한다. 그러나 flex-direction: column인 경우, flex-basis는 높이를 제어한다. 주요차이점 flex-basis는 flex item만 적용된다. flex container 는 flex-basis 를 무시하지만 width나 height는 사용할 수 있다. flex-basis는 주축에서 작동한다. 예를 들어 flex-direction: column은 플렉스 항목의 크기를 가로로 조정하려면 width 속성이 필요하다. 절대위치에 있는 flex 항목에는 영향을 주지 않는다. #container { display: flex; flex-direction:..

strong 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용. 브라우저는 일반적으로 요소의 콘텐츠를 굵은 텍스트로 표현. b HTML5에서 제목(heading)은 부터 태그로, 강조된 텍스트는 태그로, 중요한 의미를 가지는 텍스트는 태그 사용. 하이라이트된 텍스트는 태그로 표현. 따라서 위의 태그들에서 적절한 태그를 찾을 수 없을 때만 마지막 선택지로 태그 사용. em 강조된 텍스트를 표현. HTML5에서도 여전히 지원, 대신 CSS를 사용하면 더욱 다양한 효과를 줄 수 있다. strong vs b 요소는 텍스트 자체의 주의를 끌기 위해 사용, 은 요소의 콘텐츠 자체의 중요성 강조할 때 사용. strong vs em 요소는 구어체 강조와 같이 문장의 의미를 변경하는데 사용("I love c..

abbr abbr 단어의 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의할 때 사용. 브라우저나 번역 시스템, 검색 엔진에 유용한 정보를 제공. 요소 위에 마우스를 올려놓으면 title 속성으로 명시한 단어의 원형이 나타난다. IOC (국제 올림픽 위원회)는 스위스 로잔에 본부를 둔 국제 스포츠 기구이다. acronym acronym 머리글자로만 된 단어(acronym)를 정의. 더 이상 지원하지 않으며 대신 요소를 사용한다. 요소 위에 마우스를 올려놓으면 title 속성으로 명시한 단어의 원형이 나타난다. AJAX 는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다.