웹UI/HTML_CSS

HTML/CSS - overflow: hidden; 으로 특정 영역만 보이게

nomfang 2021. 3. 23. 19:27
728x90
반응형

  1. 부모 자식 관계를 갖는 영역 세 그룹, 자식 노드에는 형제를 갖는 형태로 준비한다 (조부모, 부모, 자식)

  2. 자식 노드에 크기 설정, float: left;

  3. 부모 노드에 자식 노드를 전부 담는 크기 지정

  4. 조부모 노드에 자식 노드 1개를 담을 수 있는 크기와 overflow: hidden; 지정

    <html>
 <head>
     <style>

         .child {
             width: 200px;
             height: 200px;
             float: left;
             background: black;
             color: white;
         }

         .parents{
             width: 600px;
             height: 200px
         }

         .grandparents{
             width: 200px;
             height: 200px
             overflow: hidden;
         }

     </style>
 </head>
 <body>
     <div class="grandparents>

         <ul class="parents">
             <li class="child">111</li>
             <li class="child">222</li>
             <li class="child">222</li>
         </ul>
     </div>
 </body>
</html>
반응형
저작자표시 비영리 변경금지