CSS · HTML
grid를 이용한 sns 공유버튼 만들기
See the Pen grid를 이용 sns 공유 버튼 by nilgi (@nilgi) on CodePen.
display: grid; // grid 정의
grid-template-columns: 25% 25% 25% 25%; // 4개의 요소 크기를 25%로 똑같이 한다.
grid-column-gap: 2px; // 요소 간격
<a href="#" target="_blank" onclick="javascript:window.open( 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( document.title ) + '%20' + encodeURIComponent( document.URL ), 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, width=600, height=600' ); return false;" title="트위터">
<div class="sns_2">트위터</div> // 글자대신 <img>를 넣어도 된다.
</a>
- - -
[웹코딩 배우기/· CSS] - 반응형 레이아웃을 좀 더 쉽게 - display: grid;
반응형 레이아웃을 좀 더 쉽게 - display: grid;
See the Pen display: grid by nilgi (@nilgi) on CodePen. display: grid; // 사용하면 반응형 페이지를 쉽게 만들수 있다. grid-template-columns: auto auto auto; // 3열, 화면 크기에 맞게 자동으로 모두 똑같이 • grid-column-gap
nilgi.tistory.com
[웹코딩 배우기/· CSS] - grid-template-columns, rows
[웹코딩 배우기/· CSS] - grid-column, row - 아이템 확장
[웹코딩 배우기/· CSS] - grid-area: name;
[웹코딩 배우기/· CSS] - grid-area로 레이아웃 만들기