코드 스니펫을 붙여놓고 줄 맞추기(command + opt + L)을 하면

자꾸 아래 같이 깨지는 현상이 발생합니다

문제는 이런식으로 깨져버리면 빨간색 줄들이 쳐지면서 빌드도 제대로 안되요....

코드가 적은 애들은 수작업으로 고쳤는데 이렇게 많은 줄이 깨져버리면 어떻게 해야 할지 모르겠어요

왜그러는 걸까요.. 혹시 필요한 패키지가 있을까요??

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

< head >
< meta
charset = "utf-8" >
< meta
name = "viewport"
content = "width=device-width, initial-scale=1, shrink-to-fit=no" >

< link
href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > < / script >
< script
src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" > < / script >

< title > 스파르타
피디아 < / title >

< link
href = "https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap"
rel = "stylesheet" >

< style >
*{
    font - family: 'Gowun Dodum', sans - serif;
}

.mytitle
{
    width: 100 %;
height: 250
px;

background - image: linear - gradient(0
deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(
    'https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background - position: center;
background - size: cover;

color: white;

display: flex;
flex - direction: column;
align - items: center;
justify - content: center;
}

.mytitle > button
{
    width: 200px;
height: 50
px;

background - color: transparent;
color: white;

border - radius: 50
px;
border: 1
px
solid
white;

margin - top: 10
px;
}

.mytitle > button: hover
{
    border: 2px solid white;
}

.mycomment
{
    color: gray;
}

.mycards
{
    margin: 20px auto 0px auto;
width: 95 %;
max - width: 1200
px;
}

.mypost
{
    width: 95 %;
max - width: 500
px;
margin: 20
px
auto
0
px
auto;
padding: 20
px;
box - shadow: 0
px
0
px
3
px
0
px
gray;

display: none;
}

.mybtns
{
    display: flex;
flex - direction: row;
align - items: center;
justify - content: center;

margin - top: 20
px;
}
.mybtns > button
{
    margin - right: 10px;
}
< / style >
< script >
$(document).ready(function()
{
    listing();
});

function
listing()
{
$.ajax({
    type: 'GET',
    url: '/movie',
    data: {},
    success: function(response) {
        alert(response['msg'])
    }
})
}

function
posting()
{
$.ajax({
    type: 'POST',
    url: '/movie',
    data: {sample_give: '데이터전송'},
    success: function(response) {
        alert(response['msg'])
    }
});
}

function
open_box()
{
$('#post-box').show()
}
function
close_box()
{
$('#post-box').hide()
}
< / script >
< / head >

< body >
< div


class ="mytitle" >

< h1 > 내
생애
최고의
영화들 < / h1 >
< button
onclick = "open_box()" > 영화
기록하기 < / button >
< / div >
< div


class ="mypost" id="post-box" >

< div


class ="form-floating mb-3" >

< input
id = "url"
type = "email"


class ="form-control" placeholder="name@example.com" >

< label > 영화URL < / label >
< / div >
< div


class ="input-group mb-3" >

< label


class ="input-group-text" for ="inputGroupSelect01" > 별점 < / label >

< select


class ="form-select" id="star" >

< option
selected > -- 선택하기 - - < / option >
< option
value = "1" >⭐ < / option >
< option
value = "2" >⭐⭐ < / option >
< option
value = "3" >⭐⭐⭐ < / option >
< option
value = "4" >⭐⭐⭐⭐ < / option >
< option
value = "5" >⭐⭐⭐⭐⭐ < / option >
< / select >
< / div >
< div


class ="form-floating" >

< textarea
id = "comment"


class ="form-control" placeholder="Leave a comment here" > < / textarea >

< label
for ="floatingTextarea2" > 코멘트 < / label >
< / div >
< div


class ="mybtns" >

< button
onclick = "posting()"
type = "button"


class ="btn btn-dark" > 기록하기 < / button >

< button
onclick = "close_box()"
type = "button"


class ="btn btn-outline-dark" > 닫기 < / button >

< / div >
< / div >
< div


class ="mycards" >

< div


class ="row row-cols-1 row-cols-md-4 g-4" id="cards-box" >

< div


class ="col" >

< div


class ="card h-100" >

< img
src = "https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"


class ="card-img-top" >

< div


class ="card-body" >

< h5


class ="card-title" > 영화 제목이 들어갑니다 < / h5 >

< p


class ="card-text" > 여기에 영화에 대한 설명이 들어갑니다.< / p >

< p >⭐⭐⭐ < / p >
< p


class ="mycomment" > 나의 한줄 평을 씁니다 < / p >

< / div >
< / div >
< / div >
< div


class ="col" >

< div


class ="card h-100" >

< img
src = "https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"


class ="card-img-top" >

< div


class ="card-body" >

< h5


class ="card-title" > 영화 제목이 들어갑니다 < / h5 >

< p


class ="card-text" > 여기에 영화에 대한 설명이 들어갑니다.< / p >

< p >⭐⭐⭐ < / p >
< p


class ="mycomment" > 나의 한줄 평을 씁니다 < / p >

< / div >
< / div >
< / div >
< div


class ="col" >

< div


class ="card h-100" >

< img
src = "https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"


class ="card-img-top" >

< div


class ="card-body" >

< h5


class ="card-title" > 영화 제목이 들어갑니다 < / h5 >

< p


class ="card-text" > 여기에 영화에 대한 설명이 들어갑니다.< / p >

< p >⭐⭐⭐ < / p >
< p


class ="mycomment" > 나의 한줄 평을 씁니다 < / p >

< / div >
< / div >
< / div >
< div


class ="col" >

< div


class ="card h-100" >

< img
src = "https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"


class ="card-img-top" >

< div


class ="card-body" >

< h5


class ="card-title" > 영화 제목이 들어갑니다 < / h5 >

< p


class ="card-text" > 여기에 영화에 대한 설명이 들어갑니다.< / p >

< p >⭐⭐⭐ < / p >
< p


class ="mycomment" > 나의 한줄 평을 씁니다 < / p >

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

< / html >