html/css 만들고 싶은 페이지 구현

이나래·2023년 1월 8일
htmlcss
0

pigma로 마크업 한 페이지

내가 구현한 페이지

  • html
<!DOCTYPE html>
<html>
  <head>
    <title>내가 만들고 싶은 페이지</title>
    <link href="style.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/9f371be941.js" crossorigin="anonymous"></script>
  </head>
    <body>
        <header>
            <div class="tab">
                <a href="#">이웃블로그</a> <span> | </span>
                <a href="#">블로그 홈</a> <span> | </span>
                <a href="#">내 메뉴</a> <span> | </span>
                <a href="#">이나래</a>
            </div>
        </header>

        <div class="main">
            <div class="title">
                <p>;</p>
            </div>
            <div class="bar">
                <div class="b1">
                    <a href="#">프롤로그</a> <span> | </span>
                    <a href="#">블로그</a>
                </div>
                <div class="b2">
                    <a href="#">지도</a> <span> | </span>
                    <a href="#">서재</a> <span> | </span>
                    <a href="#">안부</a>
                </div>
            </div>    
            <div class="bar1">
                <div class="b3">
                    <a href="#">전체보기</a> <span> 1개의 글</span>
                </div>
                <div class="b4">
                    <a href="#">목록열기</a>
                </div>
            </div>
            <div class="view">
                <p>일상</p>
                <h4>안녕하세요</h4>
            </div>

            <div class="profile">
                <div class="pro">
                    <img src="img/pro.png">
                <div class="info">
                    <sqan class="name">나래</sqan>
                    <sqan class="subscribers">2022. 12. 23. 11:00  비공개</sqan>
                </div>
                </div>
                <div class="pro1">
                    <sqan class="sub">URL 복사</sqan>
                </div>
            </div>
            <hr />
        </div>
    </body>
</html>
  • css
header {
    background-color: black;
    color: white;
    font-size: small;
}

.tab {
    margin-left: 1000px;
}

a {
    text-decoration-line: none;
}

header a {
    color: white;
}

a:hover {
    text-decoration-line: underline;
}

.title {
    display: flex;
    justify-content: flex-end;
    padding: 100px;
    font-size: 7mm;
    font-weight: bold;
}

.bar {
    display: flex;
    justify-content: space-between;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 2%;
    font-size: small;
    color: rgb(141, 141, 141);
}

.bar .b1 a{
    color: rgb(141, 141, 141);
}

.bar .b1 a:hover {
    color: black;
}

.bar .b2 a{
    color: rgb(141, 141, 141);
}

.bar1 {
    display: flex;
    justify-content: space-between;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 4%;
    font-size: small;
    color: rgb(141, 141, 141);
}

.bar1 .b3 a {
    color: black;
}

.bar1 .b4 a{
    color: rgb(141, 141, 141);
}

.view {
    text-align: center;
    margin-bottom: 6%;
}

.view p {
    color: rgb(141, 141, 141);
}

.profile {
    display: flex;
    justify-content: space-between;
    margin-left: 5%;
    margin-right: 5%;
    font-size: smaller;
    margin-bottom: 10px;
}

.profile .pro{
    display: flex;
    align-items: center;
}

.profile .pro .name {
    color: black;
    margin-right: 7px;
}

.profile img {
    display: flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
}

.subscribers {
    color: rgb(141, 141, 141);
}

.pro1 {
    display: flex;
    align-items: center;
}

.sub {
    color: rgb(141, 141, 141);
}

hr {
    width: 90%;
}
profile
이나래
이전 포스트

만들고 싶은 페이지 마크업

0개의 댓글