본문 바로가기

카드유형3

웹사이트 만들기 : 카드 유형 레이아웃03 레이아웃 : 카드 유형03 이번에는 다음과 같은 3개의 카드가 있는 레이아웃 유형을 작업해 보도록 하겠습니다. CSS 소스 폰트는 에스코어 드림을 사용했고, 컨테이너 안에 3개의 카드를 만들어 display:flex로 가로 정렬을 해 주었습니다. blind 효과는 ir 효과와 마찬가지로, 글자가 눈에 보이지 않게 작업하지만, 스크린 리더기에서는 읽히게끔 만들어 웹 접근성을 준수하게끔 합니다. /* fonts */ @import url('https://webfontworld.github.io/score/SCoreDream.css'); .score { font-family: 'SCoreDream'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } .. 2022. 8. 10.

웹사이트 만들기 : 카드 유형 레이아웃02 레이아웃 : 카드 유형02 이번에는 카드가 총 8개인 유형입니다. 다음과 같은 레이아웃을 작업해 보도록 하겠습니다. CSS 소스 ir 효과는 글자를 시각적으로 보이지 않게 작업해주고 있지만, 스크린 리더기에서 글자가 읽히게 해 줌으로써 웹 표준을 준수할 수 있습니다. /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: 'GmarketSans'; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, .. 2022. 8. 9.

웹사이트 만들기 : 카드 유형 레이아웃01 레이아웃 : 카드 유형01 다음과 같은 카드 유형의 레이아웃을 작업해 보도록 하겠습니다. CSS 소스 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } /* common */ .container { width: 116.. 2022. 8. 8.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바