close
프로필 배경
프로필 로고

개발자 노트 - 강경훈 story

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

2일차 - 메인 페이지 (페이지 css, 제목 생략, 게시글 이미지 적용)

예시

common.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;
}
.img-new {
  width: 15px;
  height: 15px;
  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-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 {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.page-list li {
  list-style: none;
  display: flex;
  align-items: flex-end;
}
.page-list li a {
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  gap: 5px;
  color: black;
}
.page-shift {
  font-size: 1.5em;
  display: inline-block;
  transform: scaleY(1.5);
  position: relative;
  top: 5px;
}

.selected-page {
  color: rgba(31, 214, 214, 0.785) !important;
}

.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;
  overflow: hidden;
}
.img-content {
  width: 100%;
  height: 100%;
}

.content-title {
  font-size: 1em;
  margin: 10px 0;
  display: flex;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-date {
  margin-top: 1.2em;
  font-size: 0.9em;
  color: #888;
}

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/common.css" />
    <style>
      
    </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) <img src="images/new.jpg" alt="" class="img-new" /></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>
          </li>
          <li>리더쉽 <span>(7)</span></li>
        </ul>
      </nav>
      <main class="main">
        <div class="main-head">
          <h4>
            경영전략 <span style="color: rgba(31, 214, 214, 0.785)">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">
              <img src="images/sample.png" alt="" class="img-content" />
            </div>
            <div class="content-title">
              불황 속에서도 기업 성장 챙기는 전략불황 속에서도 기업 성장 챙기는
              전략불황 속에서도 기업 성장 챙기는 전략불황 속에서도 기업 성장
              챙기는 전략불황 속에서도 기업 성장 챙기는 전략
            </div>
            <div class="content-date">2022. 12. 8.</div>
          </div>
          <div class="content">
            <div class="content-img">
              <img src="images/sample.png" alt="" class="img-content" />
            </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">
              <img src="images/sample.png" alt="" class="img-content" />
            </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">
              <img src="images/sample.png" alt="" class="img-content" />
            </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">
              <img src="images/sample.png" alt="" class="img-content" />
            </div>
            <div class="content-title">뉴노멀 시대 사무실</div>
            <div class="content-date">2022. 12. 2.</div>
          </div>
          <div class="content">
            <div class="content-img">
              <img src="images/sample.png" alt="" class="img-content" />
            </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">
            <li>
              <a href="#"
                ><span class="page-shift">&lt;</span>
                이전&nbsp;&nbsp;&nbsp;&nbsp;</a
              >
            </li>
            <li><a href="#" class="selected-page">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li>
              <a href="#"
                >&nbsp;&nbsp;&nbsp;&nbsp;다음
                <span class="page-shift">&gt;</span></a
              >
            </li>
          </ul>
        </div>
      </main>
    </div>
  </body>
</html>

결과 화면

코멘트

 

  • 이미지 추가는 단순 작업
  • 페이징에서 이전과 다음 버튼

우선 <>를 적고, 1.5em 사이즈를 적용하여 이전,다음 글자보다 크게 만든 뒤,

transform: scaleY(1.5)로 y축 비율을 늘려 모양을 맞춰주었다.

이후 5px정도 아래로 맞춰줌

.page-shift {
  font-size: 1.5em;
  display: inline-block;
  transform: scaleY(1.5);
  position: relative;
  top: 5px;
}
  • 제목을 4줄로 생략한 방식

처음에는 display: flex; 로 해보고 싶어서 이것저것 시도해보았지만 결국 4줄을 초과했을 때 ...이 자동으로 적히게 하기 위해서는 display: -webkit-box;를 사용해야 했다

-webkit-box-orient: vertical; 은 flex-direction: colum;과 동일한 기능을 하고,

-webkit-line-clamp: 4;을 통해 4줄로 제한한다.

다음으로 범위를 넘은 글자를 안보이게 하고, ellipsis로 ...을 적용시킨다

.content-title {
  font-size: 1em;
  margin: 10px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

 

보완이 필요한 부분

  • 원래 요구사항은 같은 라인에 있는 컨텐츠라면 제일 긴 제목에 맞추어 제목 구간 height가 동일하게 적용되어야 하는데 현재 방식으로는 개별적으로 적용되고 있다.
    그리드 방식을 싹다 갈아엎어서 줄마다 관리해주어야 할 것 같다

 

 

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

1일차 - 메인 페이지 (미완성)  (0) 2024.08.04
블로그 만들기  (0) 2024.08.04
HTML CSS/블로그 만들기 관련 글
더 보기

티스토리툴바