복잡한뇌구조마냥

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의 사양을 웹 브라우저 제조업체가 지원하는 경우 셀렉터 앞에 웹 브라우저 별로 서로 다른 접두사를 붙일 것을 권장 주요 웹 브라우저의 벤더 프리픽스 인터넷 익스플로러 엣지 크롬 파이어..

회사 프로젝트 특성상 svg를 이용한 이미지 출력이 많습니다. svg를 그리다 보면 부분적으로 클릭을 하고 싶거나 앞쪽에 있는 요소를 클릭할 필요가 없는데 클릭되는 경우가 있습니다. 찾아보니 css를 사용하여 클릭이벤트를 제어할 수 있었는데, 그 방법 중 하나가 pointer-events입니다. 해당 속성을 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다. See the Pen Untitled by Dongyeop (@Yoepee) on CodePen. 간단하게 MDN 코드 참고해서 만들어보았습니다. 사용해보면 알겠지만, 옵션에 따라 클릭이 가능한 범위와 클릭이 되지 않는 범위가 나뉩니다. // pointer-events속성이 지정되지 않은 경우와 동일하게 동작 pointer-..

1. 계층적 트리 구조 - 분할된 컴포넌트를 조립하다보면 자연스레 계층적인 구조가 형성 - 상위 컴포넌트 - 하위 컴포넌트를 '부모-자식' 관계로 표현됨 - 리엑트를 공부할 당시에는 함수형으로 Prop React : 함수형 프레임워크 컴포넌트 방식 전달방식 React 함수형, 클래스형 Props Angular 클래스형 데코레이터 (Input, Output) 2. 상위 컴포넌트에서 하위 컴포넌트로 상태 전달 ( 부모 → 자식 ) 1)상위 - HTML 값을 props처럼 동일하게 전달 (데이터 값은 ts에서 사용하는 변수) 값2처럼 변수뿐만 아니라 값으로도 전달 가능 2) 하위 - TS export class ParentComponent{ @Input() 값1:type; @Input() 값2:number; ..