< Code diaries />

오늘은 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..

CSS Transform(변형), Transition(전이효과)  Transform은 '변형'이라는 뜻으로 그래픽툴에서 많이 사용되는 메뉴명입니다.HTML Element를 변형한다는 것은, 크기조절, 회전, 기울임, 이동 등을 의미합니다.Transform(트랜스폼)과 Transition(트랜지션)을 잘 사용하면, animation 효과나 보기좋은 인터렉션을 줄 수 있습니다.  자, 한번 해봅시다~!   A. Transform(트랜스폼) 속성- 모든 속성은 x,y 같이 또는 x,y를 별도로 지정할 수 있다.- Transform속성은 하나이며, 값을여러개로 나열하여 지정한다.  - 참조사이트 - 바로가기propertyvaluedescriptiontransformscale()크기 지정skew()기울임 각도ro..

CSS Grid  Flex보다  조금은 더 어려워하는 Grid 속성다루기에 오신 것을 환영합니다.Flex를 이해했다면, Grid도 어렵지 않습니다.한번 시작해 봅시다~~!!  CSS Grid 에 대하여 알아봅시다~! 출발~! Grid Overview- Flex box에서는할 수 없는 그리드 방식을 레이아웃을 구현할 수 있는 속성입니다.- 참조사이트 - 바로가기  A. Grid container- 참조사이트 - 바로가기- Grid연습을 위해 많은 학생들이 한번씩은 해보는 그리드 가든 게임~! - 바로가기 B. Grid items- 참조사이트 - 바로가기 C. Flex, Grid 공통 속성PropertyValueDescriptionnotegapNumber축약형으로 gap : row-gap column-gap..