복잡한뇌구조마냥

1. 에밋(Emmet) - 에밋(Emmet)은 HTML, MXL, XSL 문서 등을 편집할 때 빠른 코딩을 위해서 사용하는 플러그인 - 간단한 코드로 완성된 HTML 코드를 생성해줌 - 에밋은 여러 텍스트 에디터에 플러그인 방식으로 삽입되어 독립적으로 작동 - 특정 텍스트 에디터의 엔진이나 소프트웨어와 무관하게 텍스트 상태에서 직접적으로 작동 2. 코드 구성 1) 자식 선택자 및 형제 선택자, 복수 구성 - 자식 선택자 ( > ) - 형제 선택자 ( + ) - 복수 구성 ( * ) ex ) div > ul > li*3 + p 2) 클래스 및 아이디 선택자, 속성 및 내용 등 - 클래스 ( . ) - 아이디 ( # ) - 속성 ( [ ] ) - 내용 ( { } ) - 순번부여 ( $ ) - 순번부여 시작 ..

개발을 하던 중 font size가 특정 구간에 도달하면 더 이상 줄어들지 않는 상황을 발견했다. 일부 브라우저는 브라우저 설정으로 최소 폰트 사이즈를 지정하고 있어서 font-size를 css에서 수정하여도 크기가 변하지않는 경우가 있었다. 간단한 방법으로 이를 해결 할 수 있었다. .font { font-size: 10px; // 10px이 최소 크키라고 가정 zoom: 0.9; // 9px로 줄어든 것 처럼 보이는 효과가 있었음. } zoom을 이용하여 font-size 비율을 낮춰서 디자인에 맞게 수정할 수 있다. zoom 비율을 잘 이용하여 반응형 제작에도 도움을 받을 수 있다.

디자인 팀에서 받은 디자인의 규격이 css가 적용되지 않는 문제가 있었다. border이 1px보다 얇아야하는데 구분선과 비교가 안되는 문제가 있었다. 참조 블로그를 참조하여 꼼수를 얻었다. 실제로 적용해보고 디자인팀에서 괜찮다고 의견을 받아 이대로 적용했다. 1px border 0.75px border 0.5px border 0.25px border (1px) (0.75px) (0.5px) (0.25px) 1. 본인이 수정하려는 요소에 class나 id를 우선 설정하고, .border_100 { border: 1px solid rgba(0,0,255,1); } .border_75 { border: 1px solid rgba(0,0,255,0.75); } .border_50 { border: 1px so..

❓ HTML Entity란 HTML 엔터티는 &(ampersand) 로 시작하고 ;(semicolon)으로 끝나는 텍스트 조각 (문자열) 입니다. 특수문자나 공백문자를 작성하는데 주로 사용합니다. XSS 공격 방어 용도로도 사용할 수 있습니다. ex) 주로 사용하는 목록은 아래와 같습니다. 다른 HTML 엔터티 확인 경로: https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references HTML Standard HTMLLiving Standard — Last Updated 30 November 2023 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML..

1. XSS ( Cross - Site Scripting [ 교차 사이트 스크립팅 ] ) - 공격자가 웹 페이지에 악성 코드를 삽입하여 공격하는 방법 ex) script 문구 삽입 ( ) 2. Angular의 XSS 보안 모델 - XSS 버그를 체계적으로 차단하기 위해 Angular는 기본적으로 모든 값을 신뢰할 수 없는 것으로 취급 - 기본값으로 위험요소를 삭제하고 escape 처리가 되도록 되어 있음. 1) escape - 자바스크립트의 escape() 함수는 알파벳과 숫자, 특수문자(*, @, -, _, +, ., /)를 제외한 모든 문자를 16진수로 인코딩하는 함수 - 1바이트 문자는 %XX형태로 변환되며, 2바이트 문자는 %uXXXX형태로 변환됨 ex) 공백문자 : %20 등등 - HTML에서는..

1. CSS 접두어 - CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 한다. *벤더 프리픽스(Vendor Prefix) : 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix). - CSS 권고안에 포함되지 못한 기능이나, CSS권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 벤더 프리픽스를 사용하게 됩니다. - 권고 전 CSS3의 사양을 웹 브라우저 제조업체가 지원하는 경우 셀렉터 앞에 웹 브라우저 별로 서로 다른 접두사를 붙일 것을 권장 주요 웹 브라우저의 벤더 프리픽스 인터넷 익스플로러 엣지 크롬 파이어..

1. 페이지 이동 뒤로가기 경로 O ( 새로운 페이지 이동 ) window.location.href = url 뒤로가기 경로 X ( 기존 페이지 → 새로운 페이지 변경 ) window.location.replace(url) 2. 새 탭에서 열기, 새 창에서 열기 open() open(url) open(url, target) open(url, target, windowFeatures) url - 로드할 리소스의 url 또는 경로를 나타내는 문자열 target - 리소스가 로드되는 브라우징 컨텍스트의 이름을 지정하는 문자열 target 설명 _blank 새 창으로 연다. (기본값) ( 새 탭에서 열기 ) _parent 부모 프레임에 열린다. _self 현재 페이지를 대체한다. _top 로드된 프레임 셋을 대..

기존에 세팅되어있는 개발환경보다 버전이 낮은 개발환경의 코드를 불러와서 작업하게 되었음. angular 버전은 재 설치를 하였으나 node 재설치 없이 이전 버전의 node 데이터를 이용하여 동작되기를 원함 node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\Users\aswal\code\main\node_modules..