가능한것은 가능한것으로

그냥 생각나면 바로 구글링 들어가지만 기억하는 웹 스타일 기법 오늘도 아주 기본적인것을 사용했다 html css .outdiv{ position: relative; } .indiv{ position: absolute; } 기본적으로 이렇게 만들어 한개의 중첩 div를 만들어 냈다. 이후 바뀐 css를 보자 .outdiv{ position: relative; width: auto; max-height:300px; object-fit: cover; } .indiv { position: absolute; width: 00px; height: 00px; top: 00px; background-color:#000000; line-height:110%; font-family: Copperplate, Papyrus,..

그동안 작업해왔던것들을 기록해볼려고 합니다. 저는 쇼피파이라는 플랫폼을 이용하는 업체에 다니고 있으며 대표님이 커스터마이징하고 싶은 것들을 수정해주고 있는 개발자입니다. 처음 쇼피파이라는것을 알고 기본 도메인 및 페이지 업체 전용 사용 언어(liquid) 등을 사용하는데에 익숙해 질 필요가 있다고 생각했습니다. 간단하게 표도 구축해보고 쉽게 표도 구축할수 있도록 도와주는 스키마도 있었으며 빠르고 잘 편집할려면 페이지 빌더 도움을 받아 제작하기로 했다. 구동방법은 아직도 잘 이해는 못하고 있지만 응용으로 다 해결하고 있는상황이다. 첫번째 난관 쇼피파이는 처음으로 Theme.liquid 파일을 읽어 시작하며 {{ content_for_header }} 그리고 index.liquid 파일을 읽어 {{ cont..

liquid를 사용하면서 html css js 까지 다양하게 배우고 있는데 지금부터라도 차근차근 확인했던걸 복습하는것으로 써볼려고 합니다. 오늘은 css Transtions 와Animations 를 사용해 input label을 수정하는 작업을 하였다. 기본적으로 그냥 위치만 옴기는 것 혹은 회전시키는것은 transtions에 다있는것 같다 anmations와 transtions를 조합해 이동 및 변화 에니메이션을 주고 그 외 사라지거나 확대 같은 것들은 또 다른 옵션이 있더라 방법 1 @keyframes trans_name{ from{ } to{ } } 방법 2 @keyframes trans_name{ 0%{ } { } 100%{ } } 두가지 방법으로 변형할 것을 만들고 적용하고 싶은 테크의 CSS에..