close
프로필 배경
프로필 로고

개발자 노트 - 강경훈 story

HTML CSS/블로그 만들기 · 2024. 8. 4. fullscreen 넓게보기

1일차 - 메인 페이지 (미완성)

예시

main.css

더보기 
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Helvetica, sans-serif;
}

.display-flex {
    display: flex;
}



header {
    display: flex;
    width: 1000px;
    padding: 10px;
    margin: 5px auto;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
}

.img-setting {
    width: 15px;
    height: 15px;
    position: relative;
}

.img-youtube {
    width: 30px;
    height: 21px;
    position: relative;
}

.container {
    width: 1000px;
    margin: 5px auto;
    display: flex;
    gap: 20px;
}

.nav-container {
    width: 170px;
    height: 300px;
    /* 이런식으로 하고 싶지 않음 */
    padding: 10px;
    margin: 10px 5px;
    border: 1px solid #888;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    color: #333333;

}

.nav-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.nav-list {
    list-style: none;
    padding: 0;
}

.nav-list li {
    margin: 3px 0;
}

.nav-list li.selected-menu {
    margin: 5px 0;
    font-size: 1.1em;
    font-weight: bold;
    color: black;
}

main {
    width: 730px;
    margin: 20px 5px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.img-edit {
    width: 30px;
    height: 30px;
    position: relative;
    top: -5px;
}

main.html

더보기 
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Green's Blog - 경영전략</title>
    <link rel="stylesheet" href="css/main.css">
    <style>
        

        .main-head {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .edit {
            text-decoration: none;
            color: black;
        }

        .page-container {
            display: flex;
            justify-content: center;
        }

        .page-list {
            display: flex;
            gap: 5px;
        }

        .page-list li {
            list-style: none;
        }

        .content {
            width: 180px;

        }

        .content-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .content-img {
            border: 1px solid #ddd;
            height: 158px;
            padding: 10px;
            font-size: 20px;
        }

        .content-title {
            font-size: 1em;
            margin: 10px 0;
        }

        .content-date {
            font-size: 0.9em;
            color: #888;
        }
    </style>
</head>

<body>
    <header>
        <div class="blog-main display-flex">
            <h2>Green's Blog </h2>
            <a href="headline-setting.html"
                onclick="window.open(this.href, '_blank', 'width=800, height=600'); return false;"> <img
                    src="images/setting.png" alt="" class="img-setting" style="top: -5px; left: 3px"></a>
        </div>
        <a href="https://www.youtube.com/channel/UC-uWKja3o11-zgj5gm7m__Q" target="_blank" class="link-youtube"><img
                src="images/youtube.png" alt="" class="img-youtube"></a>

    </header>
    <div class="container">
        <nav class="nav-container">
            <div class="nav-head">
                <h4>전체 보기</h4>
                <a href="category-setting.html"
                    onclick="window.open(this.href, '_blank', 'width=800, height=600'); return false;"> <img
                        src="images/setting.png" alt="" class="img-setting"></a>
            </div>
            <ul class="nav-list">
                <li>Python <span>(12)</span></li>
                <li>Java <span>(2)</span></li>
                <li>iOS <span>(8)</span></li>
                <li>소프트웨어 자료 <span>(26)</span></li>
                <li>자료구조 <span>(8)</span></li>
                <li>리눅스 <span>(8)</span></li>
                <li>Git <span>(4)</span></li>
                <li>자기계발 <span>(3)</span></li>
                <li class="selected-menu">경영전략 <span>(20) <span class="new">N</span></span></li>
                <li>리더쉽 <span>(7)</span></li>
            </ul>
        </nav>
        <main class="main">
            <div class="main-head">
                <h4>경영전략 <span style="color: aqua;">20</span></h4>
                <a href="edit.html" class="edit"><img
                    src="images/edit.png" alt="" class="img-edit"></a>
            </div>
            <div class="content-grid">
                <div class="content">
                    <div class="content-img">팬덤 확보에 성공한 4세대 걸그룹의 차별화 전략</div>
                    <div class="content-title">팬덤 확보에 성공한 4세대 걸그룹의 차별화 전략</div>
                    <div class="content-date">2022. 12. 30.</div>
                </div>
                <div class="content">
                    <div class="content-img">불황 속에서도 기업 성장 챙기는 전략</div>
                    <div class="content-title">불황 속에서도 기업 성장 챙기는 전략</div>
                    <div class="content-date">2022. 12. 8.</div>
                </div>
                <div class="content">
                    <div class="content-img">CSV 실험, 전략적으로 접근이 필요하다.</div>
                    <div class="content-title">CSV 실험, 전략적으로 접근이 필요하다.</div>
                    <div class="content-date">2022. 12. 7.</div>
                </div>
                <div class="content">
                    <div class="content-img">뉴노멀 시대 사무실</div>
                    <div class="content-title">뉴노멀 시대 사무실</div>
                    <div class="content-date">2022. 12. 2.</div>
                </div>
                <div class="content">
                    <div class="content-img">팬덤 확보에 성공한 4세대 걸그룹의 차별화 전략</div>
                    <div class="content-title">팬덤 확보에 성공한 4세대 걸그룹의 차별화 전략</div>
                    <div class="content-date">2022. 12. 30.</div>
                </div>
                <div class="content">
                    <div class="content-img">불황 속에서도 기업 성장 챙기는 전략</div>
                    <div class="content-title">불황 속에서도 기업 성장 챙기는 전략</div>
                    <div class="content-date">2022. 12. 8.</div>
                </div>
                <div class="content">
                    <div class="content-img">CSV 실험, 전략적으로 접근이 필요하다.</div>
                    <div class="content-title">CSV 실험, 전략적으로 접근이 필요하다.</div>
                    <div class="content-date">2022. 12. 7.</div>
                </div>
                <div class="content">
                    <div class="content-img">뉴노멀 시대 사무실</div>
                    <div class="content-title">뉴노멀 시대 사무실</div>
                    <div class="content-date">2022. 12. 2.</div>
                </div>
                <div class="content">
                    <div class="content-img">팬덤 확보에 성공한 4세대 걸그룹의 차별화 전략</div>
                    <div class="content-title">팬덤 확보에 성공한 4세대 걸그룹의 차별화 전략</div>
                    <div class="content-date">2022. 12. 30.</div>
                </div>
                <div class="content">
                    <div class="content-img">불황 속에서도 기업 성장 챙기는 전략</div>
                    <div class="content-title">불황 속에서도 기업 성장 챙기는 전략</div>
                    <div class="content-date">2022. 12. 8.</div>
                </div>
                <div class="content">
                    <div class="content-img">CSV 실험, 전략적으로 접근이 필요하다.</div>
                    <div class="content-title">CSV 실험, 전략적으로 접근이 필요하다.</div>
                    <div class="content-date">2022. 12. 7.</div>
                </div>
                <div class="content">
                    <div class="content-img">뉴노멀 시대 사무실</div>
                    <div class="content-title">뉴노멀 시대 사무실</div>
                    <div class="content-date">2022. 12. 2.</div>
                </div>
                <div class="content">
                    <div class="content-img">팬덤 확보에 성공한 4세대 걸그룹의 차별화 전략</div>
                    <div class="content-title">팬덤 확보에 성공한 4세대 걸그룹의 차별화 전략</div>
                    <div class="content-date">2022. 12. 30.</div>
                </div>
                <div class="content">
                    <div class="content-img">불황 속에서도 기업 성장 챙기는 전략</div>
                    <div class="content-title">불황 속에서도 기업 성장 챙기는 전략</div>
                    <div class="content-date">2022. 12. 8.</div>
                </div>
                <div class="content">
                    <div class="content-img">CSV 실험, 전략적으로 접근이 필요하다.</div>
                    <div class="content-title">CSV 실험, 전략적으로 접근이 필요하다.</div>
                    <div class="content-date">2022. 12. 7.</div>
                </div>
                <div class="content">
                    <div class="content-img">뉴노멀 시대 사무실</div>
                    <div class="content-title">뉴노멀 시대 사무실</div>
                    <div class="content-date">2022. 12. 2.</div>
                </div>
            </div>
            <div class="page-container">
                <ul class="page-list">
                    <a href="#">&laquo;</a>
                    <a href="#" class="active">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                    <a href="#">6</a>
                    <a href="#">7</a>
                    <a href="#">8</a>
                    <a href="#">9</a>
                    <a href="#">10</a>
                    <a href="#">&raquo;</a>
                </ul>
            </div>
        </main>
    </div>

</body>

</html>

결과 화면

코멘트

전체적으로 div를 구분하는 것이 중요하다고 생각한다.

<html>
  <body>
    <header>
      <div class="blog-main">
        <!-- 블로그 타이틀 및 설정 이미지 -->
      </div>
      <!-- 유튜브 링크 이미지 -->
    </header>

    <div class="container">
      <nav class="nav-container">
        <div class="nav-head">
          <!-- 전체 보기 헤더 및 설정 이미지 -->
        </div>
        <ul class="nav-list">
          <!-- 카테고리 목록 -->
        </ul>
      </nav>

      <main class="main">
        <div class="main-head">
          <!-- 메인 섹션 헤더 -->
        </div>
        <div class="content-grid">
          <!-- 콘텐츠 그리드 -->
          <div class="content">
            <div class="content-img"></div>
            <div class="content-title"></div>
            <div class="content-date"></div>
          </div>
          <!-- 반복되는 content div들 -->
        </div>
        <div class="page-container">
          <ul class="page-list">
            <!-- 페이지 네비게이션 -->
          </ul>
        </div>
      </main>
    </div>
  </body>
</html>

 

 

  • div를 세세하게 나눌 수록 flexbox를 여러단계로 적용 시킬수 있고 그렇게 함으로써 정렬 방향과 정렬 방식을 세세하게 조정이 가능하다.
  • 톱니버튼이나 유튜브 버튼 같은 이미지들도 flexbox의 자식 요소로서 정렬이 되고있는데 이미지의 위치 디테일이 마음에 들지 않아 위아래 혹은 좌우로 세밀한 조정을 하고 싶어서 position을 relative로 지정하고 top left 속성을 이용해 세밀한 좌표 조정을 적용하였다.

 

보완이 필요한 부분

  • 현재 그리드 형태로 컨텐츠를 나열 했는데 추후 수정될 수 있다(구글링해서 찾은거라 이해부족)
  • 컨텐츠의 제목 부분을 더 정교하게 만들 필요성이 있다
    레퍼런스에서는 제목의 생략된 부분을 ...으로 표현했는데 좀 더 공부가 필요하다
  • 시간이 부족하여 페이징 처리의 css를 적용하지 못했다

 

 

'HTML CSS > 블로그 만들기' 카테고리의 다른 글

2일차 - 메인 페이지 (페이지 css, 제목 생략, 게시글 이미지 적용)  (0) 2024.08.11
블로그 만들기  (0) 2024.08.04
HTML CSS/블로그 만들기 관련 글
더 보기

티스토리툴바