Border vs Outline

🌟 Border vs Outline- 공간 차지border은 공간을 차지하기 때문에 width가 200px인 요소에 5px의 border를 적용한다면 총 width는 (200 + 5 + 5) = 210px 이 된다.outline은 공간을 차지하지 않기 때문에 요소 자체의 길이에는 변화가 없다. - 주변 요소의 영향border를 적용하면 해당 요소의 크기가 변하기 때문에 레이아웃에 영향을 줄 수 있다.outline은 주변 요소를 가리거나, 주변요소에 가려질 수 있다. - 스타일링border는 border-top, border-left와 같이 한 쪽에만 border를 적용해 줄 수 있다.outline은 한 쪽에만 적용할 수 없다. - CSS Box Modelborder은 CSS Box Model에 포함되지..

• format_list_bulleted WEB
• · 2024. 7. 31.
• textsms

Squash Merge..

내 브랜치가 오래된 브랜치란 사실과 pull을 받지 않았다는 사실을 잊은 채 merge를 시도했다.merge가 안된다는 오류가 떴고, rebase를 해야겠다고 결심했다.그래서 rebase를 했는데 계속해서 conflict가 생겼고.. conflict를 해결하다가 정신을 놓아버린 나머지 merge까지 시켰다.. 그 결과 그래프가 난리가 났고 ㅋㅋㅋㅋㅋㅋㅋ 기본 merge가 squash merge로 변경되었다.. 이래서 신입사원한테 merge 권한 안준다는 깨달음을 팀장 오빠에게 안겨주었다ㅎㅎ..- Merge 대부분 사용하는 방식으로, 커밋 이력이 모두 남는다. - Squash MergeSquash는 여러 개의 커밋을 하나로 합치는 것을 의미한다.Squash Merge를 하게 되면 이전에 했던 커밋 히스토리..

• format_list_bulleted Git
• · 2024. 7. 15.
• textsms

리플로우와 리페인트(Reflow, Repaint)

브라우저 렌더링 과정(완전 간단 설명)자세한 설명은 아래 있습니다~!https://heedonguri.tistory.com/1131. DOM 트리와 CSSOM 트리 생성2. DOM 트리와 CSSOM을 가지고 렌더 트리 생성3. 생성된 렌더트리를 이용해서 레이아웃 계산4. 계산된 값들을 기반으로 화면에 요소들을 그림 3번 과정을 다시 수행하는 것이 reflow이고 4번 과정을 다시 수행하는 것이 repaint이다.Reflow와 Repaint만약 스타일이나 DOM을 변경하는 경우에 리플로우가 발생하여 렌더트리를 재생성하고,생성된 렌더트리를 기반으로 리페인트가 발생한다. - Reflow요소의 위치나 크기를 다시 계산하는 것🤔 언제 발생하는데?DOM 요소의 기하학적 속성이 변경될 때브라우저의 크기(viewpo..

• format_list_bulleted WEB
• · 2024. 7. 8.
• textsms

브라우저 렌더링 과정

먼저 브라우저가 무엇인지부터 알고 가면 좋을 것 같다. 브라우저란?인터넷을 통해 웹 페이지를 탐색하고 사용할 수 있도록 도와주는 소프트웨어이다.HTML, CSS, JS를 이용하여 웹 페이지를 해석하고 렌더링한다. 브라우저는 위의 사진과 같이 구성되어 있다.사용자 인터페이스우리가 사용하는 브라우저의 주소 표시줄, 이전/다음 버튼 등 직접 상호작용하는 부분이다.브라우저 엔진사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.DOM 자료구조를 구현한다.렌더링 엔진HTML 및 CSS를 해석하여 화면에 출력하는 역할을 한다.통신HTTP 요청과 같은 네트워크 호출에 사용된다.자바스크립트 해석기JS는 한 줄씩 읽어가며 파싱하는 언어이기 때문에 해석기가 필요하다.자바스크립트 엔진이라고도 불린다.UI 백엔드렌더링 엔..

• format_list_bulleted WEB
• · 2024. 7. 3.
• textsms

XSS

XSS란Cross Site Scripting으로 웹 사이트에 악성 스크립트를 주입하는 행동을 의미함클라이언트 사이드 취약점사용자 뿐만 아니라 서버도 공격 가능함CSRF와의 차이점CSRF- 특정 사이트가 사용자를 신뢰한다는 점을 공격, 악성코드가 서버에서 발생- 권한 도용이 목적 XSS- 사용자가 특정 사이트를 신뢰한다는 점을 공격, 악성코드가 클라이언트에서 발생- 쿠키, 세션 탈취, 웹사이트 변조가 목적 XSS 공격 종류- Stored XSS해커가 악성 스크립트를 DB에 저장시키고 사용자에게 악성 스크립트를 보내는 것이다.DB에 계속 저장되기 때문에 지속적으로 공격을 한다. 예를 들어, 해커는 게시글 작성을 통해 악성 스크립트를 DB에 저장시킨다.(ex 게시글 조회 시 쿠키 내놔)다른 사용자들이 해당 게..

• format_list_bulleted WEB
• · 2024. 7. 2.
• textsms

CSRF

CSRF란Cross Site Request Forgery으로 사이트 간 요청 위조를 의미함사용자가 특정 행위를 웹사이트에 요청하도록 하는 공격(사용자의 의지X)해커의 요청이 사용자의 요청인 것 처럼 속이는 방법CSRF 동작원리CSRF 공격이 성공하기 위해서는 3가지 조건을 만족해야 한다.사용자가 보안이 취약한 사이트에 이미 로그인이 되어 있는 상태쿠키 기반의 서버 세션 정보를 획득할 수 있어야 함해커는 서버를 공격하기 위한 요청 방법에 대해 미리 파악하고 있어야 함위의 3가지 조건을 만족한다면 아래와 같은 절차로 동작한다.사용자가 사이트에 로그인session ID가 사용자의 브라우저 쿠키에 저장해커는 사용자가 악성 스크립트 페이지를 누르도록 유도악성 스크립트가 작성된 페이지에 접근하게 되면 웹 브라우저에..

• format_list_bulleted WEB
• · 2024. 7. 2.
• textsms