Bang's

알고있으면 좋은 CSS3 Tip✨@media print인쇄 시 적합한 출력을 위해, 인쇄 페이지용 미디어 쿼리를 사용하여 출력 시 변경되는 섹션을 명시해야한다. (1) 배경출력을 위한 설정@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }}인쇄 시, background속성(background-image, background-color)를 강제로 보이게 지정한다. (2) break-before#page1 { break-before: page;}break-before 속성은 CSS에서 페이지, 열 또는 영역 분할을 제어하는 데 사용된다.쉽게 말해, 항상 요소 앞에서 새 페이지를 시작하고 싶다면..

알고있으면 좋은 CSS3 Tip✨position & transform 통해서 가운데 정렬 하는 방법absolute를 적용하면 다른 엘리먼트에 영향을 주지 않고 독립적으로 움직일 수 있다. (1) 부모 요소(relative)와 자식 요소(absolute) 정의 가운데 정렬된 텍스트부모 요소에 relative 정의하고 자식 요소에 absolute 정의한다.만약 부모 요소에 relative가 없다면 자식 요소는 body를 기준으로 위치를 지정한다.top: 50%와 left: 50% 통해 부모 엘리먼트의 정중앙으로 이동한다.transform: translate(-50%, -50%)을 사용하여 기준점을 자신의 중심으로 이동시켜 완벽하게 가운데에 배치 할 수 있다.

알고있으면 좋은 CSS3 Tip✨pointer-events란 무엇인가?CSS를 사용하여 클릭 이벤트를 제어할 수 있는 방법 중 하나는 pointer-events 프로퍼티이며, 특정 요소에서 클릭 이벤트가 동작하지 않도록 제어할 수 있다. (1) auto (브라우저 자동으로 선택)pointer-events: auto;는 기본값으로, 요소가 클릭 이벤트를 자동으로 처리하도록한다.이 설정은 특별한 제어가 필요 없을 때 사용되며, 요소가 클릭 이벤트를 처리하는 정상적인 동작을 그대로 유지한다. (2) none (클릭 이벤트를 적용 X)pointer-events: none; 값은 해당 요소에 대해 모든 클릭 이벤트(마우스 클릭, 터치 등)가 동작하지 않는다.이 값을 설정하면 요소는 마치 화면에서 존재하지 않는 것..

