코드 땜장이

 스마트폰이 나오고 나서 모바일에서 사용하는 유저의 액션은 엄청 늘어나기 시작했다. 간단하게 마우스 클릭과 유사한 탭 부터 마우스 휠에 대응 되는 핀치, 스프레드, 터치가능한 디바이스에서만 가능한 투탭(두손가락으로 터치) 이상의 행위들...  우리는 사용자의 경험에 맞게 개발을 하여야 한다. 무슨말이냐 하면, 모바일기기에 휠이 없다고 해서 확대해 가면서 보아야 하는 컨텐츠를 마우스를 무조건 연결하여 보아야 하는 것은 말이 안된다는 뜻이다.  Hammerjs  여기서 우리의 개발을 편하게 만들어 줄 수 있는 라이브러리가 있다. Hammerjs가 지원하는 제스처는 아래와 같습니다. Tap : 클릭과 같습니다. Press : 일정시간 이상 같은곳을 누르고 있습니다. Pan :  포인터가 특정위치를  클릭후 한 방향으로 이동시 발생 합니다. Swipe : 포인터가 특정위치를  클릭후 한 방향으로 특정시간 정도 특정거리 이상 이동시 발생합니다. Pinch : 두개 이상의 포인터가 특정방향에서 멀어지거나 가까워질때 발생 합니다. Rotate : 두개 이상의 포인터가 원을 그리게 되면 발생합니다.  위에서 보면 pinch와 rotate의 경우에는 두개이상의 포인터가 필요하여 마우스 만으로는 불가능한 액션이지만, 나머지는 하나의 포인터만으로 가능한 제스처이기에 충분히 마우스만으로 구현이 가능한다.  사용해보기  모바일과 PC에서 같이 사용해볼수 있는 Swipe 제스처를 사용해 보도록하자.  위 처럼 간단하게 스와이프 제스처를 추가해볼 수 있다. 이것저것 사용해보면 트렌디한 웹사이트를 만드는데에 꽤나 도움이 될 것 이다.

  폰트의 크기는 사용자에게 꽤나 중요한 정보이다. 읽는 순서에도 영향을 끼칠정도이니까 말이다.  이런 이미지를 본적 있나? 솔직히 나는 폰트 크기순으로 읽혔다. 그래서 이 포스팅을 쓰는거기도 하다.  작은 폰트로 글써보기. <div style =" font-size : 14 px" > font-size: 14px </div> <div style =" font-size : 13 px" > font-size: 13px </div> <div style =" font-size : 12 px" > font-size: 12px </div> <div style =" font-size : 11 px" > font-size: 11px </div> <div style =" font-size : 10 px" > font-size: 10px </div> <div style =" font-size : 9 px" > font-size: 9px </div> <div style =" font-size : 8 px" > font-size: 8px </div> <div style =" font-size : 7 px" > font-size: 7px </div> <div style =" font-size : 6 px" > font-size: 6px </div> <div style =" font-size : 5 px" > font-size: 5px </div> <div style =" font-size : 4 px" > font-size: 4px </div>  간단하게

 일단 이걸 css 트릭이라고 부르긴 하지만, 뭐 거창할 거 없이 팁정도의 내용이다. 일반적으로 기본서에는 잘 나오지 않는 내용을 다룰 예정이다.  정사각형 만들기  정사각형 만들기가 뭐 그리어렵다고, 글을 작성하는가? 라고 말할 수 있다. 당연하게도 맞는 말이다. <div style =" width : 200 px ; height : 200 px ; background : green" > 200*200 </div>  당연하게도 위처럼 하면 200*200의 정사각형이 된다.  만들어야 할 정사각형의 크기를 안다면 위처럼 지정 해줄 수 있다. 하지만, 부모 너비에 비례하는 정사각형을 만들려고 해보자. 예를 들어 부모의 너비의 10%하는 정사각형 말이다. <div style =" width : 10 % ; height : 10 % ; background : green" > 200*200 </div> 간단하게 작성해보았다. 하지만, 우리가 원했던 정사각형의 모양은 아니다. 아쉽게도 위의 코드는 부모(컨테이닝 블록)의 너비 10%, 높이 길이 10%이기 때문에 너비에 해당하는 정사각형을 이루기에는 어렵다.  비율지정  우리는 길이를 넣을 수 있는 속성의 값에 백분률도 넣기도 한다. 그런데 그 백분률이 무엇에 대한 백분률인지는 문서를 확인해보지 않으면 알 수 없다. 그래도 추정 할 수 있는 것은 width은 부모의 width를 height는 부모의 height를 따라가겠지 정도이다.  아래는 어떤 속성이 부모의 width, height따라 가는지에 대한 표이다.  부모의 width : width, left, right, padding, margin   부모의 heigh : height, top, bottom  자 위의 설명 대로면, padding이나 margin의 경우 padding-top, margin-top등 높이에 영향을 주는 속성임에도 불구하고 width의 값을 따라가는 것

 최근에 GoogleIO의 섹션중에 state of css 2022가 있었는데, 꽤나 재미있는 속성의 추가가 있어서 소개하고자 한다. 전부 새로운 내용은 아니고 몇몇 브라우저들이 지원하고 있던 내용도 있기는 하니 참고 바란다. Colorv1 Fonts  해당 폰트는 새로운 형태의 폰트이다. 특징으로는 당연히 폰트이니 벡터일테고, 색상 변화에 초점을 맞춘 폰트인 듯 한다. 제공되는 내용은 색상 혼합 및 그라디언트이다.  이 내용이 반겨지는 것은 이제 아이콘폰트에서 투톤을 지원하기 위하여 이미지 파일을 사용하지 않아도 된다는 것이다. 한때 투톤 아이콘이 유행처럼 퍼졌던것을 기억하는가? < https://fonts.google.com/icons?selected=Material+Icons&icon.style=Two+tone >  위와 같이 색상을 두개를 표현하는 아이콘인데, 위처럼 이용하기위해서는 저 아이콘이 폰트가아닌 이미지로 불러와야 했다. svg도 이미지로 본다. 하지만 사이즈 변경이나 색상변경이 일반적인 폰트와 같은 형태가 아니기 때문에 다른 폰트들과 달라 꽤나 불편함이 있었다. 하지만 이번에 colorv1 fonts를 지원하게 되면 아이콘 폰트에 투톤을 적용하기가 더 수월하지 않을까 생각한다. 샘플은 아래에 있다. https://developer.chrome.com/blog/colrv1-fonts/ inert  일반적으로 우리는 alert함수 처럼 모달(해당 화면의 동작을 완료 하기 전에는 다른 화면으로 갈수 없는 팝업 형태)을 지원하기 위하여, 어떤 팝업을 열게 되면 뒤에 배경을 깔아서 해당 팝업 이외의 컨텐츠에 클릭을 할 수 없도록 지원하였다. < https://www.w3schools.com/howto/howto_css_delete_modal.asp >  위와 같이 말이다. 위의 방식은 백그라운드의 크기를 지정 하는 것부터 문제가 된다. 언제나 항상 html을 꽉채운 형태가 되어야 하며, 특정요소는 풀어 주고 싶을 때도 있