Front-End 검색 결과

해당 글 41건
CSS 기본 : px, em, rem, %(percent) 단위의 차이

CSS를 사용하다보면, 가장 기본적으로 쓰는 것이 px단위이다. 이외에도 em, rem, %(percent) 단위가 있다. 다양하게 활용할 수 있도록 공부해보자. CSS의 단위 CSS의 단위로는 절대 단위와 상대 단위가 있다. 앞서 언급한 px 는 절대 단위이고, 이외에 cm, mm, ic(인치), pc, pt(포인트) 등이 있다. 상대 단위로는 em, ch, rem, vh, vw 등이 있다. 대부분의 브라우저에서는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 로 이루어져 있다. px 픽셀인 px는 모니터에 따라 상대적인 크기를 가짐으로서, 반응형 웹에는 적절하지 않다. 그렇기 때문에 웹디자인할 때에는 px 를 권장하지 않는다. em과 rem em은 부모 요소의 글꼴 크기를 의미하고, ..
Front-End/HTML & CSS 2021. 11. 10. 13:56
CSS 기본 : margin 과 padding 의 속성과 차이

margin 과 padding 의 속성과 차이 프론트 개발하면서 뗄래야 뗄 수 없는 건 CSS 이다. 속성을 조정하면서 사용하게 되는 건 margin 과 padding 인데 심도있게 살펴보기 위해 글로 정리해둔다. 공부하기 위해서는 먼저 공식문서를 보는 게 좋다. margin 과 padding 의 차이를 한눈에 확인하면 아래와 같다. 개발자도구(F12) 에서도 margin과 padding의 속성을 확인할 수 있다. 개발자도구에서도 CSS 를 변경해가며 확인이 가능하니 바로바로 테스트하기에 좋다. margin margin 이란 CSS 속성은 네 방향 바깥 여백 영역을 설정하는 것이다. 속성으로는 margin-top, margin-right, margin-bottom, margin-left가 있다. 위 아래..
Front-End/HTML & CSS 2021. 11. 10. 11:30
[error] Server is started at 5500 but failed to open in Browser Preview. Got Browser Preview extension installed?

vscode 에서 프로젝트 실행 시 Server is started at 5500 but failed to open in Browser Preview. Got Browser Preview extension installed? 에러 발생 에러 시 vscode 우측 하단에 이렇게 표시되어 있었음 문제해결 1. 단축키 Ctrl + Shift + X 를 사용하여 vscode 확장 프로그램으로 이동 2. 설정(톱니바퀴) 를 클릭하여 Extenson Settings 로 이동 3. Edit in settings.json 클릭 4. "liveServer.settings.useBrowserPreview": true -> "liveServer.settings.useBrowserPreview": false 로 변경 위 절차..
Front-End/JavaScript 2021. 11. 3. 15:01
(프론트엔드의 첫걸음) npm (node Package Manager) 란?

흔히 개발하면서 자주 접하는 npm 에 뜻해 대해 잘 알지 못하는 것 같아 공부 겸 정리해두려고 한다. NPM (Node Package Manager) 자바스크립트(JavaScript) 프로그래밍 언어를 위한 패키지 관리자이다. Node.js 에서 사용하는 모듈을 패키지로 묶어 npm 을 통하여 관리하고 배포하고 있는 것이다. 이 뜻을 다시 풀어 설명하자면, 다른 사람들이 만들어둔 모듈을 npm을 통하여 설치하고 사용이 가능하다는 것인데 앞에서 설명한 다른 사람들은 내가 될 수도 있다. 😊 1. npm 설치 node.js 다운로드 : https://nodejs.org/en/ 보통 안정적인 LTS 를 다운로드하는 편이다. window 에서는 위 사이트를 통해 다운로드하지만, mac 에서는 cmd 에 nod..
Front-End/Etc 2021. 10. 1. 11:23
(프론트엔드의 첫걸음) 바벨(Babel) 이란?

바벨 (Babel) 최신 자바스크립트 문법을 공부하면서 많이 들었던 단어가 바로 바벨(Babel) 이다. 그렇다면 바벨은 무엇일까? 바벨(Babel)이란, 입력과 출력이 모두 자바스크립트(JavaScript) 코드인 컴파일러이다. 바벨은 최신 버전의 자바스크립트가 실행되지 않는 구 버전의 브라우저에서 정상적으로 실행되도록 변환해준다. JavaScriptES6 에서 JavaScriptES5 로 변환해준다는 얘기다. 현재는 바벨을 사용하여 JSX 문법, 타입스크립트(TypeScript) 와 같은 정적타입의 언어와 코드 압축 등의 문법을 사용할 수 있다. 바벨(Babel) 실행하기 // npm init > npm init -y // 필요한 패키지 설치 > npm install @babel/core @babel..
Front-End/Etc 2021. 10. 1. 10:01
(프론트 엔드의 첫걸음) 브라우저 저장소에 대해 알아보자

브라우저의 저장소에는 종류에 대해 알아보자. 로컬 스토리지 (Local Storage), 세션 스토리지(Session Storage) 로컬 스토리지 (Local Storage) 는 HTML5 에 추가된 저장소이다. 간단한 키와 값을 저장할 수 있는 곳이며, KEY - VALUE 형태이다. 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이다. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 남아있다. 세션 스토리지의 데이터는 사용자가 윈도우나 브라우저는 닫으면 제거된다. 자동로그인 등 지속적으로 필요한 데이터는 로컬 스토리지에 저장하고, 일회성 로그인 정보 등 잠깐 필요한 데이터는 세션 스토리지에 저장하면 됩니다. 로컬 스토리지 localstorage.getItem(); 세션 스토리지 s..
Front-End/Etc 2021. 9. 30. 16:36