본문 바로가기
알토르

알토르 1주차 인스타

orkrro 2025. 8. 11. 22:19 
    <title>Instagram</title>
    <link rel="stylesheet" href="insta.css">
</head>
<body>
    <div id="header">
        <div id="logo">
            <img id="logo-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/1024px-Instagram_logo.svg.png" alt="Instagram Logo">
        </div>
        <div id="search">
            <input id="input" type="text" placeholder="Search">
        </div>
        <ul id="icon">
            <li><a href="#"><img src="#"> A </a></li>
            <li><a href="#"><img src="#"> B </a></li>
            <li><a href="#"><img src="#"> C </a></li>
        </ul>
    </div>
    <div id="content">
        <div id="post">
            <div id="post-header">
                <img id="post-img" src="https://cdn3.pixelcut.app/7/18/profile_photo_maker_hero_100866f715.jpg" alt="Instagram Post Logo">
                <span id="username">Username</span>
            </div>
            <div id="post-main">
                <img id="mainimg" src="https://media.istockphoto.com/id/453185629/vector/black-crow.jpg?s=612x612&w=0&k=20&c=8u5YUMBtoN1NUYUKRsr6AyxX3TtEiVFFFb3n9UE2SkU=" alt="Post Image">

            </div>
            <div id="post-footer">
                <ul id="icons">
                    <li><a href="#" onclick="like();"><img src="https://www.iconpacks.net/icons/2/free-heart-icon-3510-thumb.png" alt="Like Icon"></a></li>
                    <li><a href="#"><img src="" alt="Comment Icon"></a></li>
                    <li><a href="#"><img src="" alt="Share Icon"></a></li>
                </ul>
                <p id="likescount">
                    <span id="likes">0</span>0명이 좋아합니다.
                </p>
            </div>
        </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>Instagram</title>
    <link rel="stylesheet" href="insta.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css">
</head>
<body>
    <div id="header">
        <div id="logo">
            <img id="logo-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/1024px-Instagram_logo.svg.png" alt="Instagram Logo">
        </div>
        <div id="search">
            <input id="input" type="text" placeholder="Search">
        </div>
        <ul id="nav-icons">
            <li><a href="#"><i class="fas fa-house"></i></a></li>
            <li><a href="#"><i class="fas fa-comment-dots"></i></a></li>
            <li><a href="#"><i class="fas fa-house"></i></a></li>
        </ul>
    </div>
    <div id="content">
        <div id="post">
            <div id="post-header">
                <img id="post-img" src="https://cdn3.pixelcut.app/7/18/profile_photo_maker_hero_100866f715.jpg" alt="Instagram Post Logo">
                <span id="username">Username</span>
            </div>
            <div id="post-main">
                <img id="mainimg" src="https://media.istockphoto.com/id/453185629/vector/black-crow.jpg?s=612x612&w=0&k=20&c=8u5YUMBtoN1NUYUKRsr6AyxX3TtEiVFFFb3n9UE2SkU=" alt="Post Image">
            </div>
            <div id="post-footer">
                <ul id="icons">
                    <li><a href = "#" onclick="like(1);" id="likes"><i class="fas fa-heart"></i></a></li>
                    <li><a href = "#" onclick="comment(1)"><i class="fas fa-comment"></i></i></a></li>
                    <li><a href = "#" onclick="share(1)"><i class="fas fa-share"></i></a></li>
                </ul>
                <p id="likescount">
                    <span id="counts1">0</span>명이 좋아합니다.
                </p>
            </div>
        </div>
        <div id="content">
        <div id="post">
            <div id="post-header">
                <img id="post-img" src="https://cdn3.pixelcut.app/7/18/profile_photo_maker_hero_100866f715.jpg" alt="Instagram Post Logo">
                <span id="username">Username</span>
            </div>
            <div id="post-main">
                <img id="mainimg" src="https://cdn.shopify.com/s/files/1/0595/4361/7588/files/1._maahismaaria_artwork_of_a_blue_and_white_dragon_bearing_its_fangs_using_Mont_Marte_fineliner_brushes.jpg?v=1712536244" alt="Post Image">
            </div>
            <div id="post-footer">
                <ul id="icons">
                    <li><a href = "#" onclick="like(2);" id="likes"><i class="fas fa-heart"></i></a></li>
                    <li><a href = "#" onclick="comment(2)"><i class="fas fa-comment"></i></i></a></li>
                    <li><a href = "#" onclick="share(2)"><i class="fas fa-share"></i></a></li>
                </ul>
                <p id="likescount">
                    <span id="counts2">33</span>명이 좋아합니다.
                </p>
            </div>
        </div>
    </div>

