빵 입니다.

HTML의 각각의 요소들은 유사한 특성을 가진 요소들이 그룹화 된 0개 이상의 카테고리(범주)에 속해있다. 이 스펙에서는 광범위한 카테고리가 사용된다. Metadata content (메타데이터 콘텐츠) 문서의 표현, 동작을 수정하거나 다른 문서를 가리키는 링크 설정하거나 기타 “대역 외 정보”를 전달한다. , , , , , , Flow content (플로우 콘텐츠) 제목 요소, 구획 요소, 구문 요소, 임베딩 요소, interactive 요소 그리고 Form 관련 요소를 포함하여 요소에 들어 갈 수 있는 대부분의 요소를 포함하는 광범위한 영역 보통 텍스트나 내장 콘텐츠를 포함한다. , , , , , , ,, (en-US), , , , , , , , , , , , , , , , , , , , , , ,..

font-size 속성은 폰트의 크기(대문자 “M”의 크기)를 지정한다. em em은 웹 브라우저에서 글꼴 사이즈를 지정하지 않았을 때의 기본값 웹 브라우저에서 1em = 16px rem CSS3에서 새로 등장한 rem = root em root 요소는 rem 단위는 요소에 지정된 글꼴 크기로부터 ~ 선택된 요소의 글꼴 크기를 상대적으로 결정한다. em vs rem em은 부모 요소에 상대적으로 글꼴 크기를 상속받는다. rem은 root 요소()에 상대적으로 글꼴 크기를 상속받는다. em em은 부모로부터 글꼴을 물려받기 때문에, 같은 값을 지니더라도 노드가 깊어지면 글꼴 크기가 무한히 작아진다. => 부모, 조상 노드 가운데 어떤 요소의 글꼴 크기를 변경하면 자식, 자손 요소 모두가 영향받는다. => ..

절대 단위 다른 것과 관련 없이 일반적으로 항상 동일한 크기 대부분 화면 출력이 아닌 인쇄에 사용될 때 유용하다. 보통 사용하는 유일한 값은 px cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 단위 다른 요소(상위 요소의 글꼴 크기 또는 viewport 크기)와 관련 있다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 계획할 수 있다. em 요소의 글꼴 크기 ..

CSS Postprocessor(후처리기) SCSS로 작성된 파일이 컴파일을 통해 CSS로 변환되고, 변환된 CSS는 다시 PostCSS 플러그인에 의해 최종 변환한다. 장점 모듈식 사용 필요한 플로그인만 포함하여 사용할 수 있다. 전체를 다 포함하지 않아도 되므로 속도가 빠르다. (해당 페이지에 필요한 모듈만 갖다쓸 수 있다는…) JavaScipt 기반 필요한 플러그인을 직접 개발할 수 있다. CSS 표준 문법 기반 CSS 작성을 위해 별도로 학습할 필요가 없다. 단점 (Sass에 비해) 강력한 문법을 제공하지 않는다. 필요한 플러그인을 직접 찾아서 조립해야 한다. 플러그인 지원 중단될 수 있다. 웹팩 사용 시 설정 // webpack.dev.js const path = require('path'); ..

:read-only vs readonly :read-only 가상 클래스 요소를 사용자가 변경, 컨트롤 할 수 없다. input, textarea 제외한 모든 요소에서 사용 가능 readonly 속성 요소를 사용자가 변경, 컨트롤 할 수 없다. input, textarea 에만 적용 가능 📌 input, textarea 에 readonly 속성이 있으면 :read-only 가상 클래스 사용이 가능하다. 📌 input[readonly] 를 사용해 readonly 속성 들어간 요소에만 css를 줄 수 있다. readonly vs disabled readonly 속성 input, textarea 에만 적용 가능 포커스 받을 수 있다. (Tab키 사용 가능) 서버로 값이 전달된다. disabled 속성 butt..

a태그 => 화면 전환 => 리소스 처음부터 끝까지 다시 호출. router-link => 기존 리소스 그대로 사용하기 때문에 새로 불러오지 않고, 사용할 컴포넌트만 불러옴 => 태그 생성. => 선언적 방식. 클릭 시 url 로 이동만 한다. 📌 router.push는 router-link 를 클릭 할 때 내부적으로 호출되는 메소드 ===> router-link를 클릭하면 router.push를 호출하는 것과 같다. router.push() => 자바스크립트로 주소창만 변경해주고, 히스토리 쌓고, 컴포넌트만 변경한다. => 주소 추가하기 위해 onClick과 같은 이벤트 핸들러와 같이 사용된다. => , 등 어떤 태그에 이벤트를 발생시켜 주소를 추가해서 => window.history API와 비슷하게..

CSSOM tree와 DOM tree는 Render tree로 결합된다. Render tree는 표시되는 각 요소들의 “레이아웃”을 계산하는 데 사용되며, 각 노드를 화면의 실제 픽셀로 렌더링하는 페인트 프로세스에서 사용하는 입력값으로 사용된다. HTML, CSS 입력값을 기반으로 DOM tree와 CSSOM tree를 만들었다. 그러나 둘 다 document의 다른 측면을 캡처하는 독립적인 객체이다. 하나는 콘텐츠에 대한 설명이고, 하나는 document에 적용해야하는 스타일 규칙에 대한 설명이다. 어떻게 두가지를 병합하고, 브라우저가 화면의 픽셀을 렌더링하도록 할까? 📌 TL;DR DOM tree와 CSSOM tree가 결합되어 Render tree를 만든다. Render tree는 화면을 렌더링하는..

브라우저가 페이지를 렌더링하려면 DOM tree와 CSSOM tree가 필요하다. 결과적으로 우리는 가능한 빨리 브라우저에 HTML과 CSS를 전달해야 한다. 📌 TL;DR Bytes -> characters -> tokens -> nodes -> object model. HTML 마크업은 DOM으로 변환된다. CSS 는 CSSOM으로 변환된다. DOM, CSSOM은 독립적인 데이터 구조 Chrome DevTools Timeline을 사용하면 DOM과 CSSOM의 구성과 처리 비용을 캡처하고 검사할 수 있다. 📌 Document Object Model (DOM) Hello web performance students! 약간의 텍스트와 이미지 하나가 있는 plain HTML이 있다. 브라우저는 이 페이지를..

맥북만 쓰다가... 너무 오랜만에 PC를 켰다. vue3 앱을 만들려고 node와 npm을 정비하려고 하는데..... 업그레이드가 되지 않았다...! node는 latest로 업데이트를 해줬는데, npm이 업데이트가 안되는 이슈 ㅠ.ㅠ 문제1. prefix -g가 더 이상 사용되지 않는다. 대신 prefix --location=global을 사용한다. npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security u..

S2020에서 새로 나온 문법. 구식 브라우저는 폴리필이 필요. 옵셔널 체이닝 연산자 ?. 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. 참조가 * nullish라면, 에러 발생하지 않고 undefined를 반환한다. 함수가 존재하지 않는다면 undefined를 반환한다. 선언되지 않은 루트 객체에 사용할 수 없다. 정의되지 않은 루트 객체에 사용할 수 있다. * nullish : nullish 값은 null이나 undefined이다. 항상 false. 문법 obj?.prop obj?.[expr] arr?.[index] func?.(args) 예시 중첩된 구조를 가진 객체에서 obj가 있다. optional chaining이 없이..