Ro_dollDev

[지식]class 와 id의 차이

html 에서 속성을 부여할때에 id와 class를 많이 쓴다. 역할은 거의 같으나 중요한 차이점이 있다. id속성은 태그에 유일한 이름을 붙이고 싶을때에 쓴다.class속성은 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을때 쓴다. ex) id : 책상 , 의자 , 쇼파 , 화장대 / class : 가구  id 속성은 중복이 불가능함 , class는 중복이 가능함 css 내에서의 차이 ? css내에서 id속성을 사용할때엔 id명 앞에 #기호를 붙이고 사용한다.id 속성은 유일하기때문에 클래스보다 우선적으로 적용됨 class 속성을 사용할 때에는 class명 앞에 .기호를 붙이고 사용한다. 즉 , id 속성은 우선적으로 적용이 되며 중복이 불가능하고 , class 속성은 후순위에 적용이 되며 중복..

CORS(Cross Origin Resource Sharing)교차 출처자원 리소스 공유 , 즉 출처가 다른 자원들을 공유한다는 뜻으로 한 출처에있는 자원에서 다른 출처에있는 자원에 접근하도록 하는 개념이다. cors정책은 응답받는 리소스들을 검사하는 기능을 한다. 출처란?https://rodolldev.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F프로토콜 / 호스트 / 포트(생략됨) /패스 / 쿼리스트링 이렇게 이루어져있을 때에 프로토콜 , 호스트 ,포트가 같다면 동일 출처 ( Origin )라고 한다. 만약 다를때에는 출처 요청을 CORS정책에 준수하여 요청해야만 정상적으로 응답을 받을 수 있다. 왜 이런 정책이 생겨났는지?..

Attribute? Property? attribute 와 property 는 둘다 '속성' 이라는 의미를 가지고 있다. 단어는 같은 의미이지만 웹 프로그래밍에서는 분명한 차이가 존재한다! HTML -> attribute attribute 는 HTML 의 속성이다. 엘리먼트에 id나 class같은 추가적인 정보를 일컫는다. DOM -> property property 는 DOM 의 속성이다. 즉 html 의 attribute를 DOM내에서 대신해서 일컫는다. attribute 와 property 의 기능차이? 요소의 속성 접근차이 attribute는 HTML 에서 property 는 DOM내에서 존재한다. 즉 attribute는 정적인 값으로 변하지않고 property 는 동적인 값으로 그 값이 변할 수..

DOM(Document Object Model)이란 말 그대로 HTML문서를 객체화한것이다. 렌더링(서버로부터 HTML , CSS , JavaScript등 파일을 받아 브라우저에 나타내는것) 과정에 대해 이해한다면 DOM을 이해하는데에 편리하다. 1. 불러오기 : 로더(Loader)가 서버로부터 전달받은 리소스 스트림을 읽는 과정 2. DOM, CSSOM 생성 웹 엔진의 HTML/XML 파서가 문서를 파싱해 DOM Tree를, CSS 파서가 CSSOM 트리를 생성(아래 파싱, 스크립트와 스타일 시트의 진행순서 참조) 3. 생성된 DOM과 CSSOM으로 렌더링 트리 생성 DOM Tree + CSSOM Tree, 렌더링에 필효한 노드만 선택해 페이지를 렌더링하는데 사용 4. css, 레이아웃 : 렌더트리를 ..

Browser 특징 브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청, 서버의 응답을 받아 브라우저에 표시하는것 ex) 크롬 , 사파리 , 파이어폭스 , 인터넷 익스플로러 등 URI(Uniform Resource Identifier) 를 통해 서버에 응답 요청 웹 브라우저와 웹 서버 url을 주소창에 치고나면 페이지가 이동하고 웹브라우저가 이동한 웹서버에 웹페이지 요청을 하면 웹페이지가 응답을 함 서버가 브라우저에게 전달한 응답인 HTML문서를 브라우저는 읽어들이고 해석한 후 사용자(Client) 에게 보여주고 HTML 및 CSS를 해석하는 구체적인 내용들은 모두 W3C, World Side Web Consortium 에 의해 관리되고 유지됨 1. 보이지 않는 곳의 통신을 이해할 수 ..

CSR , SSR? SPA (SINGLE PAGE APPLICATION) -> react & angular & vue 와 같은 프레임워크를 사용해 개발되는 방식 하나의 페이지로 구성된 웹 APP MPA (MULTI PAGE APPLICATION) -> 탭을 이동할 때 마다 서버로부터 새로운 HTML을 받아와 렌더링 전환시마다 화면이 깜빡이는 현상 발생 → AJAX 등장 이후 원하는 부분만 클라이언트쪽에서 렌더링해 UX 개선 CSR(Client Side Rendering) : 클라이언트 측에서 렌더링하는 방식 SSR(Server Side Rendering): 서버측에서 렌더링하는 방식 동작과정 CSR : 유저가 웹사이트에 방문 → 브라우저가 서버에 콘텐츠 요청 → 빈 HTML을 response로 보냄 → ..