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..

알고있으면 좋은 CSS3 Tip✨ 애니메이션(animation) CSS3에서는 엘리먼트의 현재 스타일을 다른 스타일로 부드럽게 전환시켜주는 애니메이션 기능을 구현하기 위한 별도의 문법을 제공하고 있다. JavaScript를 사용하여 구현한 애니메이션보다 성능적으로 최적화가 잘 되어 있다. (1) animation-name 애니메이션의 중간 상태를 지정하기 위한 이름을 정의한다. 중간 상태는 @keyframes 규칙을 이용하여 기술한다. 이름을 설정해야 애니메이션을 재생할 수 있다. animation-name: name; /* 문자열로 시작하는 이름 */ animation-name: _name; /* 언더바(_)로 시작하는 이름 */ animation-name: -name; /* 하이픈(-)으로 시작하는 ..

알고있으면 좋은 CSS3 Tip✨ text-shadow text-shadow는 글자에 그림자 효과를 주는 속성이다. text-shadow 와 box-shadow는 비슷하게 작성하기 때문에 자주 사용하지는 않지만 알아두면 좋다. // (1) text-shadow 속성 text-shadow : x축 y축 blur color; // (2) text-shadow 예제 text-shadow : 5px -5px 0 #e00012; // 글자 오른쪽과 위쪽에 빨강색 그림자넣기 text-shadow : -3px 3px 0 #e00012; // 글자 왼쪽과 아래쪽에 빨강색 그림자 넣기 x축 : 왼쪽(음수)과 오른쪽(양수)에 그림자 효과를 적용한다. y축 : 위쪽(음수)과 아래쪽(양수)에 그림자 효과를 적용한다. blur..