logo contentの説明とhover効果つける

kimhyonju commented 4 years ago

hover効果で触れたら説明が表す

kimhyonju commented 4 years ago

Mosaic Effect size control

kimhyonju commented 4 years ago

-webkit-fill-available; PCでheightのサイズが合わないissueでつけたが、モバイルには合わない。

kimhyonju commented 4 years ago


.logocon:hover:after,
.logocon.hover:after,
.logocon:hover:before,
.logocon.hover:before,
.logocon:hover div:after,
.logocon.hover div:after,
.logocon:hover div:before,
.logocon.hover div:before {
    left: 0;
    right: 0;
    opacity: 0.8;
  }

要素を動かすのは25%づつのこの要素が全部必要。
動かなかったのは真ん中のコメントの縦を小さめに設定してしまって真ん中の黒い線が発生。

kimhyonju commented 4 years ago


이미지여백의 원인

 Image를 DIV나 Table에 넣을 경우 하단에 원치않는 공백이 생깁니다.
그 이유는 Image가 인라인 요소이기 때문에 그런 것입니다. 
인라인 요소의 경우 블록 요소와 달리 보이지 않는 가상의 기준선이 존재를 하는데 
기본값으로 vertical-align의 baseline에 위치를 하게 됩니다. 
baseline은 영문 소문자로 치자면 아래 삐침이 없는 글자(a, b, c 등등..)의 
아랫쪽에 위치하게 됩니다. 그렇기 때문에 아래 삐침이 있는 글자(y, g 등등..)을 
고려하면 하단에 1~3px정도의 공백을 유지하게 되는 것입니다.

해결방안
원인을 알았으면 해결책은 쉽게 찾을 수 있습니다.

첫번째 방안
첫번째는 이미지의 vertical-align을 bottom으로 하는 것입니다. 
vertical-align : bottom은 아래삐침이 있는 글자까지 고려하여 하단으로 
정렬하는 것입니다. 그렇게 되면 공백이 없어지게 되겠지요.

<div><img src="#" style="vertical-align: bottom" /></div>

두번쨰 방안
두번쨰는 이미지를 인라인 요소에서 블록 요소로 속성을 변경시키는 것입니다. 
블록 요소인 경우는 가상의 기준선이 없기 때문에 하단의 공백을 무시합니다. 
display : block로 변경을 하면 됩니다.

<div><img src="#" style="display: block" /></div>

kimhyonju commented 4 years ago

logo contentに【イメージタッチ】つける

kimhyonju / portfolio

logo contentの説明とhover効果つける #14