< Code diaries />

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

HTML(Hyper Text Markup Language)   - 웹페이지에서 가장 중요한 부분인 링크 태그와 이미지 삽입 태그에 대하여 공부해 봅시다.- HTML은 텍스트로 이루어진 문서이기 때문에 어떠한 미디어 파일도 포함하지 않습니다. 하여 모든 미디어 파일들은 각자의 태그를 이용해 소스의 위치를 지정해주어야 웹문서에 표시가 됩니다., , , 태그 살펴보기  OVERVIEWTagDescriptionMeaning클릭하여 다른 웹페이지로 이동하게 해주는 태그이며, 필수 속성으로는 href 가 있다. 이미지파일을 웹문서에 넣을때 사용하는 태그이며, 필수 속성으로는 src와 alt가 있다. 이미지, 표, 그래프 등 다양한 정보를 담고있는  미디어들을 묶어서 그룹 잡을 수 있는 태그이다. 태그와 함께 사..

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