[HTML] VS Code 자동 정렬 단축키

(Cho+Cording); 2024. 2. 21. 17:50

728x90

자동 정렬 단축키

Window : Shift + Alt + F , 소스 코드 전체 선택 (Ctrl + A) 후 Ctrl + K + F
MAC : Shift + Option + F, 소스 코드 전체 선택 (^ + A) 후 ^ + K + F
Linux : Ctrl + Shift + I

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <style>
        #banner {width: 500px; height: 200px; 
            background-color: gold;}

        #banner >.box1 {width: 100px; 
            height: 100px; background-color: pink; 
            border: 5px solid #666; margin: 20px; display: inline-block;}

        #banner >.box2 {width: 
            100px; height: 100px; background-color: tomato;
            box-sizing: border-box; border: 20px solid #666; margin: 20px; display:inline-block;}

        #banner >.box3 {width: 100px; height: 100px; background-color: tomato;
            box-sizing: content-box; 
            border: 20px solid #666; margin: 20px; display:inline-block;}

</style>
</head>
<body>
    <div id="banner">
        <div class="box1">

        </div>
        <div class="box2">

        </div>
        <div class="box3">

        </div>
    </div>
    
</body>
</html>

< 자동 정렬 전 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <style>
        #banner {
            width: 500px;
            height: 200px;
            background-color: gold;
        }

        #banner>.box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 5px solid #666;
            margin: 20px;
            display: inline-block;
        }

        #banner>.box2 {
            width: 100px;
            height: 100px;
            background-color: tomato;
            box-sizing: border-box;
            border: 20px solid #666;
            margin: 20px;
            display: inline-block;
        }

        #banner>.box3 {
            width: 100px;
            height: 100px;
            background-color: tomato;
            box-sizing: content-box;
            border: 20px solid #666;
            margin: 20px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="banner">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

</body>

</html>

< 자동 정렬 후 >