🌟 CSS (overflow:hidden VS display:none)

overflow:hidden VS display:none

css의 콘텐츠 영역을 숨기기 위한 방법
1. overflow: hidden
2. display: none
3. visibility: hidden

기본적인 동작

</p> <h3>1. overflow: hidden</h3> <p>콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냄. 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리.<br/> visibility: hidden 은 차지하던 공간은 그대로 유지되고 컨텐츠만 숨겨진다고 알고있으면 된다 ! (화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게하는display:none 과 UI적으로 볼 때 완전히 다르다 )</p> <p><iframe class="embed" scrolling="no" src="https://codepen.io/seokahi/embed/popKKNj?default-tab=html%2Cresult" allowfullscreen=""/></p> <h3>2. display : none</h3> <p>화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 함.차지하던 공간 삭제<br/> <img src="https://s1.md5.ltd/image/5e147db0423e3c6a613aa85ed5ff355a.png"/></p> <h3>3. visibility: hidden</h3> <p>해당 요소가 보이지 않을 뿐 화면 상 어떤 영역을 차지하고 있음.<br/> <img src="https://s1.md5.ltd/image/08fdcd62d051e6868e101e431e940f0c.png"/></p> <h3>overflow:hidden VS display:none</h3> <p>display: none, visibility: hidden (국내 스크린 리더는 읽을 수 있지만 해외 스크린 리더는 읽을 수 없음)은 스크린 리더로 읽을 수 없기 때문에 접근성 좋지 ❌<br/> overflow:hidden은 스크린 리더가 읽을 수 있기 때문에 display: none, visibility: hidden 보다 접근성 👍</p> <p>✅ <strong>NAVER</strong></p> <img src="https://s1.md5.ltd/image/0dcf3f2a05118ed7cad519213c36d2dc.png"/> <img src="https://s1.md5.ltd/image/a48ae5f1385b34fced572f3fc29475c1.png"/> <img src="https://s1.md5.ltd/image/de09f45519af20a5b03365b17c211058.png"/> <p><code>position: Absolute</code> 란 ?<br/> 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치</p> <p>위치를 상대적으로 배치하고 overflow: hidden으로 숨김.</p> <p>✅ <strong>Daum</strong><br/> <img src="https://s1.md5.ltd/image/5f7dea5c4e0d5271fd6e5257b3727d6e.png"/></p> <img src="https://s1.md5.ltd/image/276f5b03b81f0d42f9a7dd82691b7657.png"/> <img src="https://s1.md5.ltd/image/476975483107a90327ffa326b627d33e.png"/> Daum도 마찬가지로 위치를 상대적으로 배치하고 overflow: hidden으로 숨김. <h3>✅추가</h3> <p>IR(image replacement)기법은 웹접근성을 준수하기 위한 방법 중 하나로서, 이미지를 볼 수 없는 사용자에게 대체 텍스트를 제공하는 방법이다. 보통 이를 위해 img태그의 alt 속성에 이미지에 대한 대체 텍스트를 입력한다. <code>overflow:hidden</code>가 가장 적절한 방법인 것 같다. </p> <h4>🧡 naver 스타일</h4> <pre><code class="language-css"><span class="token selector">.blind</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>0 0 0 0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> -1px<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre> <h4>🧡 daum 스타일</h4> <pre><code class="language-css"><span class="token selector">.screen_out</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">text-indent</span><span class="token punctuation">:</span> -9999px<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre> <div class=""> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1344493394064923" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1344493394064923" data-ad-slot="9316917350" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="source-div mt-6 "> <div class=""> <div class="alert alert-light col-12 " role="alert" style="background-color:#f2f2f2; line-height: 2.2;"> <h5 class="text-dark">Author And Source</h5> 이 문제에 관하여(🌟 CSS (overflow:hidden VS display:none)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다<a href="https://velog.io/@skh9797/CSS-overflowhidden-VS-displaynone" rel="noreferrer noopener nofollow" class=" h5 text-warning mb-3"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"> <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"></path> <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"></path> </svg> https://velog.io/@skh9797/CSS-overflowhidden-VS-displaynone</a> <hr class="my-2"> <p class="m-0 p-0 small " style="font-size: 12px;line-height: 1.5;"> 저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.</p> <p class="mt-1 mb-0 p-0"> <img alt="img" class=" p-0 m-0" src="/static/v3_theme_01_asset/img/intrepidgeeks_logo.svg" id="navbar-logo-b" style="max-width:60px;"> <span class="m-0 p-0 small" style="line-height: 1.5;">우수한 개발자 콘텐츠 발견에 전념</span> (<small class="text-muted">Collection and Share based on the CC Protocol.</small>) </p> </div> </div> </div> </div> <div class="row mb-4"> <div class="col-6 text-primary text-capitalize "> <a class=" btn bg-primary-soft small float-left text-capitalize " href="/tutorial/chapter-11-cio-system-theoretical-problem-solving"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"> <line x1="19" y1="12" x2="5" y2="12"></line> <polyline points="12 19 5 12 12 5"></polyline> </svg> 11장 C++ 입출력 시스템 (이론 문제 풀이)</a> </div> <div class="col-6 text-primary text-capitalize "> <a class=" btn bg-primary-soft small float-right text-capitalize " href="/tutorial/implement-spring-login-function">[Spring] 로그인 기능구현 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </a> </div></div> <div class="row mb-4"> <div class="col-xl-12 col-12"> <div class="container-fluid"> <h4 class="card-title ">좋은 웹페이지 즐겨찾기</h4>  <div class="card card-custom card-stretch gutter-b ai-recommended-bg-03 shadow-sm">  <div class="card-body d-flex align-items-center py-0 mt-2 "> <div class="d-flex flex-column flex-grow-1 py-2 py-lg-5"> <p class="mb-2 text-muted">개발자 우수 사이트 수집</p> <a href="/" target="_blank" class="card-title font-weight-bolder text-primary font-size-h3 mb-2 text-hover-primary "> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"> <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"></path> <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"></path> </svg> 개발자가 알아야 할 필수 사이트 100선 추천</a> <span class="font-weight-bold text-muted font-size-lg">우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다</span> </div> <img src="/static/v3_theme_01_asset/img/website-nav-pages-img3.svg" alt="best100-homepage" class="align-self-end h-20px img-responsive border-small " style="width:36%;"> </div>  </div>  </div> </div> </div> <div class="row mb-4"> <aside class="col-md-12 col-xxl-12 d-none d-md-block float-right pt-3 m-2 "> <div class="row"><h4 class="card-title ">관련 게시물</h4><div class="col-6 mb-2 pb-3"> <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3" style="border-color: #f2f2f2!important;"> <div class="card-body text-center">  <a data-scroll class="nav-link text-primary small" href="/tutorial/vue3-challenge-form-editor"> <h4 class="fw-bold"> Vue3 챌린지: 양식 편집기 </h4> <p class="text-muted">개발자로서 스키마에 정의된 양식을 생성하고 개체를 편집할 수 있는 구성 요소XForm가 필요합니다. v-model에서 개체를 허용합니다 fields 속성 에서 개체 배열을 허용합니다. <form> 배열 의 길이와 같은 양의 자식 요소로 렌더링fields 필드의 각field은 하위 에 대한 구성을 설명합니다. field.component는 렌더링해야 하는 구성 요소(또는 태그)의 이름을 가져옵...</p> </a> </div> </div> </div><div class="col-6 mb-2 pb-3"> <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3" style="border-color: #f2f2f2!important;"> <div class="card-body text-center">  <a data-scroll class="nav-link text-primary small" href="/tutorial/mongodb-no-banco-nosql-is-no-longer-available"> <h4 class="fw-bold"> MongoDB - No Banco NoSQL은 더 이상 사용할 수 없습니다. </h4> <p class="text-muted">De la pra cá, este banco de dados tem crescido em utilização e em popularidade. 그렇다면 SQL Server, Oracle 또는 MySQL과 다른 점은 무엇입니까? O MongoDB é um banco de dado que não armazena os dados em um formato tabelar e relacional. Os...</p> </a> </div> </div> </div><div class="col-6 mb-2 pb-3"> <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3" style="border-color: #f2f2f2!important;"> <div class="card-body text-center">  <a data-scroll class="nav-link text-primary small" href="/tutorial/how-to-use-relative-selectors-in-shirates-part-2"> <h4 class="fw-bold"> Shirates에서 상대 선택기를 사용하는 방법 - 2부 - </h4> <p class="text-muted">이것은 간단하고 강력한 표현입니다(참조). 위젯 흐름과 함께 상대적으로 위젯을 얻을 수 있습니다. 위젯 흐름 알고리즘 위젯 흐름 알고리즘은 수직 위치(첫 번째 그룹 - 여섯 번째 그룹)로 위젯을 그룹화한 다음 각 그룹의 위젯을 왼쪽에서 오른쪽으로, 그리고 위에서 아래로 검색합니다. 첫 번째 그룹에서 위젯 흐름 순서는 (0),(1),(2)입니다. 두 번째 그룹에서 위젯 흐름 순서는 (3),(4...</p> </a> </div> </div> </div><div class="col-6 mb-2 pb-3"> <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3" style="border-color: #f2f2f2!important;"> <div class="card-body text-center">  <a data-scroll class="nav-link text-primary small" href="/tutorial/stop-saving-lines"> <h4 class="fw-bold"> 라인 저장을 중지하십시오! </h4> <p class="text-muted">이 기사에서는 소프트웨어를 개발할 때 더 많은 코드를 작성해야 하는 이유에 대해 논할 것입니다. 책임별로 코드를 나누면 명확성이 향상되고 프로젝트 유지 관리가 더 쉬워집니다. 그건 그렇고, 여기서 목표는 코드를 더 길게 하기 위해 줄을 추가하는 것이 아니라 가독성을 우선시하는 것입니다. 많은 언어, 특히 JavaScript는 멋진 기능을 많이 제공하므로 더 적거나 더 명확한 코드로 동일한 알...</p> </a> </div> </div> </div><div class="col-6 mb-2 pb-3"> <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3" style="border-color: #f2f2f2!important;"> <div class="card-body text-center">  <a data-scroll class="nav-link text-primary small" href="/tutorial/rpm-system-system-nfs-sunucusu-oluturma"> <h4 class="fw-bold"> RPM 시스템 시스템 NFS Sunucusu Oluşturma </h4> <p class="text-muted">NFS는 Network File System, dosyalarımızı ağ üzerinden paylaşmamıza olanak sağlayan bir sistemdir. NFS kullanarak sunucu olan bilgisayarda paylaşılan dizinleri client olan bilgisayarlara mount edebiliriz. Mount işlemini ge...</p> </a> </div> </div> </div><div class="col-6 mb-2 pb-3"> <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3" style="border-color: #f2f2f2!important;"> <div class="card-body text-center">  <a data-scroll class="nav-link text-primary small" href="/tutorial/azure-ad-client-password-expiration"> <h4 class="fw-bold"> Azure AD 클라이언트 암호 만료 </h4> <p class="text-muted">Azure AD에서 새 클라이언트 암호를 생성하고 이를 사용하도록 웹 사이트 구성을 업데이트합니다. 문제는 이 문제가 비밀에 설정한 만료 날짜에 따라 3, 6, 12, 18 또는 24개월 후에 다시 발생한다는 것입니다. Twitter의 제안은 Logic Apps 및 Event Grid가 이 문제를 해결하는 데 도움이 될 수 있다는 것입니다. 그러나 먼저 다음 30일 내에 만료될 모든 비밀을 ...</p> </a> </div> </div> </div><div class="col-6 mb-2 pb-3"> <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3" style="border-color: #f2f2f2!important;"> <div class="card-body text-center">  <a data-scroll class="nav-link text-primary small" href="/tutorial/do-you-need-autoscaler-de-drone-ci-integration"> <h4 class="fw-bold"> ¿Autoscaler de Drone CI 통합이 필요합니까? </h4> <p class="text-muted">En este pequeño 블로그 vamos a tocar un tema muy Importante, instalar el drone CI y su autoscaler, una de las razones por las cuales me vi en la necesidad de integrarlo es debido a que nosotros usamos el drone-sever en una ...</p> </a> </div> </div> </div><div class="col-6 mb-2 pb-3"> <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3" style="border-color: #f2f2f2!important;"> <div class="card-body text-center">  <a data-scroll class="nav-link text-primary small" href="/tutorial/responsive-card-using-flex-and-grid"> <h4 class="fw-bold"> 플렉스와 그리드를 이용한 반응형 카드 </h4> <p class="text-muted">몸을 풀다 그리드...</p> </a> </div> </div> </div></div></aside> </div> </article> <div class="col-0 col-xs-0 col-sm-0 col-md-3 col-lg-3 col-xl-3 col-xxl-3 m-0 p-0 "> <div class="navbar-expand-lg navbar-expand-lg sidebar sidebar-sticky " style="border-right: 1px solid rgba(0, 0, 0, .05);">  <div id="navbarVerticalNavMenu2 " class=" collapse navbar-collapse pt-3 card m-0 p-0 d-flex flex-row" style="margin: 0px!important;border-bottom: 0px solid rgba(0, 0, 0, .05);height: 100%;"> <div class=" h-100 pt-0 " style="margin: 0px!important;border-bottom: 0px solid rgba(0, 0, 0, .05);height: 100%; max-width: 260px;"> <div class="row bg-light-off mb-2 ai-recommended-bg-02-off " style="border-radius: 2px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1344493394064923" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-1344493394064923" data-ad-slot="7275371082"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row bg-light-off mb-2 ai-recommended-bg-02-off " style="border-radius: 2px;"> </div> </div> </div>  </div> </div> </div> </div> <footer class="bg-primary-soft p-3 mt-5"> <div class="container"> <div class="row gutter-3"> <div class="col-12 col-md-12 text-white text-center text-lowercase"> <p class="mb-0 text-muted small text-uppercase">© 2022 intrepidgeeks.com </p> <a href="/privacy" target="_blank" class="text-muted" rel="nofollow">Privacy Policy</a> <a href="/contact_us" target="_blank" class="text-muted" rel="nofollow">Contact US</a> <a href="/sitemap.xml" class="text-muted" target="_blank" rel="nofollow">Sitemap</a> </div> </div> </div> </footer>   <div class="nk-cookie-banner alert alert-secondary text-center mb-0 small" role="alert" style="background: rgba(255, 255, 255, .6);border-color:#f2f2f2;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(20px);"> 🍪 This website uses cookies to ensure you get the best experience on our website. <a href="/privacy" target="blank" rel="nofollow">Learn more</a> <button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieBanner()"> I Got It </button> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script> <script src="/static/v3_theme_01_asset/js/quick-website.min.js"></script> <script src="/static/all_theme_package/cookie-banner.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script> <script> function addDarkmodeWidget() { const options = { bottom: '64px', // default: '32px' right: '36px', // default: '32px' left: 'unset', // default: 'unset' time: '0.4s', // default: '0.3s' mixColor: '#fff', // default: '#fff' backgroundColor: '#fff', // default: '#fff' buttonColorDark: '#666666', // default: '#100f2c' buttonColorLight: '#fff', // default: '#fff' saveInCookies: true, // default: true, label: '🌙', // default: '' autoMatchOsTheme: false // default: true } new Darkmode(options).showWidget(); } window.addEventListener('load', addDarkmodeWidget); </script> <script async > var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?62e51dcb98a631eb7af0fd338250ca43"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/static/all_theme_package/auto-enable-prism.js"></script> <script src="/static/all_theme_package/prism.min.js"></script> <script> $(document).ready(function () { $('#post-content h1').each(function (i, el) { var c = $(el).attr("class"); $(el).replaceWith('<h2 class="' + c + '">' + $(el).html() + '</h2>') }); }); h2_length = $("#post-content h2").length // console.log(h2_length); h3_length = $("#post-content h3").length // console.log(h3_length); $(document).ready(function () { if (h2_length < 1 && h3_length > 0) { $('#post-content h3').each(function (i, el) { var c = $(el).attr("class"); $(el).replaceWith('<h2 class="' + c + '">' + $(el).html() + '</h2>') }); } ; }); </script> <script src="/static/all_theme_package/thirdparty/blogmenu/jquery.autoMenu.js"></script> <script> $(document).ready(function () { $("#blog-autoMenu").autoMenu({ levelOne: 'h2', //一级标题 levelTwo: 'h3', //二级标题（暂不支持更多级） width: 160, //容器宽度 height: '100%', //容器高度 padding: 10, //内部间距 offTop: 130, //滚动切换导航时离顶部的距离 }); h1_length = $("#post-content h1").length // console.log(h1_length); h2_length = $("#post-content h2").length // console.log(h2_length); h3_length = $("#post-content h3").length // console.log(h3_length); if (h2_length < 1) { $(".blog-auto-menu-div").remove(); } else { $(".blog-auto-menu-div-title").show(); } }); </script> <script src="/static/v3_theme_01_asset/js/headBand.min.js"></script> <script> $('#geek-nav').headBand({ 'background': '#222222',//设置背景色 'height': "2" //设置进度条高度 }); </script></body> </html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="c099ef4af3df7da76e4772a2-|49" defer></script>