본문 바로가기

개발/HTML+CSS2

CSS, SASS, SCSS CSS에 대해서는 잘 안다고 할 수 있지만 사실 SASS, SCSS는 단어도 비슷해서 차이점과 각각 무엇인지에 대해서는 정확하게 알지 못했다. 그래서 이번에 정리해보려고 한다. 간략히 설명하자면, CSS는 쉽지만 선택자(Selector)의 과용(중복 사용등)과 연산 기능의 한계, 구문(Statement)의 부재 등으로 작업이 고도화되고 프로젝트의 규모가 커질수록 불편함이 생긴다. 그래서 이를 보완하기 위해 CSS의 전처리기(Pre-processor)로 대표적인 SASS와 SCSS가 탄생하게 된다. 그리고 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritan.. 2024. 3. 25.
<a> 태그의 target="_blank" 사용 시 무조건 noopener, noreferrer 추가해야 하는 이유! 태그의 target=”_blank” 사용 시 rel 속성값인 noopener, noreferrer을 사용하지 않으면 보안상 취약점이 생기고 퍼포먼스가 떨어질 우려가 있다. 그렇다면 왜 이 두 개의 속성값을 사용해야 하는지 자세히 알아보자! target="_blank"는 연결한 웹 페이지를 새로운 탭에서 연다. 사용법은 아래와 같다. 새 탭에서 보기 여기서, target="_blank" 사용 시 문제점은? 보안상 취약점이 생긴다 target="_blank”를 사용하여 새탭으로 페이지가 열리는데, 이 페이지의 JavaScript에서 window.opener로 부모 윈도우(링크를 건 페이지)의 오브젝트에 접근해서 'window.opener.location = 새로운 URL'로 부모 윈도우의 URL을 바꿔 쳐 .. 2024. 2. 22.