본문 바로가기

Frontend

(3)
Node.js 기초 Node.js란? Node.js는웹 브라우저가 아닌 환경에서도 JavaScript를 실행할 수 있게 해주는 런타임(Runtime) 이다.기존의 JavaScript는 브라우저 내부에서만 실행되었지만, Node.js의 등장으로 다음과 같은 작업이 가능해졌다.서버 개발파일 시스템 접근CLI 프로그램 제작백엔드 개발Node.js = JavaScript 실행기 (Runtime) React와 Node.js의 관계 React는 브라우저에서 실행되는 라이브러리이지만, 개발 환경 자체는 Node.js 기반으로 구성된다.개발 서버 실행번들링 및 빌드패키지 관리(npm)따라서 React 개발을 위해서는 Node.js 설치가 필수이다. JavaScript의 탄생 배경 JavaScript는 처음에 웹 페이지 내부에서 간단한..
css #2 박스 모델(box model)HTML 요소는기본적으로 박스(box) 형태로 구성박스 모델의 구성 요소내용(content) : 글이나 이미지가 들어있는 박스의 실질적 내용패딩(padding) : 내용과 테두리 사이의 간격테두리(border) : 내용와 패딩주변을 감싸는 테두리마진(margin) : 테두리와 이웃하는 요소 사이의 간격 박스의 너비와 높이 (width, height)width, height: 요소의 가로/세로 너비auto: 브라우저가 너비를 자동으로 계산 (기본값)인라인(inline) 요소: 가로 및 세로 모두 컨텐츠 크기 만큼 자동으로 줄어듬.즉, 컨텐츠 크기에 딱 맞게 자동 조정됨.어차피 너비나 높이 수동 지정 불가 (예: span)블록(block) 요소: 가로는 부모 요소 크기 만큼 자동..
css #1 css 를 공부하면서 아직 기초단계이지만, 그냥 넘어가면 까먹을 것 같은 내용을 포스팅해보려고 한다. CSS란?- 웹 문서의 스타일을 지정하기 위해 사용되는 언어 CSS의 기본 문법CSS는 특정 HTML 요소에 대해 속성과 값을 정의하여 스타일을 지정한다. 전체 구조는 다음과 같다:선택자 { 속성: 값;}h1 { color: blue; font-size: 24px;} 위 코드는 모든 h1 태그에 대해 글자색은 파란색, 크기는 24px로 지정하는 예이다.CSS 적용법은 크게 세 가지가 있다. ① 인라인 스타일 시트 (Inline Style Sheet)HTML 태그 내부의 style 속성에 직접 CSS 코드를 작성하는 방식유지보수 및 재사용성이 낮기 때문에 특별한 경우를 제외하고는 사용하지 않음이 문장..