231224(HTML 훈련3)

Feed 마크업

Untitled

commets를 누르면 없었던 아래 입력창이 나오는걸 Feed라고 한다.

Untitled

이렇게 정보의 의미를 나눌 수 있다.

마크업시 어떤 태그를 사용할지는… 웹디자이너의 역할이다. 다만 전체 문서에서 일관성을 유지하는게 중요하다.

Likes와 Comments는 겉으로보기엔 text인데 유저와 인터렉티브하게 기능을 수행하는 버튼의 일종이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feed</title>
</head>
<body>
    <a>
        <img src = "<https://user-images.githubusercontent.com/19285811/69063907-43da4800-0a58-11ea-8efb-4b57dca4e3fe.png>" alt = "">
    </a>
    <h1>
        <a href = "#">
            kimbug
        </a>
    </h1>
    <span aria-label="posted 30 minute ago">
        30min
    </span>
    <button type = "button">
        Follow
    </button>

    <p>
        The most beautiful experience we can have is the mysterious. It is the fundamental emotion that stands at the cradle of true art and true science. — Albert Einstein
    </p>
    <button type = "button"> 10 Likes </button>
    <button type = "button"> 0 Commnets </button>

    <form action="#" method="post">
        <textarea name="comments" id="" cols="30" rows="10" placeholder="write commnets"></textarea>
        <button type = "button">Submit</button>
    </form>
</body>
</html>

의미단위의 마크업을 끝냈다.

Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feed</title>
    **<link rel="stylesheet" href="styles_F.css">**
</head>
<body>
    <div class="feed">
        <div class="feed-user-profile">
            <a>
                <img src = "<https://user-images.githubusercontent.com/19285811/69063907-43da4800-0a58-11ea-8efb-4b57dca4e3fe.png>" alt = "">
            </a>
            <div>
                <h1>
                    <a href = "#">
                        kimbug
                    </a>
                </h1>
                <span aria-label="posted 30 minute ago">
                    30min
                </span>
            </div>
                <button type = "button">
                    Follow
                </button>
        </div>
        <div class="feed-content">
            <p>
                The most beautiful experience we can have is the mysterious. It is the fundamental emotion that stands at the cradle of true art and true science. — Albert Einstein
            </p>
            
        </div>
        <div class="feed-footer">
            <button type = "button"> 10 Likes </button>
            <button type = "button"> 0 Commnets </button>
        </div>
        <form action="#" method="post" class = "feed-comment">
            <textarea name="comments" id="" cols="30" rows="10" placeholder="write a commnets"></textarea>
            <button type = "button">Submit</button>
        </form>
    </div>
    **<script src="app.js"></script>**
</body>
</html>

여기에 css와 js를 연결해주면 목업과 같은 방식이 이루어진다.

Gmail Inbox

Untitled