둥지

프론트엔드에서 보안이란 생각보다 잘 생각되지 않는 부분입니다.주로 성능, 접근성, SEO와 같은 부분들을 기반으로 웹 사이트의 퀄리티를 체크하게 됩니다.하지만 악의적인 공격에 대해 얼마나 이것을 잘 방어할 수 있는지에 대한 것은 잘 체크되지 않습니다.우리가 성능, 접근성, SEO를 체크할때 lighthouse를 사용하듯이 보안 기능을 측정할 수 있는 사이트가 있습니다.Security Headers 는 response header를 기반으로 보안 점수를 제공하는 사이트입니다. 웹에서의 공격 방식1. SQL Injection악의적인 사용자가 애플리케이션의 보안 취약점을 이용해서 데이터베이스에 잘못된 SQL 명령어를 주입하는 공격 기법입니다.대응 방안:- 입력값 검증하기.- 준비된 구문(Prepared Sta..

6. 그림자 효과의 세 가지 방법: box-shadow, text-shadow, drop-shadowCSS에서 그림자를 표현하는 방법은 크게 세 가지가 있습니다:1. box-shadow: 요소 전체에 그림자를 적용 2. text-shadow: 텍스트에만 그림자를 적용 3. filter: drop-shadow(): SVG나 PNG 이미지에 그림자를 적용 각각의 속성은 다음과 같은 형식으로 사용됩니다: - box-shadow: x축 y축 blur 색상 - text-shadow: x축 y축 blur 색상 - filter: drop-shadow(x축 y축 blur 색상) 아래의 예제에서 볼 수 있듯이, 각각의 그림자 효과는 서로 다른 용도에 최적화되어 있습니다. box-shadow는 div와 같은 블록 요소에,..

이 글은 해당 영상을 정리한 글입니다.1. 간단하게 보더에 그라디언트를 줄 수 있습니다border-image 속성을 사용하면 가상 선택자 없이도 그라디언트 테두리를 만들 수 있습니다. 이 방법의 장점은:1. 코드가 간단하고 직관적입니다 2. 가상 선택자를 사용하지 않아도 됩니다 3. 브라우저 호환성이 좋습니다 border-image와 linear-gradient를 함께 사용할 때 주의할 점은 기본적으로 모서리에만 그라디언트가 적용된다는 것입니다. 하지만 border-image-slice 속성을 활용하면 테두리 전체에 균일한 그라디언트를 적용할 수 있습니다. 아래 예제는 border-image-slice 값을 1로 설정하여 그라디언트를 테두리 전체에 균일하게 적용한 예시입니다. border-image-sl..