TIL 010|CSS実践テクニック
Today, I Learned.
[かっこいいライオンのようにフロントアカデミーを整理]中学校からの内容を整理▼CSS実務テクニック▼▼▼
[かっこいいライオンのようにフロントアカデミーを整理]中学校からの内容を整理
- CSS 실무 테크닉.▼CSS実務テクニック▼▼▼
1.画像置換技術
Webアクセス性を満たすためには,設計上は見えないが,スクリーンリーダーや検索エンジンの有効なコンテンツ収集のために,情報を伝達するテキストをhtmlのあちこちに隠す方法.
1-1. NAVERのテクニック
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
現在、ジプシーのフロントエンドエンジニアを務めている趙恩氏は、IEにmargin: -1px;と記入しないと、スクリーンリーダーが読めない可能性があるため、声明が必要だと述べた.
1-2. ココアの使い方
1-2-1. PCの画像に意味のあるテキストの代替テキストを提供する場合、
.ir_pm {
display: block;
overflow: hidden;
Font-size: 1px;
line-height: 0;
text-indent: -9999px;
}
1-2-2. 「移動に使用」を使用した画像に意味のあるテキストの代替テキストを指定する場合。
.ir_pm {
display: block;
overflow: hidden;
font-size: 1px;
line-height: 0;
color: transparent;
}
1-2-3. スクリーンリーダーは読み取りを必要としません 寸法構造で必要な場合
.screen_out {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
1-2-4. 画像を閉じるときに重要な画像でテキストを置換して置換テキストを表示したい場合。
.ir_wa {
display: block;
overflow: hidden;
position: relative;
z-index: -1;
width: 100%;
height: 100%
}
2. Custom
実際の操作では、デザイン上の個性を与えるために、input要素やselectboxが指定したブラウザスタイルと異なる場合があります.
2-1. Input checkbox
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>input custom</title>
<style>
.blind {
position: absolute;
clip: rect(0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.labl-hold {
display: block;
height: 22px;
margin: 17px 0 21px;
text-align: left;
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #767676;
cursor: pointer;
}
.labl-hold::before {
display: inline-block;
content: "";
width: 22px;
height: 22px;
margin-right: 8px;
vertical-align: -5px;
background-image: url("./img/icon_check_empty.png") ;
}
.inp-hold:checked + .labl-hold::before {
background-image: url("./img/icon_check.png") ;
}
</style>
</head>
<body>
<!-- blind 클래스로 요소를 숨겨줍니다. -->
<input type="checkbox" id="inpHold" class="inp-hold blind">
<label for="inpHold" class="labl-hold">로그인 상태 유지</label>
</body>
</html>
irテクノロジーを使用してinput要素checkboxを非表示にします.
labelの仮想要素に画像を挿入することでカスタマイズします.
2-2. Input checkbox
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>select custom</title>
<style>
.btn-select {
width: 200px;
height: 30px;
background: hotpink;
color: #fff;
}
.list-member {
display: none;
width: 200px;
height: 30px;
}
.list-member.on {
display: block;
}
.btn-select:active + .list-member {
display: block;
}
.list-member li {
height: 30px;
width: 200px;
}
.list-member li button {
display: block;
height: 100%;
width: 100%;
background-color: #fff;
border: 1px solid black;
border-top: none;
}
.list-member li button:hover {
background-color: bisque;
}
</style>
</head>
<body>
<button class="btn-select">당신이 생각하는 최고의 운동은?</button>
<ul class="list-member">
<li><button type="button">데드리프트</button></li>
<li><button type="button">벤치프레스</button></li>
<li><button type="button">스쿼트</button></li>
<li><button type="button">숄더프레스</button></li>
</ul>
<script>
const btn = document.querySelector('.btn-select');
const list = document.querySelector('.list-member');
btn.addEventListener('click', () => {
list.classList.toggle('on');
});
list.addEventListener('click', (event) => {
if (event.target.nodeName === "BUTTON") {
btn.innerText = event.target.innerText;
list.classList.remove('on');
}
});
</script>
</body>
</html>
2-3. 実習例
Code
簡単なjsを使用して、display: none;に隠されたリストをボタンをクリックするとdisplay: block;に変換し、単一のチェックのようにカスタマイズします.
3. CSS Sprite
これは、複数の画像を1つの画像ファイルに配置することによって、画像ロードの負担を軽減する方法である.
image sprite作成サイト:image sprite generator
注意:済州コード大本営
4.Retina表示対応方法
4-1. Retinanとは?
これは、特定の視野範囲内で、人の目では画素を区別できない画素密度(300 PPIを超える)を持つアップルの液晶パネル製品のブランド名です.
4-2. 原因は何ですか。
Retina(高解像度画面)に入ると、論理画素(cssで表される画素のデフォルト単位)と物理画素(デバイスが実際に処理できる画素のデフォルト単位)違いはありますが、ブラウザではcssで定義した画素に従って画像をレンダリングする必要があるため、本来物理画素に合致するレンダリング画像が論理画素のように大きくなるため、次のような違いが発生します.
4-3. 解決策
画面で表現したいイメージサイズの2倍のイメージで代用します.
(画像sprite作成サイト:image sprite generator)
5.反応型内容
5-1. はんのうイメージ
5-1-1. width: 100%
ビューポート幅ベースの100%
5-1-2. max-width: 100%
元の画像の幅に基づいて100%
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>반응형 이미지</title>
<style>
/* 반응형 이미지 */
img {
/* viewport 기준 100% */
/* width: 100%; */
/* 원본 이미지 기준 100% */
max-width: 100%;
}
</style>
</head>
<body>
<img src="./img/example.jpg" alt="">
</body>
</html>
5-2. はんのうしきバックグラウンドイメージ
5-2-1. コンテナ幅の50%を占め、パーセンテージを維持し、自動的に高さを設定します。
5-2-2. コンテナ幅の50%を占め、パーセンテージを維持し、自動的に高さを設定します。
5-2-3. コンテナ全体を上書きしてイメージを切り取ります
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>반응형 이미지</title>
<style>
/* 반응형 백그라운드 이미지 */
div {
width: 100vw;
height: 100vh;
/* 컨테이너의 width의 50%를 차지하고 비율을 유지하며 height를 auto 설정 */
/* background: url("./img/example.jpg") 0/50% auto no-repeat; */
/* 컨테이너 전체를 덮지만 이미지를 자르지 않게 유지. */
/* background: url("./img/example.jpg") 0/contain no-repeat; */
/* 컨테이너 전체를 덮고 이미지가 잘림 */
background: url("./img/example.jpg") center center/cover no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5-3. リアクションフィルム
ビデオソース：SMTOWNYOUTUBE <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>반응형 동영상</title>
<style>
div {
position: relative;
padding-top: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<iframe width="950" height="534" src="https://www.youtube.com/embed/WPdWvnAAurg?autoplay=1&muted=1&controls=1&loop=1&playlist=WPdWvnAAurg" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
padding-top: 56.25%;は16:9のビデオを反応型ビデオにすることができる
(9/16 = 56.25%)
Reference
この問題について(TIL 010|CSS実践テクニック), 我々は、より多くの情報をここで見つけました
https://velog.io/@dhforb123/TIL-010-CSS-실무-테크닉
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}.ir_pm {
display: block;
overflow: hidden;
Font-size: 1px;
line-height: 0;
text-indent: -9999px;
}.ir_pm {
display: block;
overflow: hidden;
font-size: 1px;
line-height: 0;
color: transparent;
}.screen_out {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}.ir_wa {
display: block;
overflow: hidden;
position: relative;
z-index: -1;
width: 100%;
height: 100%
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>input custom</title>
<style>
.blind {
position: absolute;
clip: rect(0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.labl-hold {
display: block;
height: 22px;
margin: 17px 0 21px;
text-align: left;
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #767676;
cursor: pointer;
}
.labl-hold::before {
display: inline-block;
content: "";
width: 22px;
height: 22px;
margin-right: 8px;
vertical-align: -5px;
background-image: url("./img/icon_check_empty.png") ;
}
.inp-hold:checked + .labl-hold::before {
background-image: url("./img/icon_check.png") ;
}
</style>
</head>
<body>
<!-- blind 클래스로 요소를 숨겨줍니다. -->
<input type="checkbox" id="inpHold" class="inp-hold blind">
<label for="inpHold" class="labl-hold">로그인 상태 유지</label>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>select custom</title>
<style>
.btn-select {
width: 200px;
height: 30px;
background: hotpink;
color: #fff;
}
.list-member {
display: none;
width: 200px;
height: 30px;
}
.list-member.on {
display: block;
}
.btn-select:active + .list-member {
display: block;
}
.list-member li {
height: 30px;
width: 200px;
}
.list-member li button {
display: block;
height: 100%;
width: 100%;
background-color: #fff;
border: 1px solid black;
border-top: none;
}
.list-member li button:hover {
background-color: bisque;
}
</style>
</head>
<body>
<button class="btn-select">당신이 생각하는 최고의 운동은?</button>
<ul class="list-member">
<li><button type="button">데드리프트</button></li>
<li><button type="button">벤치프레스</button></li>
<li><button type="button">스쿼트</button></li>
<li><button type="button">숄더프레스</button></li>
</ul>
<script>
const btn = document.querySelector('.btn-select');
const list = document.querySelector('.list-member');
btn.addEventListener('click', () => {
list.classList.toggle('on');
});
list.addEventListener('click', (event) => {
if (event.target.nodeName === "BUTTON") {
btn.innerText = event.target.innerText;
list.classList.remove('on');
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>반응형 이미지</title>
<style>
/* 반응형 이미지 */
img {
/* viewport 기준 100% */
/* width: 100%; */
/* 원본 이미지 기준 100% */
max-width: 100%;
}
</style>
</head>
<body>
<img src="./img/example.jpg" alt="">
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>반응형 이미지</title>
<style>
/* 반응형 백그라운드 이미지 */
div {
width: 100vw;
height: 100vh;
/* 컨테이너의 width의 50%를 차지하고 비율을 유지하며 height를 auto 설정 */
/* background: url("./img/example.jpg") 0/50% auto no-repeat; */
/* 컨테이너 전체를 덮지만 이미지를 자르지 않게 유지. */
/* background: url("./img/example.jpg") 0/contain no-repeat; */
/* 컨테이너 전체를 덮고 이미지가 잘림 */
background: url("./img/example.jpg") center center/cover no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>반응형 동영상</title>
<style>
div {
position: relative;
padding-top: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<iframe width="950" height="534" src="https://www.youtube.com/embed/WPdWvnAAurg?autoplay=1&muted=1&controls=1&loop=1&playlist=WPdWvnAAurg" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>Reference
この問題について(TIL 010|CSS実践テクニック), 我々は、より多くの情報をここで見つけました https://velog.io/@dhforb123/TIL-010-CSS-실무-테크닉テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol