나디아 성장 일기

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

📌 github 페이지 배포하기 해당 레파지토리의 Settings 👉 Pages 👉 Branch 설정 👉 Save  완료

한국 okky OKKY - All That DeveloperOKKY는 국내 최대 개발자 지식공유 플랫폼입니다. 개발자에게 필요한 기술 Q&A, 아티클, 커리어, 네트워킹, 취업, IT행사를 지원합니다okky.kr   커리어리 커리어리 | 요즘 개발자 커뮤니티 커리어리개발 트렌드, Q&A, 탑 개발자들과의 네트워킹까지. 누구나 쉽고 간편하게 성장할 수 있도록. 요즘 개발자들의 필수 커뮤니티careerly.co.kr   요즘 IT 요즘 사람들의 IT 매거진, 요즘IT매일 업데이트되는 요즘 사람들의 IT 이야기! 개발, 디자인, 기획, 다양한 IT 콘텐츠와 함께 성장해보세요.yozm.wishket.com   로켓펀치 로켓펀치 - 비즈니스 네트워크국내 최대 비즈니스 네트워크 '로켓펀치'입니다. 프로필을 만들고 ..

📌 README : 해당 Repository에 대한 설명을 위해 작성하는 안내문 프로젝트의 목적, 설치 방법, 사용 방법 등을 설명  🔺 README의 특징 보통 Repository의 최상위 폴더에 위치한다.하위 폴더에도 별도의 README를 작성할 수 있다.MarkDown(마크다운) 문법으로 작성된다.✨ MarkDown: 일반 텍스트 텍스트 문서에 서식 요소를 추가하는 데 사용할 수 있는 경량 마크업 언어 - Markup 언어에서 파생됨 (태그는 사용 X) ✨ Markup : 텍스트를 정의하고 표현하기 위해 고안된 것 (ex. HTML)   🔺 README 작성 요건 최신 정보 제공 변경 사항이 생길 시 README도 함께 업데이트해야 함❗ 간결하고 깔끔하게 작성 목차 구성 제목에 링크 설정   ..

📌 코드 스니펫(Snippets) 사용하기* 코드 스니펫(Snippets): 재사용 가능한 코드 조각  1. command palette(ctrl+shift+p) 열기 2. snippets 검색 3. 'snippets Configure User  Snippetes' 선택 4. 'New Global Snippets file' 선택  5. 파일 이름 타이핑 하기 (=> 파일이 열림) 6. 아래 링크에서 저장할 내용 붙여넣기 snippet generatorSnippet generator for Visual Studio Code, Sublime Text and Atom. Enjoy :-)snippet-generator.app- Description: 텍스트 이름 - tab trigger: 사용할 단어 - yo..

📌 웹 접근성(Web Accessibility): 모든 사용자가 웹 사이트 및 웹 애플리케이션을 이해하고 이용할 수 있는 능력장애가 있는 사람, 고령자 등을 포함한 모든 사용자가 웹을 사용할 수 있도록 하는 것을 목표로 한다.웹 사이트나 애플리케이션을 설계하고 개발할 때 특정 규칙과 지침을 준수해야 한다.이러한 규칙은 W3C (World Wide Web Consortium)에서 발표한 웹 콘텐츠 접근성 지침(WCAG)에 기반한다.  📌 웹 콘텐츠 접근성 가이드라인 (Web Content Accessibility Guidelines, WCAG): W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안 - 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록..

📌 코드 한 번에 Wrap하기 wrap할 코드 블럭 잡기 command palette 열기* ctrl + shift + p : command palette 열기Emmet: Wrap with Abbreviation 치고 선택 블럭 잡은 코드를 wrap할 태그 치기 * 단축키로 저장하기command palette 열기 `emmet: Wrap with Abbreviation` 치고 오른쪽 톱니바퀴 누르기단축키 Ctrl + Shift + E로 저장해놓음   📌 연산 등록키 저장하기1. command pallete에 math 검색 2. Emmet: Evaluate Math Expression 톱니바퀴에서 단축키 저장 단축키 Ctrl + M으로 지정해놓음