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..

"어피티"란 경제뉴스 구독 중에 "가계부가 정말로 중요한 이유" 에 대한 글과 함께 내가 가계부를 쓰면서 분류하기 좋을 것 같아 글 부분만 블로그에 적어본다. 어피티 링크(구독하면 좋다). https://uppity.co.kr/ UPPITY 어피티 돈 이야기의 시작, 어피티 uppity.co.kr 고정비 : 월세, 관리비 등 매달 자동이체로 지출하는 비용. 생활비 : 식비, 병원비 등 생존하기 위해 지출하는 비용. 활동비 : 여행, 취미 등 풍요로운 생활을 위해 지출하는 비용. 친목비 : 모임비, 데이트비 등 타인과 어울리기 위해 지출하는 비용. 꾸밈비 : 의류, 헤어, 잡화 등 외적인 꾸밈을 위해 지출하는 비용. 차량비 : 주유비, 자동차보험 등 차량유지를 위해 지출하는 비용. 기여비 : 부모님 용돈,..

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 는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다.