크기 조정은 알려진 CSS 속성이 아닙니까?-CSS 튜토리얼-php.cn

크기 조정은 알려진 CSS 속성이 아닙니까?

青灯夜游

풀어 주다： 2020-11-24 14:08:42

원래의

2198명이 탐색했습니다.

resize는 알려진 CSS 속성입니다. resize는 사용자가 요소의 크기를 조정할지 여부를 지정하는 데 사용되는 CSS3의 새로운 속성입니다. resize 속성을 사용하면 사용자가 드래그하여 요소의 크기를 자유롭게 조정할 수 있습니다.

크기 조정은 알려진 CSS 속성이 아닙니까?

이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

관련 권장사항: "CSS3 비디오 튜토리얼"

css resize attribute

resize 속성은 사용자가 요소의 크기를 조정할지 여부를 지정할 수 있습니다.

resize는 CSS3의 새로운 속성으로, 사용자 경험을 향상시키기 위해 드래그하여 요소의 크기를 자유롭게 조정할 수 있습니다. 과거에는 Javascript로 수많은 스크립트를 작성해야만 이를 달성할 수 있었는데, 이는 시간이 많이 걸리고 노동 집약적이며 비효율적이었습니다.

resize 속성을 사용하면 사용자 요구와 방향에 따라 요소의 크기를 조정할 수 있습니다. resize 속성은 4개의 값을 가질 수 있습니다.

구문:

    Element{
        Resize : none|both|vertical|horizontal;
    }

로그인 후 복사

각 속성을 살펴보겠습니다...

1) resize : none

사용자가 요소의 크기를 조정하고 싶지 않은 경우 , none 값은 크기 조정 속성 에 적용됩니다. 또한 기본값입니다.

구문:

    Element{
        resize:none;
    }

로그인 후 복사

예:

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: none;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <p>
        <p>None value doesn’t allow resizing of this p element.</p>
    </p>
</body>

</html>

로그인 후 복사

Output

CSS | resize Property | Example 1

위 예에서는 p 요소의 크기를 조정할 수 없습니다. 정적입니다.

2) resize : 둘 다

사용자가 요소의 너비와 높이 양쪽을

크기 조정하기를 원하는 경우 두 값 모두 resize 속성에 적용됩니다.

구문:

    Element{
        resize:both;
    }

로그인 후 복사

예:

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: both;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <p>
        <p>click and drag the bottom right corner to resize the height and width of this p element.</p>
    </p>
</body>

</html>

로그인 후 복사

Output

CSS | resize Property | Example 2

위 예에서 크기를 조정하려면 이 p 요소의 오른쪽 하단 모서리를 클릭하고 드래그합니다.

3) resize : 수직

사용자가 필요에 따라 요소의 높이를 조정하고 싶을 때

resize 속성에 수직 값을 적용하세요.

구문:

    Element{
        resize:vertical;
    }

로그인 후 복사

예:

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: vertical;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <p>
        <p>click and drag the bottom right corner to resize the height of this p element.</p>
    </p>
</body>

</html>

로그인 후 복사

Output

CSS | resize Property | Example 3

위 예에서 사용자는 이 p 요소의 오른쪽 하단 모서리를 클릭하고 끌어 높이를 조정할 수 있습니다.

4) resize : 수평

사용자가 필요에 따라 요소의 너비

size 크기를 조정하려는 경우 resize 속성에 가로 값을 적용합니다.

구문:

    Element{
        resize:horizontal;
    }

로그인 후 복사

예:

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: horizontal;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <p>
        <p>click and drag the bottom right corner to resize the width of this p element.</p>
    </p>
</body>

</html>

로그인 후 복사

Output

CSS | resize Property | Example 4