따꿍의 프로젝트

1. 정의reflow와 repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 중요한 작업들입니다.먼저, reflow에 관해 설명하겠습니다. reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 말합니다. DOM의 구조가 변경되거나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산해야 합니다. 이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 주기 때문에 비용이 많이 드는 작업입니다. 예를 들어, CSS에서 요소의 width나 height 속성을 변경하면, 브라우저는 해당 요소뿐만 아니라 연관된 모든 요소의 배치를 다시 계산해야 합니다.반면에, repaint는 요소의 모양이나 스타일이 변경될 때 발생합니다. 요소의 레이아웃은 그대로이고, 색상이나 배..

✅ 추천 구조 (실전용)1. 한 줄 결론 → 질문에 대한 직접 답2. 이유/근거 (1~2개) → 왜 그렇게 생각하는지3. (선택) 예시 or 경험 → 신뢰도 상승결론: ~입니다.(한 줄 결론 → 질문에 대한 직접 답)이유: 왜냐하면 ~ 때문입니다.보충: 추가로 ~ 특징이 있습니다.예시/경험: 실제로 ~ 해봤습니다.정리: 그래서 ~라고 볼 수 있습니다.- 마무리 애매하면 감점 느낌 남- 모른다고 끝내면 안 됨, 아는 선까지 말하기1. 한줄 결론클로저는 함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능을 말합니다. 비유하자면, 함수가 자신이 생성된 환경을 '기억'하는 것이라고 할 수 있습니다.반환된 내부 함수가 외부 함수의 지역 변수와 매개변수를 인스턴스의 필드..

URL은 Uniform Resource Locater의 약어로, 웹상에 존재하는 자원이 어디에 있는지 알려주는 용도로 쓰입니다.URL의 구조는 크게 scheme, host, path, query, anchor로 나뉩니다. 예시는 https://overwatch.fandom.com/wiki/Heroes#Overwatch_(2022) 설명 드리겠습니다.scheme 어떤 프로토콜을 사용할지 지정해주는 부분입니다. 보안이 약한 http, safety가 추가된 https, 등등 여러가지 프로토콜 중에 무엇을 사용할지 선택해줍니다. 예시에서는 https://부분이라고 할 수 있겠습니다.host는 서버의 도메인 이름입니다. 서버의 도메인 이름으로, DNS를 통해 IP 주소로 변환됩니다.예시에서는 overwatch.f..

DNS는 전화번호부라고 생각하면 편합니다. 인간이 서버 ip 주소를 외우고 다니기에는 한계가 있으니, 더 기억하기 쉬운 도메인 이름을 ip주소에 부여해주고client가 도메인 이름을 입력하면 ip주소를 리턴해주는 시스템입니다. 예를 들면, 우리가 google.com을 치면브라우저가 DNS 서버에 해당 도메인의 ip 주소를 요청하고,반환받은 ip 주소를 통해 서버에 실제 요청을 보냅니다.따라서 DNS는 사람이 이해하기 쉬운 도메인 이름과컴퓨터가 사용하는 IP 주소를 연결해주는 역할을 합니다.

CSS Box Model은 요소의 크기와 레이아웃을 구성하는 구조로, content, padding, border, margin으로 이루어져 있습니다.content는 실제 텍스트나 이미지가 들어가는 영역으로, 요소의 핵심 내용입니다. border은 element의 테두리를 뜻합니다. padding을 감싸는 영역으로, 요소의 경계를 나타냅니다. padding은 content와 border 사이의 공간입니다. 이를 사용하여 요소 내부의 여백을 조절할 수 있습니다. marign은 반대로 border 바깥의 공간입니다.이를 사용하여 요소와 다른 요소 사이의 간격을 조절할 수 있습니다.

원래 생각rem은 html태그의 font-size 기준으로 돌아간다는 것을 배웠으니,rem으로 반응형을 만들려면 media query (@media)를 사용해서 화면 사이즈에 따라 html의 font-size를 다르게 하면 될거라고 생각했다. 그래서 이렇게 보통 만드냐고 물어보니까예전에는 그런 방식을 사용하기도 했었는데, 요새는 clamp를 많이 사용한다고 한다. 그래서 clamp가 뭔지 조사해보기로 했다. 조사https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp clamp() - CSS | MDN developer.mozilla.orgClamps a value within a range of values between a de..