본문 바로가기
웹UI/HTML_CSS

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

by nomfang 2021. 3. 23.
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>
반응형
저작자표시 비영리 변경금지

'웹UI > HTML_CSS' 카테고리의 다른 글

HTML/CSS - position: 속성을 사용하여 가운데 정렬  (0) 2021.03.26
HTML/CSS - html label태그  (0) 2021.03.26
HTML/CSS - display: flex; (요소를 수평 구조로 정렬)  (0) 2021.03.19
HTML/CSS - vscode 자동 저장, 실시간 링크설정(live server)  (0) 2021.03.18
HTML/CSS - 이미지 정렬, 이미지의 일부만 노출  (0) 2021.03.18

댓글

티스토리툴바