나디아 성장 일기

📌 ::backdrop: 모달창과 모달창 뒤쪽을 분리하여 스타일을 지정할 수 있다.   최상위 레이어 요소 아래에 있는 모든 것을 모호하게 하거나 스타일을 지정하거나 완전히 숨길 수 있다. dialog::backdrop { background: rgb(255 0 0 / 25%);}    참고 ::backdrop - CSS: Cascading Style Sheets | MDNThe ::backdrop CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer.developer.mozilla.org  ::backdrop:..

📌 lang 속성: 텍스트가 사용해야 하는 언어를 정의하는 속성 * lang의 기본값은 "알 수 없음"이므로 항상 적절한 값을 지정해야 한다.   🔺 사용 이유스크린 리더가 lang 속성을 이용하여 자동으로 음성을 변환함 =>  웹 접근성 👍크롬 자동번역 인터페이스에 사용  ✨ 국가 코드(ISO Country Code)- lang 속성의 속성값 처음 두 문자 : 언어 코드(소문자)- lang 속성의 속성값 마지막 두 문자 : 국가 코드(대문자)  영어 = en(en-GB: 영국 영어, en-US: 미국 영) 중국어 = zh-CN( zh-Hant: 중국어(번체)) 프랑스어 = fe일본어 = ja 스페인어 = es(es-ES: 스페인, es-013: 중앙 아메리카) 러시아어 = ru(ru-Cyrl-BY..

📌 모달(Modal): 모달 창이 열렸을 때 기존에 있던 창을 사용하지 못하는 방식제어권을 독점하게 되어 모달창이 종료하기 전까지는 기존창을 작업할 수 없는 방식- 경고창 등   ✨ 팝업기존에 열려있는 브라우저 페이지 위에 또 다른 브라우저 페이지를 띄우는 창원래 브라우저와 독립적인 관계브라우저의 옵션을 통해 열리지 않도록 강제할 수 있음 => 모달과의 차이점    📌 모달리스(Modaless) / 논모달(Non-modal): 창이 열리더라도 기존에 있던 창을 작업할 수 있는 방식사용자가 순서에 상관없이 접근이 가능하기 때문에 사용자의 동작에 관계 없이 응용 프로그램의 상태를 일관성 있게 유지해야 함- 도구창, 편집 메뉴창    📍 모달 / 비모달을 사용하는 상황   참고  [api]모달과 모달리스..

📌 CSS (Cascading Style Sheet): HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다 Style sheet 언어 구조와 표현의 분리* Cascading: 폭포    🔺 CSS 적용 방식 외부 스타일 시트 : HTML 파일과 CSS 파일을 구분하는 방식 태그로 연결 내부 스타일 시트 : HTML 파일 내부에 CSS를 추가하는 방식  인라인 스타일 : HTML 태그 내부에 CSS를 선언하는 방식    🔺 기본 구조selector { 선언부1; 선언부2;}선택자(Selector) 선언부(Declaration block) 속성(Property) 속성 값(Value) 선언부는 세미콜론(;)으로 구분하여 여러 개 선언할 수 있다.  📌 CSS 변수(Custom Pro..