はんのうネットワーク

29503 ワード
CSS はんのうがた テキストリンク
Unicode基礎課まとめ
]
https://www.inflearn.com/course/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EC%9E%85%EB%AC%B8/dashboard

はんのうネットワーク


反応型Web:デバイスまたはブラウザのサイズに応じて構成またはサイズを変更し、開発中のWebドキュメント、またはこの目的のための技術を反映します.
可変性:反応型サイトで最も重要なキーワード
ビューポート(viewport):現在の画面に表示される領域
デバイスに応じて異なる画面サイズに対応するには、viewportプロパティの寸法をWebドキュメントに追加する必要があります.

相対単位em rem


px:絶対長単位が変性X
Em:親要素フォントサイズ
rem:ルート要素フォントサイズ
htmlデフォルトフォントサイズは16 px 1 rem→16 px 2 rem→32 px
<!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">
    <title>em과 rem</title>
    <style>
        .outer{
            font-size: 18px;
        }
        .inner{
            font-size: 1rem; //html 기본 16px
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">고양이</div>
    </div>
</body>
</html>
内、外の空白が大きい時間をemで確定し、自分の番号を基準に!
<!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">
    <title>em과 rem</title>
    <style>
        .outer{
            font-size: 32px;
        }
        .inner{
            font-size: 1em;
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: tomato;
            padding: 1em;
            margin: 1em;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">고양이</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">
    <title>em과 rem</title>
    <style>
        .outer{
            font-size: 32px;
        }
        .inner{
            font-size: 18px;
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: tomato;
            padding: 1em;
            margin: 1em;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">고양이</div>
    </div>
</body>
</html>

Emおよびremは、環境に応じて異なるサイズで可変であるが、ブラウザまたはデバイス画面のサイズに応じて変化する単位ではない.
したがって,真の反応型単位とは言えない.

かへんたんい


ビューポートサイズに基づいて値を計算し、サイズの可変単位を決定します.
font-size : 1vw /* 뷰포트 너비의 100분의 1 */
font-size : 1vh /* 뷰포트 높이의 100분의 1 */

font-size : 1vmin /* 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 */
font-size : 1vmin /* 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 */

可変レイアウト


%

  • 比率に基づいて計算する可変レイアウトは、主に%単位
    • を用いる.
  • %e単位親要素との相対サイズ
    • をパーセンテージ値で指定します.
  • の幅とマージンを親要素の幅に比例して計算する
  • 親要素の高さに比例して計算する
  • 文字のサイズが親要素の文字サイズに比例する
    • <!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">
    <title>가변 레이아웃</title>
    <style>
        .container{
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: tomato;
        }
        .main{
            float: left;
            width: 67%;
            height: 300px;
            background-color: orange;
        }
        .aside{
            float: right;
            width: 33%;
            height: 300px;
            background-color: purple;
        }
        .footer{
            clear: both;
            width: 100%;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="main">MAIN</div>
        <div class="aside">ASIDE</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

    CSS代表関数calc()


    計算結果を属性値として指定できます
    width: calc(30px-20px)

    メディアクエリ


    これは、メディアタイプを識別し、コンテンツを取得するためのデバイスまたはブラウザの物理的属性を検出する有用なデバイスです.
  • メディアタイプ
  • 条件照会
    • ## 미디어 쿼리

미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치이다.

- 미디어 타입
- 조건에 대한 물음(쿼리)

    可変画像


    max-width:要素の最大幅制限を決定するプロパティ
    pictureおよびsource要素:メディア条件に基づいて画像を選択的に読み込むことができる要素

    可変ビデオ

  • iframeは、一定の画素値が与えられても、コンテナ内でコンテンツサイズを動的に調整することができる.幅と高さだけでは大きさの調整が難しい.
  • ビデオサービスのソースを使用する場合、高さは幅とスケールを正確に調整できない可能性があります.
    • したがって、
  • は、正確なスケールの空白を維持し、ビデオのみを表示する方法を用いる.ティエリコブレンツというWeb開発者が初めて提案した方法(アスペクト比を使用!)
    • C#リモート共有ロックフォルダへのアクセス
    JSピクチャロード時にピクチャアスペクト情報を取得する