본문 바로가기

ALL

(119)

[CSS] position (static, relative, absolute, fixed) 🔗 CSS에서 position이란? 요소의 위치를 배치하는 CSS 속성이다. position: static; default position: relative; : 부모에 선언 => 기준 position: absolute; : 자식에 선언 => relative를 기준으로 position(top, left) position: fixed; : 위치 고정 ▪ overflow-y : 부모를 넘어간 자식 공간 처리 · hidden · scroll ▪ 우선순위 (숫자 클수록 우선순위 높아짐) default : 먼저 짠 거 < 나중에 짠 거 z-index: 숫자; 💡 같이 보면 좋을 Post [CSS] 왕초보를 위한 font / background / border 속성 총정리 css에서 속성은 '시계 방향'으로 적용 ..

[CSS] margin, padding / 차이점 width = width + (padding*2) + (border*2) px 📌 padding vs margin padding, border => width에 관여 margin => width에 관여 X (공간들끼리 서로 밀어내는 것) margin: 0 auto; : 가운데 정렬 box-sizing: border-box; : border가 width에 영향 주지 않게 해준다. margin이 겹치면, 더 작은 margin이 상쇄된다. 자식 margin이 부모를 넘어가면 미적용된다. => 그러므로, 부모가 padding을 가지는 것 > 자식이 margin을 가지는 것 자식 margin과 부모 padding은 섞이지 않는다. +된다. , 태그 등은 기본적으로 margin 값을 가지고 있다. css에서 속성은..

[CSS] font / background / border 속성 정리 css에서 속성은 '시계 방향'으로 적용 4개일 때 : top right bottom left 2개일 때 : x축(top, bottom) y축(left, right) 1개일 때 : all 🔗 Font color : 텍스트 색상 font-size : 텍스트 사이즈 default : 16px font-weight : 텍스트 굵기 · 100 : thin · 300 : light · 400 : regular · 500 : medium · 700 : bold · 900 : extrabold letter-spacing : 자간 (글자 간격) word-spacing : 단간 (단어 간격) white-space · normal : width에 맞추어 자동으로 줄바꿈 default · nowrap : width에 상관없..

SPA란? SSR vs CSR 차이점 🔗 SPA(Single Page Application)란? 기존 어플리케이션은 화면 이동 시 화면에 필요한 HTML을 서버로부터 받아서 처음부터 다시 로딩하기 때문에 속도가 느리다. 반면 SPA는 최초 한 번 페이지 전체를 로딩한 후 이후부터는 일부 데이터만 변경하여 화면을 구성하기 때문에 속도가 빠르다. SPA 프레임워크로는 React, Vue, Angular 등이 있다. 📌 SSR(Server Side Rendering) vs CSR(Client Side Rendering) ▪ SSR ① 서버 - 브라우저에게 HTML 응답 ② 브라우저 - 브라우저 렌더링 -> 페이지 보여짐 ③ 브라우저 - JS 다운 ④ 브라우저 - 리액트 실행 ⑤ 페이지 상호작용 가능 ▪ CSR ① 서버 - 브라우저에게 응답 ② 브..

[보안] CORS란? 🔗 CORS(Cross-Origin Resource Sharing)란? CORS는 추가적인 HTTP 요청 헤더를 사용하여 서로 다른 도메인의 웹 브라우저와 서버가 리소스 요청과 응답을 주고 받을 수 있게 하는 방법을 말한다. 🔗 CORS는 왜 필요할까? 웹 브라우저가 다른 도메인의 서버로 리소스 요청을 할 때 개인정보 유출, 피싱 사이트와 같은 보안상의 위험이 있을 수 있기 때문에 허용한 웹 브라우저만 서버에 요청할 수 있도록 하기 위해 사용한다. 🔗 CORS는 어떻게 동작할까? 웹 브라우저에서는 요청 헤더에 CORS 관련 옵션을 넣어주고, 서버에서는 요청 헤더에 해당 웹 브라우저의 요청을 허용한다는 내용을 넣어준다. 🔎 참고 자료 CORS이 나오게 된 배경 이야기 CORS란 무엇인가? 💡 같이 보면 좋..

[React] DOM(돔)이란? Virtual DOM(가상 돔)이란? 🔗 DOM(돔)이란? 'Document Object Model'. HTML, XML 문서의 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법(API)을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 🔗 DOM에 직접 접근할 때의 문제점 DOM에 직접 접근할 경우 뷰에 변화가 있으면 다시 DOM을 변경해야 하기 때문에 브라우저의 잦은 렌더링을 유발하여 효율성이 떨어지게 된다. 🔗 Virtual DOM(가상 돔)이란? 가상 DOM은 실제 DOM의 변화를 최소화 시켜주는 역할을 한다. 뷰에 변화가 있으면, 그 변화가 실제 DOM에 적용되기 전에 가상 DOM에 적용시켜 최종 결과만 실제 DOM에 전달한다. 예를 들어 뷰에 20개의..

라이브러리(Library) vs 프레임워크(Framework) 차이점 라이브러리가 각각 개별적인 기능을 하는 코드라고 하면, 프레임워크는 이것들이 연결되어 기초적인 형태를 갖춘 코드 '틀'이다. 둘 다 누군가가 짜놓은 코드를 사용한다는 점에서 비슷하다. 라이브러리는 누군가가 짜놓은 코드를 가져다 쓰는 것이고, 프레임워크는 프레임워크에서 제공하는 기본 틀 안에서 내가 코드를 덧붙여 쓰는 것이다. 라이브러리 : 내가 컨트롤하여 코딩한다. (내가 갑) 프레임워크 : 프레임워크의 규칙을 따라 코딩한다. (프레임워크가 갑) 🔎 참고 자료 라이브러리? 프레임워크? 차이점 MVC 웹 프레임워크가 뭔가요?

[패키지매니저] package.json이란? 🔗 package.json이란? 프로젝트 정보를 관리하는 파일이다. 어느 곳에서도 동일한 개발환경을 구축할 수 있게 해준다. 📌 dependencies vs devDependencies dependencies는 패키지의 배포 시 포함될 의존성 모듈을 지정한다. devDependencies는 패키지의 개발 시 사용될 의존성 모듈을 지정한다. 🔎 참고 자료 처음 시작하는 Node.js 개발 💡 같이 보면 좋을 Post [패키지매니저] npm이란? 🔗 npm(Node Package Manager)이란? 말 그대로 '노드 패키지 매니저'로, 특정 기능을 하는 자바 스크립트 패키지가 필요하면 npm에서 찾아 설치하면 된다. 패키지가 다른 패키지를 사용할 수도 있는데 devjindev.tistory.com

이전 1 ··· 10 11 12 13 14 15 다음

티스토리툴바