< Code diaries />

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

CSS Position  CSS에서 문서의 레이아웃을 잡을때 가장 많이 나오는 속성중에 하나가 Position 입니다.position은 Dom tree구조와 속성을 잘 이해하면 전혀 어렵지 않은 속성입니다.한번 시작해 봅시다~~!!  CSS Position 에 대하여 알아봅시다~! 출발~! Position Overview- 모든 HTML element의 기본 포지션은 Static 입니다. 이것을 필요에따라 4가지로 변경하여 사용할 수 있습니다.- 참조사이트 - 바로가기  A. Position 속성에 대하여 알아보자. Positin 속성의 값으로 지정할 수 있는 것은 무엇일까요?아래와 같이 5가지가 있습니다. static은 기본 값입니다.PropertyValueDescriptionnotepositionst..

CSS Box Model  HTML Element를 박스모델로 컨트롤 하는 부분이다.이전에 블럭요소와 인라인요소, 인라인블럭요소에 대한 차이점을 정리해 본 적이 있습니다. 아래에 다시한번 표로 정리해서 보여드릴게요~ CSS에서는 꼭 알아두어야 할 사항입니다.자 이제 한번 살펴볼까요?  크기, 바깥 여백, 안쪽여백, 테두리 지정에 대한 계산 법 및 적용방법을 한번 알아봅시다~! BOX Model  A. 단위(Units)- 크기나 여백을 지정할때에 사용할 수 있는 단위는 아주 많습니다.- 그 중 CSS 에서 자주 사용하는 것들에 대해 알아봅시다. 단위사용예Description백분율(%)div { width:80%; }div가 속해있는 영역내에서의 80%크기픽셀(px)div ( width:80px}div의 크..

CSS Font Properties  웹페이지에서 글꼴을 지정하는 속성입니다.글꼴의 종류, 굵기, 기울임꼴 등을 설정할 수 있습니다.오늘은 FONT 에 관련된 스타일링을 한번 알아보겠습니다. 상세한 스펙을 보시려면 w3schools.com 에 잘 정리되어있는 CSS FONT Property page를 걸어둘게요~https://www.w3schools.com/css/css_font.asp   A. FONT 관련 CSS글자에 관련된 속성입니다.  자주사용하는것 말고는 간혹가다 꺼내쓰게 되는데요, 각 속성마다 지정할 수 있는 속성의 방식과 값들이 있습니다. 추가 속성들과 값들은  참조링크에서 확인하실 수 있습니다.구분Property name사용 예Description글꼴font-familybody { fon..

@property를 사용하면 css변수를 조금 더효율적으로 관리 할 수 있습니다.  1. css 변수 선언 기본방법:root { --primary : tomato;}h1 { color : var(--primary)}이슈 : 변수의 값을 혹시 컬러가 아닌 다른값이 들어가게 되면 아예 컬러가 적용되지 않습니다.  2. @property 사용시@property --primary { syntax : ''; initial-value : tomato ; inherites : false;}h1 { color : var(--primary) // tomato;}h1:hover { --primary : olive;}h1:nth-child(2):hover { --primary : gold;}변수의 기본 값을 지..