반응형 HTML CSS8 마지막 자식요소 css 선택자 nth-last-of-type(1) ul li { display: flex; justify-content: space-between; padding: 1rem; border: 1px solid #f2f2f2; &:nth-last-of-type(1) { span:nth-last-of-type(1) { color: $color-primary-light; } } } 2021. 10. 20. XSS CSRF CORS XSS (Cross-Site Scripting) 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점 서버에 문자열이 아니라 script 태그와 함수를 보내서 비정상적인 데이터를 서버에 전달하여, 권한이 없더라도 script를 통해 공격하는 방법. 예방 웹 애플리케이션에서 사용자로부터 입력받은 입력값을 제대로 검사하거나, 서버에서 입력 값 필터링을 통해 공격을 예방할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 Cross-Site Scripting이라 한다. CSRF (XSRF) 인증정보 탈취 사용자는 인증정보를 가진 채(로그인한 상태)로 해커의 링크를 누르면 해커는 인증(로그인) 정보를 가로채서 이를 이용해 사용자가 요청한 것 처럼 위조된(공격) 요청을 .. 2020. 11. 14. HTTP's methods XHR vs fetch HTTP 속성 2가지 stateless HTTP의 요청은 모두 독립적이다. 첫번째 요청이 두번째 요청에 영향을 주지 않는다. connectionless 한번의 요청에 한번의 응답만이 존재. 요청에 대한 응답이 이루어지면 연결은 끊긴다. 브라우저의 기본 구조 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함. (크롬은 웹킷 (Webkit) 엔진 사용) 동작과정) DOM 트리 구축위한 HTML 파싱 - 렌더트리 구축 - 렌더 트리 배치 - 렌더 .. 2020. 11. 14. .appendChild()가 DOM 노드를 "이동"시키는 이유 위와 같은 코드를 수행했을 때 많은 사람들이 span요소가 div.b로 "복사"된다고 예상한다. 하지만 결과는 다르다 트리의 정의에서 이렇게 설명한다. 트리구조에 포함되어있는 객체(object)는 null이거나 object거나 자식을 갖는 "하나"의 부모를 가진다. 모든 노드는 루트 노드(최상위 노드)를 제외하곤 모두 "단 하나"의 상위 연결(하나의 부모)을 가진다는 것이다. 결론적으로 노드를 원래 부모에서 다른 부모쪽으로 이동시키고 싶다면, 트리 구조상 노드는 두개의 부모를 가질 수 없기 때문에 먼저 원래 부모에서 제거된 후, 새로운 부모에게 이동되어야 한다. 출처 : indepth.dev/here-is-why-appendchild-moves-a-dom-node-between-parents/ 2020. 10. 9. TIL 1006 Nodes vs Elements .contains() .parentElement Nodes vs Elements nodes DOM API상에 존재하는 모든 것들. 그것들을 모두 포괄하는 이름이 node이다. elements one specific type of node. 예를 들어 div, body, window 같은 특정한 타입. 모든 element는 HTMLElement의 자식이다. 따라서, HTMLElement의 property를 똑같이 가지고 있다. 동시에, element의 성격에 따라서 자신만의 property를 가지고 있다. NodeList: general lists of nodes HTML Collection: 오직 element만을 담을 수 있다. * DOM API (Document Object Model 문서 개체 모델 Application Programming In.. 2020. 10. 6. TIL 0924 날짜 2자리로 노드리스트reverse localStorage moment.js 날짜 2자리 표시 (“0” + this.getDate()).slice(-2); 월 2자리 표시 (“0” + (this.getMonth() + 1)).slice(-2); //querySelectorAll로 가져온 노드리스트를 reverse하는 방법 You can't call Array.prototype.reverse on NodeListCollection. Instead, you should use: var stars = [].slice.call(stars, 0).reverse() localStorage 사용법. 출처 : www.taniarascia.com/how-to-use-local-storage-with-javascript/ [ How to Use Local Storage with JavaSc.. 2020. 9. 24. TIL 0923 요소 숨기기, 보이기 스타일 추가 정규표현식 버블링 vs 캡쳐링 onclick() vs addEventListener 보호되어 있는 글 입니다. 2020. 9. 23. TIL 0922 CSS 가운데정렬 display DOM CSS 요소들을 가운데정렬 할 때 .contentwrapper{ margin: 0px auto; } font-weight: bold; //폰트 굵게 text-shadow: 1px 1px 2px black; //폰트에 그림자 추가 padding: 1px 2px 3px 4px; 순서대로 시계방향 북 동 남 서(margin 또한 동일) 적용된 모습 더많은 정보 poiemaweb.com/css3-display [ CSS3 Display | PoiemaWeb display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. poiemaweb.com ](https://poiemaweb.com/css3-display) DOM 엘리먼트 만들기 const oneDiv = document.createElem.. 2020. 9. 22. 이전 1 다음 반응형
