나디아 성장 일기

📌 reset : 브라우저마다 다른 기본 스타일을 초기화 하는 것  reset.css: 기본 스타일을 극단적으로 제거Eric Meyer’s CSS Reset CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're intermeyerweb.com  Normalize reset : 브..

📌 Naming Convention (네이밍 컨벤션)  Pascal Case / Title Case : 단어 첫 글자를 대문자 MainContent Kebap Case : 하이픈으로 단어 연결 main-content Snake Case (Underscore) : 언더바(_)로 단어 연결 main_content Camel Case : 첫 글자는 소문자, 다음 단어의 첫 글자는 대문자 mainContent

📌 폰트 로컬 폰트(Local Font) : 로컬에서 직접 제공하는 폰트 운영체제(컴퓨터)에 내장된 기본 폰트성능, 렌더링 이슈 발생 위험크로스 브라우징 상태에서 폰트가 적용되지 않을 수도 있는 위험이 있음웹 페이지의 디자인에 사용된 폰트가 사용자 시스템에서 지원되지 않는 폰트면 대체 폰트가 사용되어 디자인이 변경될 수 있다. 웹 폰트(Web Font) : 웹 페이지에서 사용되는 폰트 컴퓨터에 해당 폰트가 설치되어 있지 않아도 서버에서 제공하는 폰트 파일을 다운로드 받아 화면에 표시할 수 있다.  폰트 파일을 서버가 갖고 있음 => 클라이언트 요청에 따라 폰트를 보내줌사용자가 웹 페이지를 방문할 때, 해당 폰트는 웹 서버에서 불러와 사용되므로 사용자의 시스템에 설치되어 있지 않아도 일관된 디자인이 유지..

📌 localhost (로컬 호스트) : 인터넷이나 다른 네트워크에 연결되지 않은 자신의 컴퓨터로컬 호스트를 사용하면 인터넷 연결 여부와 상관없이 항상 자신의 컴퓨터에 접근할 수 있다.  ✨ 127.0.0.1: 로컬 호스트를 가리키는 IP 주소 네트워크 테스트 및 개발 목적으로 사용인터넷 연결의 영향을 받지 않고 개발 환경을 설정하고 테스트할 수 있기 때문에 유용하다.  IP 확인하는 사이트 localhostYour HTTP Request Header GET / HTTP/1.1 Host: locallhost.com User-Agent: facebookexternalhit/1.1; kakaotalk-scrap/1.0; +https://devtalk.kakao.com/t/scrap/33984 Accept..

fiveserver 설치 순서# 1.npm install --global degit# 2.npm install --global add-gitignore# 3.mkdir 파일명# 4.cd 만든 파일# 5.git init# 6. add-gitignore node, windows, osx, visualstudiocode# 7. 확인ls -a# 8. 확인git status# 9.git add .# 10.git commit -m ".gitignore 파일 생성"# 11.npm install --save-dev five-server# 12.touch fiveserver.config.js  실행실행키를 dev로 설정해놨을 때npm run dev  서버 중단 (터미널) Ctrl + C

Portrait 모드: 세로 모드[포트레이트] Landscape 모드: 가로 모드[랜드스케이프]   [특수부호] @: at-sign rule `: backtic ^: caret  ~: tilde

Deprecated: 앞으로 지원되지 않을 것이니 사용을 자제 해달라는 의미[데프러케이팃] 소프트웨어나 기능 지원이 종료되는 것이 아니라, 개발사가 나서서 ‘사용하는 걸 추천하지 않는다’고 말하는 것을 의미아예 삭제할 수는 없지만, 그래서 여전히 사용하려 한다면 사용할 수 있지만 권장하지는 않는다고 공식적으로 선포하는 것  obsolete: 개발사가 더 이상 지원하지 않는다는 의미[옵설릿]  Deactivate: 비활성화하다[디엑티베잇]   Asynchronous: 비동기 [에이싱크로너스]   Export: 내보내기 명사 [엑스포트]  동사 [익스포트] 컴포넌트, 패키지 내보낼 때 사용 Import: 가져오기명사 ['임'포트] 동사 [임'포'트]   Execute: 실행하다 [엑시큐트]   Executi..

📌 피그마(Figma) 훑어보기  🔺 디자인 시스템  : 체계적인 방법으로 디자인 자산(assets)을 통일성 있게 관리하는 시스템 팀 또는 그룹에서 서비스를 디자인, 실현 및 개발할 수 있도록 하는 모든 요소의 그룹화 단일 소스 기본 목적: 팀 작업을 보다 쉽고 빠르게 하기 위한 프로세스  🔺 피그마(Figma) : 웹 기반 UI/UX 디자인 및 프로토타이핑, 협업 디자인 툴 UIUX 디자인, 디자인 시스템, 기획, PPT, 애니메이션, 짤&이모지 등의 제작에 활용하는 툴 웹 링크로 쉽게 공유 가능 API, 플러그인 제공 웹에 자동저장되기 때문에 시스템 충돌(Crash)이 매우 적음 자바스크립트 기반  🔺 단축키 하나의 frame 보기: N  뒤로 돌아가기: shift + N도구창 없애기: c..

[개인 공부용 정리]  README 파일이란?사용자가 레파지토리를 볼 때 가장 처음 보게 되는 것 사용자에게 프로젝트의 내용, 사용된 언어, 약관, 프로젝트가 수행할 수 있는 작업 등에 대한 개요를 제공하고 실행 중인 애플리케이션의 스크린샷을 보여준다.   README 파일이 중요한 이유리쿠르터(채용 담당자)들이 이 README 파일을 보면서 내 프로젝트에 대해 알게 되기 때문에 프로젝트의 README에 프로젝트의 내용, 목적, 구현 방법에 대해 기록해놓는 것이 중요하다.   README 파일에는 가장 중요한 정보를 포함시키고, 프로젝트와 사용된 기술 스택에 대한 명확한 설명을 제공하는 것이 중요하다. 또한, 다른 파일을 찾아보는 불필요한 서칭을 피하기 위해 README 파일에는 링크와 추가적인 정보를 ..

[개인 공부용 정리]   1. 클릭 시 연락으로 연결되는 링크메일 - mailto:메일 주소연락처 - tel:+번호문자 - sms:+번호 Send Email Call Us Send SMS    2. collapse 가능한 컨텐츠 태그는 숨겨진 콘텐츠에 대한 컨테이너를 생성한다. 태그는 해당 콘텐츠의 표시 여부를 전환할 수 있는 클릭 가능한 라벨을 제공한다. Click to expand This content can be expanded or collapsed.   3. 시멘틱 요소 활용하기시멘틱 요소는 코드를 의미있게 만들어 HTML 구조와 웹 접근성, SEO 등을 향상시킨다.   4. 폼(form) 요소 그룹화하기 태그를 이용하여 폼(form) 관련 태그들을 그룹화할 수 있다. 태그는 태그의 ..