[Visual Studio Code] overflow 사용하기

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

그럼에도 불구하고

👨‍💻

[Visual Studio Code] overflow 사용하기 본문

HTML, CSS/Function implementation

[Visual Studio Code] overflow 사용하기

zenghyun 2022. 10. 29. 09:57

div와 같은 태그에

width: 200px / height: 200px과 같이 지정해놓고 안에 긴 글을 적어놓았다고 해보자.

Test

<!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>박스 모델3</title>
  
    <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	}

	body {
    	color: #333;
		}
	.clearFix::after {
    	content: '';
    	display: block;
    	clear: both;
	}
	/* float된 자식을 가진 부모한테 사용 */
        .box{ float:left;
        width: 200px; height: 200px; 
    background-color: darkcyan;
    border: 1px solid black;       
		} 
        /* table 레이아웃 > float > flex > grid + position 
            가로 나란히 배치 가로가운데 세로가운데 배치
            너비가 부족하면 아래로 떨어짐 
        */
        .box1{
            padding: 50px;
        }
        .box2{
            padding: 50px 10px;
        }
        .box3{
            padding: 50px 10px 100px;
            /* overflow 되므로 아래쪽 padding은 안보일 수 있음 */
        }
        .box4{
            padding: 50px 10px 100px 10px;
        }
    </style>
</head>
<body>
    <div class="box box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobis.</div>
    <div class="box box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobisLorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ea quos nulla impedit, necessitatibus sunt ut. In reiciendis recusandae quaerat accusantium, vero earum amet, dignissimos velit cupiditate distinctio ut dolores?</div>
    <div class="box box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobisLorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ea quos nulla impedit, necessitatibus sunt ut. In reiciendis recusandae quaerat accusantium, vero earum amet, dignissimos velit cupiditate distinctio ut dolores?</div>
    <div class="box box4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobisLorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ea quos nulla impedit, necessitatibus sunt ut. In reiciendis recusandae quaerat accusantium, vero earum amet, dignissimos velit cupiditate distinctio ut dolores?</div>
    </body>
    </html>

결과

박스 모델3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ea quos nulla impedit, necessitatibus sunt ut. In reiciendis recusandae quaerat accusantium, vero earum amet, dignissimos velit cupiditate distinctio ut dolores?

위의 결과처럼 글이 길다면, 지정한 넓이,높이를 벗어나게 된다.

이럴 경우에 overflow를 쓰면된다.

.bo1 { overflow: visible;}
/* 보이는 대로 출력*/

.box2 { overflow: hidden;}
/* 글자 수가 지정한 범위를 넘어나도 출력 */

.box3 { overflow: scroll;
/* 가로 세로 스크롤이 모두 생성*/ }

.box4 { overflow: auto; 
/* 넘치는 방향으로만 스크롤 생성 */ }

overflow 적용

<!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>박스 모델3</title>
  
    <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	}

	body {
    	color: #333;
		}
	.clearFix::after {
    	content: '';
    	display: block;
    	clear: both;
	}
	/* float된 자식을 가진 부모한테 사용 */
        .box{ float:left;
        width: 200px; height: 200px; 
    background-color: darkcyan;
    border: 1px solid black;       
		} 
        /* table 레이아웃 > float > flex > grid + position 
            가로 나란히 배치 가로가운데 세로가운데 배치
            너비가 부족하면 아래로 떨어짐 
        */
        .box1{
            padding: 50px;
            overflow: visible;
        }
        .box2{
            padding: 50px 10px;
            overflow: hidden;
        }
        .box3{
            padding: 50px 10px 100px;
            /* overflow 되므로 아래쪽 padding은 안보일 수 있음 */
            overflow: scroll;
        }
        .box4{
            padding: 50px 10px 100px 10px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobis.</div>
    <div class="box box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobisLorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ea quos nulla impedit, necessitatibus sunt ut. In reiciendis recusandae quaerat accusantium, vero earum amet, dignissimos velit cupiditate distinctio ut dolores?</div>
    <div class="box box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobisLorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ea quos nulla impedit, necessitatibus sunt ut. In reiciendis recusandae quaerat accusantium, vero earum amet, dignissimos velit cupiditate distinctio ut dolores?</div>
    <div class="box box4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobisLorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ea quos nulla impedit, necessitatibus sunt ut. In reiciendis recusandae quaerat accusantium, vero earum amet, dignissimos velit cupiditate distinctio ut dolores?</div>
    </body>
    </html>

결과

박스 모델3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobisLorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ea quos nulla impedit, necessitatibus sunt ut. In reiciendis recusandae quaerat accusantium, vero earum amet, dignissimos velit cupiditate distinctio ut dolores?

'HTML, CSS > Function implementation' 카테고리의 다른 글

[Visual Studio Code] justify-content (0)	2022.11.01
[Visual Studio Code] scroll-behavior: smooth (0)	2022.10.29
[Visual Studio Code] css 사용하기 / nth-child / nth-of-type (0)	2022.10.23
[Visual Studio Code] ol/ul/dl 태그 사용하기 (0)	2022.10.23
[Visual Studio Code]img태그 / a태그 사용하기 (0)	2022.10.23

'HTML, CSS/Function implementation' Related Articles

Comments

그럼에도 불구하고

[Visual Studio Code] overflow 사용하기 본문

[Visual Studio Code] overflow 사용하기

Test

결과

overflow 적용

결과

'HTML, CSS > Function implementation' 카테고리의 다른 글

티스토리툴바