알고있으면 좋은 CSS3 Tip✨white-space란 무엇인가?텍스트와 관련된 공백 처리 방식을 지정하는 속성이다.:has는 특정 요소를 가진 태그를 선택한다. (1) normal (기본값)공백은 하나로 합쳐지고, 줄 바꿈은 텍스트가 넘칠 때만 발생한다.일반적인 텍스트 흐름을 유지한다. (2) nowrap텍스트가 자동으로 줄 바꿈을 하지 않고, 한 줄에 계속 표시된다.텍스트가 부모 요소의 너비를 넘으면 오버플로우가 발생한다. (긴 텍스트가 부모 요소를 넘어서서 보이지 않는다. (3) pre-wrappre처럼 공백과 줄 바꿈을 유지하되, 요소의 너비를 넘어가지 않도록 자동으로 줄 바꿈한다. (텍스트가 넘칠 경우 자동으로 줄 바꿈이 일어나면서 공백도 그대로 유지) (4) pre-line공백은 하나로 합쳐지..

알고있으면 좋은 CSS3 Tip✨크로스브라우징이란 무엇인가?웹 페이지 또는 웹 어플리케이션이 다양한 브라우저와 버전에서 개발자의 의도대로 올바르게 작동하도록 하는 기술이다. 쉽게 말해, 특정 브라우저/기기 환경에 최적화되지 않고 공통 요소를 사용하여 웹 페이지를 제작하는 기법이다. (1) 크로스브라우징의 중요성각 브라우저마다 HTML, CSS, JavaScript 구현 방식, 즉 렌더링 엔진이 다르기 때문에 특정 브라우저에서는 의도와 다른 동작이 나타날 수 있다. 브라우저와 상관없이 웹 페이지/애플리케이션 서비스를 이용하는 사용자에게는 동등한 서비스를 제공해야하므로 크로스브라우징은 웹 페이지 개발시 고려해야하는 중요 사항 중 하나이다. (2) 크로스브라우징 확인 방법Can I Use : 기능을 검색하면 ..

알고있으면 좋은 CSS3 Tip✨가상 클래스(not, has)란 무엇인가?:not은 특정 요소가 없는 태그를 선택한다.:has는 특정 요소를 가진 태그를 선택한다. (1) :not 일반적인 요소입니다. 이 요소는 하이라이트입니다. 또 다른 일반적인 요소입니다.괄호 안의 매개변수 요소를 제외한 모든 요소의 스타일을 지정하는 데 사용한다.:not()을 사용하면 선택자를 보다 구체적으로 지정할 수 있어, 특정 요소를 제외하고 스타일을 적용하는 데 유용하다. (2) :has 일반 카드 하이라이트된 카드 일반 카드 2자식 요소의 조건에 따라 부모 요소의 스타일을 동적으로 변경할 수 있다.자식 요소에 특정 클래스가 있을 때 부모 요소에 스타일을 적용하거나, 특정 자식 요소가 포함된 부..

알고있으면 좋은 CSS3 Tip✨ line-clamp란 무엇인가? 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한할 수 있는 속성이다. (1) 사용 방법 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; display 속성을 webkit-box 또는 webkit-inline-box로 설정한다. -webkit-box-orient 속성을 vertical로 설정한 경우에만 동작한다. 단순히 요소의 줄 수만 제한하기 때문에 overflow: hidden 속성과 함께 사용하면 요소를 넘치는 텍스트를 감출 수 있다.

알고있으면 좋은 CSS3 Tip✨ 가상 클래스 & 요소 선택자란 무엇인가? 가상 클래스 선택자 특정 상태일 때 스타일을 적용하는 것이다. 기존에 존재하는 요소를 선택하는 것이다. 가상 클래스 선택자는 콜론을 1개 붙인 :hover와 같은 형태이다. 가상 요소 선택자 특정 상태가 아니더라도 스타일을 적용할 수 있다. 기존에 존재하지 않는 가상의 요소를 만들어 선택하는 것이다. 가상 요소 선택자는 콜론을 2개 붙인 ::before로 작성한다. (1) 가상 클래스 선택자 가상클래스 내용 1 :active a, button과 함께 사용하는 경우가 많다. 사용자가 활성화한 요소를 나타낸다. (마우스로 요소 클릭 시) 2 :only-child 형제가 없는 요소를 선택할 때 사용된다. :first-child:last..

알고있으면 좋은 HTML5 Tip✨ 시맨틱 태그란? 시맨틱 태그란 의미가 있는 태그를 말한다. 모든 block 영역은 div 태그로, inline 요소는 span 태그와 달리, header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그를 말한다. (1) 시맨틱 태그를 사용하는 이유 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다. 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다. (2) 시멘틱 태그 종류 header 페이지의 제목과 같은 소개 내용을 포함한다. 일반적으로 head..

알고있으면 좋은 Typescript Tip✨ Property '' has no initializer and is not definitely assigned in the constructor. ts(2564) 위 오류는 2.7.2에부터 도입된 strict class checking으로 인한 오류이다. TypeScript 2.7에는 strictPropertyInitialization이라는 새로운 플래그가 도입되었다. 이 플래그는 클래스의 각 인스턴스 속성이 생성자 본문 또는 속성 이니셜 라이저에서 초기화되는지 확인하는 검사를 수행한다. tsconfig.json 컴파일러 옵션을 살펴보면 strictPropertyInitialization 옵션이 켜진 상태(true)인걸 볼 수 있다. 쉽게 말해, 이 옵션이 켜..