< Code diaries />

VS code 다운로드 Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.code.visualstudio.com  크롬브라우저에 web developer 확장프로그램 설치  Web DeveloperAdds a toolbar button with variou..

SASS(SCSS)   Sass is the most mature, stable, and powerful professional grade CSS extension language in the worldSass는 sass-lang.com 이 공식 사이트이며, 세상에서 가장 안정적이며 파워풀한 css 확장언어라고 말하고 있고, 내 생각도 비슷하다. ^^Sass를 왜 써야하는지에 대해서는 많은 유튜브나 사이트에서 이미 보고 왔거나 알고있을 거라고 생각합니다.이 페이지에서는 간단한 소개와 설치 방법 및 초기 사용방법등에 대해서만 정리해 보겠습니다.또한 Vs code extention이 아닌 Terminal 사용방법을 기본으로 하고 있습니다. 드디어 SASS를 시작하게 되었군요. 축하드립니다~!! A. Over..

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