</body>
</html>

<script>
    function like(id){
        let CountElement = document.querySelector("#counts"+id);
        console.log(CountElement);
        let likeIcon = document.querySelector("#likes"+id);
        CountElement.innerText = parseInt(CountElement.innerText) + 1;
        likeIcon.style.color = "red";
    }
    function comment(){
        alert("댓글 기능은 아직 구현되지 않았습니다.");
    }
    function share(){
        alert("공유 기능은 아직 구현되지 않았습니다.");
    }
</script>

 

 

 

 

 

 

<script>
    function like(id){
        let CountElement = document.querySelector("#counts"+id);
        let likeIcon = document.querySelector("#likes"+id);
        if (likeIcon.style.color === "red") {
            // 이미 빨간색일 경우 (좋아요를 누른 상태)
            likeIcon.style.color = "black"; // 원래 색상으로 되돌립니다.
            CountElement.innerText = parseInt(CountElement.innerText) - 1;
        } else {
            // 빨간색이 아닐 경우 (좋아요를 누르지 않은 상태)
            likeIcon.style.color = "red"; // 빨간색으로 변경합니다.
            CountElement.innerText = parseInt(CountElement.innerText) + 1;
        }

        console.log("Likes Count:", CountElement.innerText);
    }
    function comment(){
        alert("댓글 기능은 아직 구현되지 않았습니다.");
    }
    function share(){
        alert("공유 기능은 아직 구현되지 않았습니다.");
    }
</script>

 

 

 

 

 

 

a href="#" -> 커서 생김 -> 클릭 시 페이지 위로 이동

console.log 까지 확인 가능

 

 

 

if (likeIcon.style.color === "black" || likeIcon.style.color === "") {  //// Black인지 빈값인지 확인
	likeIcon.style.color == "red";
}	else if (likeIcon === "red") {
		likeIcon.style.color === "black";
}

 

 

 

 

 

 

 

CSS - 업데이트 예정

 

 

 

 

body {
    margin: 0;
    padding: 0;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid  rgb(219,219,219);
    border-bottom: 1px solid rgb(219,219,219);
    padding: 0 20px;
    height: 60px;
}

#logo {
    width: 40px;
    height: 20px;
}

#logo-image{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 30px;
    margin: 0;
}

#search {
    display: flex;
    align-items: center;
}

#input {
    width: 200px;
    height: 20px;
    background-color: rgb(250,250,250);
    border-radius: 5px;
    border: 1px solid rgb(219,219,219);
    margin: 20px;
}

#nav-icons{
    display: flex; 
    list-style: none;
    text-decoration: none;
}

#nav-icons li a {
    padding: 5px;
    margin: 0 5px;
}

#nav-icons li a{
    text-decoration: none;
    color: white;
}

#content {
    width: 100%;
}

#post {
    width: 600px;
    border: 1px solid black;
    margin: 20px auto;
    }

#post-header {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgb(219,219,219);
}

#post-img {
    margin: 5px;
    width: 30px;
    height: 30px;
    border-radius: 40%;
}

#username {
    margin-left: 10px;
    font-weight: bold;
}

#mainimg {
    width: 100%;
    height: auto;
    display: block;
}

#post-footer {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#icons {
    display: flex;
    align-items: center;
    list-style: none;
    text-decoration: none;
    padding: 0;
}

#icons li a{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    text-decoration: none;
    color: rgb(219,219,219)
}
저작자표시 비영리 변경금지 (새창열림)

'알토르' 카테고리의 다른 글

알토리 1주차 Typing game -2  (0) 2025.08.12
알토르 1주차 - Typing game  (1) 2025.08.12
알토리 0주차 JavaScript  (2) 2025.08.11
알토르 0 주차 CSS  (2) 2025.08.10
CSS selector 게임으로 배워보자 CSS Diner (1 - 19)  (1) 2025.08.08

'알토르' Related Articles

티스토리툴바