< Code diaries />

CSS의 filter 속성을 사용하면 요소에 다양한 시각적 효과를 적용할 수 있습니다. 다음은 filter에 사용할 수 있는 주요 CSS 함수 목록입니다:1. Blurblur(radius): 요소를 흐리게 합니다.예: filter: blur(5px);2. Brightnessbrightness(factor): 요소의 밝기를 조정합니다. 값이 1일 때 원래 밝기, 0보다 작으면 어두워지고, 1보다 크면 밝아집니다.예: filter: brightness(1.5);3. Contrastcontrast(factor): 요소의 대비를 조정합니다. 값이 1일 때 원래 대비, 0이면 회색으로 변하고, 1보다 크면 대비가 높아집니다.예: filter: contrast(200%);4. Drop Shadowdrop-shado..

CSS의 env() 함수는 브라우저 또는 기기에서 제공하는 환경 변수를 참조하는 함수로, 화면 안전 영역이나 특정 기기의 특성에 맞춰 레이아웃을 동적으로 조정할 때 유용합니다. env() 함수는 특히 모바일 기기에서 노치, 하단바 등으로 인해 안전 영역이 필요한 경우 여백을 설정할 때 자주 사용됩니다.    CSS env() 함수 예제 이 페이지는 브라우저의 안전 영역을 자동으로 감안하여 여백을 설정합니다.   주요 env() 변수를 사용한 예기본적으로 아래와 같은 safe-area-inset-* 변수를 제공합니다:safe-area-inset-top: 화면 상단의 안전 영역 여백safe-area-inset-right: 화면 오른쪽의 안전 영역 여백safe-area-inset-bottom:..

오늘은 HTML문서에서의 프린트 설정에 대하여 알아볼게요웹 페이지를 디자인 할때 Screen 에서 보이는 모습을 CSS로 스타일링 하게 되는데요,페이지 중 인쇄를 제공해야하는 페이지들은 별도로 인쇄용 CSS를 정의하게 됩니다.그 방법을 몇가지 소개해볼게요 1. CSS 파일 내부에서 @media로 프린트 css 지정하기css 내부에서 사용할때에 할 수 있는 방법입니다.아래 코드를 보면 @media print 구문을 이용하여 프린트할때에 문서의 배경색과 글자색을 변경하고 있습니다. * { margin:0;padding:0}body { background-color:black; color:#fff;}p { line-height:2; max-width:800px; margin:0 auto;}@m..

CSS Background  CSS에서 Background관련된 속성은 정말정말 중요합니다.그냥 배경이미지를 넣는것으로 생각할 수도 있지만, 웹페이지의 수많은 곳이 background-image로 표현되고 있습니다.  기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다. Overview HTML element에 컨텐츠요소가 아닌 배경으로 이미지를 배치 할 수 있는 속성입니다. 작은 아이콘부터 배경까지 다양한방법으로 사용할 수 있습니다. 또한, 웹 접근성을 위한  IR(Image Replace)기법으로 사용이 많이 됩니다. Background property - 주요 속성- 굉장히 자주 사용이 된다.property{ value }Descriptionbackgroundgold url('') no..

CSS Responsible   반응형웹사이트를 만들려면 각각의 디바이스 해상도에 따라 대응할 수 있어야 하는데, 이때에 Media query를 사용하면 잘 만들 수 있습니다.반응형웹은 모바일을 기준으로 할때에는 (min-width)를 먼저 사용하고, PC를 기준으로 할 때에는 (max-width)를 먼저 사용하면 됩니다.  @media 를 정리해 놓은 사이트 - w3schools 바로가기  /  Mdn 바로가기   Media 속성@media { } - MDN 참조 바로가기 /* 최상위 코드 레벨 */@media screen and (min-width: 900px) { article { padding: 1rem 3rem; }}/* 다른 조건부 @규칙 내에 중첩 */@supports (disp..

CSS Animation(애니메이션)  Transition의 효과와는 다르게 실제로 시간순서대로 애니메이션을 적용할 수 있는 속성입니다.Transform과 같이 사용하면, 반복되는 애니메이션 또는 스크롤이벤트때 나타나는 이벤트 등 다양하게 인터렉션을 만들 수 있습니다.웬만한 인터렉션 효과는 CSS로 처리해 놓고 javascript에서 classList 속성을이용하여 제어하는 것이 좋습니다.  자, 한번 해봅시다~!   Animation 속성- CSS animation은 자주 사용된다.- 참조사이트 - 바로가기propertyvaluedescriptionanimation축약형아래의 속성들을 축약형으로 쓸 수 있으며, 이때에 필수 속성은 animation-name 과 animation-duration이다.an..