比較文本

尋找兩個文字檔案之間的差異

Real-time diff

Unified diff

Collapse lines

Highlight change

Syntax highlighting

工具

Comparing sensitive data, confidential files or internal emails?

Most legal and privacy policies prohibit uploading sensitive data online. Diffchecker Desktop ensures your confidential information never leaves your computer. Work offline and compare documents securely.

Download Diffchecker Desktop Learn more

2주차 과제 비교

Created 2 years agoDiff never expires

68 removals

119 lines

72 additions

127 lines

<!DOCTYPE html>

<!doctype html>

<head>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"></script>

<title>초미니홈피 - 팬명록</title>

<style>

* {

font-family: 'Noto Serif KR', serif;

font-family: 'Do Hyeon', sans-serif;

}

.mypic {

.mytitle {

width: 100%;

height: 300px;

height: 250px;

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg');

/* 배경화면 이미지 삼형제 */

background-position: center 30%;

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://image.genie.co.kr/Y/IMAGE/IMG_MUZICAT/IV2/Genie_Magazine/10378/Mgz_Sub_EVT_20210623163827.jpg);

background-size: cover;

background-position: center 40%;

color: white;

/* 상자(나) 안 내용물 가운데 정렬하기 4형제 */

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

align-items: center;

}

.mypost {

width: 95%;

box-shadow: 0px 0px 5px 0px gray;

max-width: 500px;

width: 95%;

margin: 20px auto 20px auto;

box-shadow: 0px 0px 3px 0px black;

padding: 20px;

}

.post-buttons {

.mypost > button {

margin-top: 15px;

}

.comment-cards {

.mycards {

width: 95%;

max-width: 500px;

margin: auto;

width: 95%;

margin: 10px auto;

}

.card {

.mycards > .card {

margin: 10px auto 10px auto;

margin-top: 10px;

margin-bottom: 10px;

}

</style>

$(document).ready(function(){

// 페이지 로딩이 완료되면 Ajax가 GET방식으로 서울시 현재 기온을 읽어오고 표시한다.

$(document).ready(function() {

$.ajax({

type: "GET",

url: "http://spartacodingclub.shop/sparta_api/weather/seoul",

data: {},

success: function(response){

success: function (response) {

$('#temp').text(response['temp'])

let temp = response['temp'];

$('#temperature').text(temp);

}

})

});

</script>

</head>

<body>

</div>

</div>

<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"

style="height: 100px"></textarea>

</div>

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

style="height: 100px"></textarea>

</div>

</div>

</div>

</div>

</blockquote>

</div>

</blockquote>

</div>

</div>

</blockquote>

</div>

</blockquote>

</div>

</div>

<p>날이 갈수록 귀티가 흐르는군요</p>

</blockquote>

</div>

</blockquote>

</div>

</body>

</html>

已保存差異

原始文本

Open file

<!DOCTYPE html>
<html lang="en">
<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>초미니홈피 - 팬명록</title>

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg');
            background-position: center 30%;
            background-size: cover;

color: white;

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

.mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

.mypost > button {
            margin-top: 15px;
        }

.mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

.mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $.ajax({
              type: "GET",
              url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
              data: {},
              success: function(response){
                  $('#temp').text(response['temp'])
                }
              })
        });
    </script>
</head>
<body>
    <div class="mypic">
        <h1>십센치(10cm) 팬명록</h1>
        <p>현재기온: <span id="temp">36</span>도</p>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name" placeholder="url">
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>
        <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
    </div>
    <div class="mycards" id="comment-list">
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
    </div>
</body>
</html>

更改後文本

Open file

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

/* 배경화면 이미지 삼형제 */
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://image.genie.co.kr/Y/IMAGE/IMG_MUZICAT/IV2/Genie_Magazine/10378/Mgz_Sub_EVT_20210623163827.jpg);
            background-size: cover;
            background-position: center 40%;

color: white;

/* 상자(나) 안 내용물 가운데 정렬하기 4형제 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .mypost {
            box-shadow: 0px 0px 5px 0px gray;
            max-width: 500px;
            width: 95%;

margin: 20px auto 20px auto;
            padding: 20px;
        }
        .post-buttons {
            margin-top: 15px;
        }
        .comment-cards {
            max-width: 500px;
            width: 95%;

margin: 10px auto;
        }
        .card {
            margin: 10px auto 10px auto;
        }
    </style>
    <script>
        // 페이지 로딩이 완료되면 Ajax가 GET방식으로 서울시 현재 기온을 읽어오고 표시한다.
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {

let temp = response['temp'];

$('#temperature').text(temp);
                }
            })
        });
    </script>
</head>

<body>
<div class="mytitle">
    <h3>LA POEM</h3>
    <h1>라포엠 팬명록</h1>
    <p>현재 기온: <span id="temperature">00.0</span>도</p>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
    </div>
    <div class="post-buttons">
        <button type="button" class="btn btn-dark">응원 남기기</button>
    </div>
</div>
<div class="comment-cards">
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>내가 성악을 찾아 듣게 되다니...</p>
                <footer class="blockquote-footer">책임져</footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>날이 갈수록 귀티가 흐르는군요</p>
                <footer class="blockquote-footer">오래가자🫶</footer>
            </blockquote>
        </div>
    </div>
</div>

</body>

</html>