CSS display:none VS overflow:hidden
divを使用して6つのボックスを作成し、上記の例のようにwrapperというclass nameというdivラベルにflexを配置します.
これらの箱の1つが見えないように処理したい場合は、どうすればいいですか?
聞いてみよう!
1. display: none;
(display propertyには外部表示タイプと内部表示タイプがありますが、近い将来記事を作成し、リンクを添付します.
mdnのnone valueはboxタイプとして表され、これは内部か外部か、理解する必要があります.)
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.
2. visibility: hidden
要素は非表示になりますが、その影響はレイアウトで非表示になっていない場合と同じです.一言も見えませんでしたが、レンダリングされ、スクリーンにスペースがありました.
非表示要素はフォーカスを取得できません(たとえば、ラベルインデックスでナビゲートします).
접근성 고려사항
可視性値をhiddenに設定した要素は、「アクセス性」ツリーから除外されます.これは、スクリーンリーダーが要素とそのすべてのサブ要素を読み込まないことを意味します.
3. overflow: hidden
- visible:オーバーフロー属性のデフォルト値.コンテンツがオーバーフローした場合は、ボックスの外に表示されます.
- スクロール:オーバーフローした要素が見えず、スクロールバーが生成されます.横スクロールバーと縦スクロールバーが表示されます.スクロールバーを除去するには、個別に設定する必要があります.(::-webkit-scrollbar, scrollbar-width)
- hidden:要素の内容が大きすぎてボックスのサイズに一致しない場合に使用できるプロパティ.オーバーフローした部分を切り取り、ボックスの外に表示されず、スクロールバーは提供されません.
- auto:オーバーフローした要素が見えず、内容の大きさに応じて横スクロールバーまたは縦スクロールバーを追加するかどうかを自動的に決定します.
このオーバーフロー:hiddenプロパティは、オーバーフロー要素を隠すだけでなく、要素を隠すためにも使用されます.
幅:0;height: 0;オーバーフロー:hidden;非表示を使用できます.
ただし、消去要素ではなくマスキング要素なので、
margin値とpadding値(領域を占めない)は依然として存在します.
flexは、displayプロパティの特性のため、box 1とbox 2の間に残量値がある可能性があります.
- オーバーフロー:非表示の幅と高さが設定されていない場合は、サブエレメントを含む
が表示されます.- の親要素に一定のheightまたはwidth属性がある場合、そのサイズは大きくなり、子要素のオーバーフロー部分がオーバーフローしないようにします.そうしないと、オーバーフローした子要素が含まれます.
はまた、利益合併現象を解決するためにオーバーフロー属性を使用することもできる.質問があれば、次のリンクをクリックしてください!
margin collapsing 마진 병합, 상쇄 현상
4. display:none과 overflow:hidden의 차이, 쓰임새
Webアクセス性画像表示、IR技術-添付ファイルを参照
https://velog.io/@wltnrms0629/HTMLCSS-%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%91%9C%ED%98%84-IR%EA%B8%B0%EB%B2%95
display:noneとvisibility:hiddenはいずれもコンテンツを非表示にすることができるが、スクリーンリーダーとして読み取ることもできないため、アクセス性が悪い.ただしoverflow:hiddenは要素を非表示にしますが、スクリーンリーダーは読み取ることができますので、アクセス性を考慮して、このプロパティを使用することが望ましいです.(オーバーフロー:読めないスクリーンリーダーが隠れているそうです.)
naverまたはdaumがこのオーバーフローをどのように利用するかを理解します:hiddenプロパティ.
4-1. naver의 .blind
naver의 .blind
position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;
4-2. daum의 .screen_out
daum의 screen_out
overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;
「naver」はwidth、heightを1 pxに設定し、clipプロパティを使用して再度非表示にします.「daum」はwidth、heightを0に設定して要素を非表示にします.両者に差があります
しかし、この2つの方法は、検索ウィンドウ、ナビゲーションバー、画像で置き換えられたバッジなどのテキストコンテンツにオーバーフローします.hiddenプロパティを使用して要素を非表示にし、スクリーンリーダーはこれらのコンテンツを読み取ることができます.
検索すると、スクリーンリーダーはwidth、heightサイズが0の要素を読み取ることができないため、要素のサイズは少なくとも1 px以上に適している必要があり、macからchromeブラウザまでのスクリーンリーダー(voice over)テストの結果、width、heightが0でも正常に動作することが明らかになった.(ブラウザまたはスクリーンリーダーのタイプによって異なる場合があります)
(text-indentは推奨されません)
理由は.性能がよくない.2.不要な高さと幅
->だから今度はwidth,height,line-heightなどで大きさを落としました?)
4-3. naver가 사용한 clip 속성은 무엇일까?
Adobe Illustratorのパージマスク機能と同じ.
clip의 value
- auto:デフォルト
クリップの適用先と同じサイズの適用
クリップが適用されていない場合と同じ- 形状:rect(上、右、下、左)形式で指定
を指定できます.
これは4つのエッジの距離を表し、負の値- 初期値:デフォルト値
に設定
継承- :親要素の属性値
を継承
shape 사용법
rect( <top>, <right>, <bottom>, <left> )
top:以上の位置から
右:左側で終了
bottom:上部から終わる位置
left:左側からの位置
positionのプロパティ値がabsoluteまたはfixedの場合にのみ適用されます.
ソース-https://want-itschool.tistory.com/29
5. 그 외 values
display의 values
- inline
- block
- contents
- flex
- grid
- inline-block
- table
- none
- initial
- inherit
も参照
https://www.w3schools.com/cssref/pr_class_display.asp2
visibility의 values
- visible
- hidden
- collapse
- initial
- inherit
も参照
https://www.w3schools.com/cssref/pr_class_visibility.asp2
overflow의 values
- visible
- hidden
- clip
- scroll
- auto
- overlay
https://developer.mozilla.org/ko/docs/Web/CSS/overflowも参照
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Reference
この問題について(CSS display:none VS overflow:hidden), 我々は、より多くの情報をここで見つけました https://velog.io/@usablepaper/displaynone-VS-overflowhiddenテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol