21.07.28

152967 단어 대구AI스쿨웹프로그래밍TILTIL

Today I Learn

blog.html

<!-- 07-28 -->
<!-- Blog Main Content Right -->
<div class="blog-main-right">
  <!-- Blog Account -->
  <div class="blog-account">
    <p>네이버를 더 안전하고 편하게 이용하세요.</p>
    <a href="#">로그인</a>
    <div class="account_sub">
      <div class="left">
        <span>아이디</span>
        <span>비밀번호 찾기</span>
      </div>
      <span>회원가입</span>
    </div>
  </div>
  <!-- Blog Banner -->
  <div class="blog-banner"></div>
  <!-- Blog Guide -->
  <div class="blog-guide">
    <a href="#">
      <p>
        온라인 셀러를 위한<br />
        <span>블로그 마켓 가입</span>
      </p>
      <i></i>
    </a>
  </div>
  <div class="blog-guide">
    <a href="#">
      <p>
        꼭 한번 확인해야 할<br />
        <span>블로그 가이드</span>
      </p>
      <i></i>
    </a>
  </div>
  <div class="blog-guide">
    <a href="#">
      <p>
        누구보다 발빠르게<br />
        <span>블로그 새소식</span>
      </p>
      <i></i>
    </a>
  </div>
  <!-- Blog Notice -->
  <div class="blog-notice">
    <div class="blog-notice-title-wrap">
      <a href="#">
        <h3>공지사항</h3>
        <i></i>
      </a>
    </div>
    <ul class="blog-notice-lists">
      <li>
        <a href="#"
           >[안내] 아이템팩토리 정기 점검 안내</a
          >
      </li>
      <li>
        <a href="#">[8일] 네이버 페이 DB 점검 안내</a>
      </li>
      <li>
        <a href="#"
           >[안내] 블로그 글발행 해피빈콩 지급 안내</a
          >
      </li>
    </ul>
  </div>
  <!-- Blog Helper -->
  <div class="blog-helper">
    <ul class="blog-helper-lists">
      <li><a href="#">블로그 앱 간편설치</a></li>
      <li><a href="#">개발 가이드</a></li>
      <li><a href="#">블로그 글 권리 보호</a></li>
      <li><a href="#">블로그 스마트봇</a></li>
    </ul>
  </div>
</div>
</div>
</main>

<!-- Blog Footer -->
<footer id="blog-footer">
  <div class="blog-container">
    <ul>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
    </ul>
  </div>
  <p>Copyright © NAVER Corp. All Rights Reserved.</p>
</footer>

blog.css

/* Blog Main Content Right */
#blog-main #blog-main-content .blog-main-right {
    width: 280px;
}

/* Blog Account */
.blog-main-right .blog-account {
    width: 100%;
    background-color: #f3f3f6;
    border: solid 1px #dddddf;
    padding: 20px 15px;
    margin-bottom: 12px;
}

.blog-main-right .blog-account p {
    font-size: 11px;
    color: #888;
    margin-bottom: 7px;
}

.blog-main-right .blog-account a {
    display: block;
    width: 100%;
    background-color: #ffffff;
    border: solid 1px #cccccc;
    border-radius: 4px;

    padding: 10px 0;
    margin-bottom: 12px;

    text-align: center;
    font-size: 13px;
    color: #000000;
    font-weight: 700;
}

.blog-main-right .blog-account .account_sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    padding: 0 8px;
}

.blog-main-right .blog-account .account_sub span {
    font-size: 11px;
    color: #888;
}

/* Blog Banner */
.blog-main-right .blog-banner {
    width: 100%;
    height: 240px;
    background-color: black;
    border: solid 1px #dddddf;
}

/* Blog Guide */
.blog-main-right .blog-guide {
    background-color: #ffffff;
    border: solid 1px #dddddf;
    border-width: 0 1px 1px;

    padding: 19px 20px;
}

.blog-main-right .blog-guide a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.blog-main-right .blog-guide p {
    width: 145px;
    font-size: 17px;
    line-height: 29px;
    color: #222;
}

.blog-main-right .blog-guide p span {
    font-size: 18px;
    font-weight: 700;
}

.blog-main-right .blog-guide i {
    display: inline-block;

    width: 88px;
    height: 65px;
    background-color: green;
}

/* Blog Notice */
.blog-main-right .blog-notice {
    background-color: #ffffff;
    border: solid 1px #dddddf;
    border-width: 0 1px 1px;

    padding: 24px 22px 22px;
}

.blog-main-right .blog-notice .blog-notice-title-wrap {
    margin-bottom: 13px;
}

.blog-main-right .blog-notice .blog-notice-title-wrap a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.blog-main-right .blog-notice .blog-notice-title-wrap h3 {
    font-size: 14px;
    font-weight: 600;
}

.blog-main-right .blog-notice .blog-notice-title-wrap i {
    width: 8px;
    height: 13px;
    background-color: #000000;
}

.blog-main-right .blog-notice .blog-notice-lists {
    font-size: 12px;
}

.blog-main-right .blog-notice .blog-notice-lists li {
    margin-bottom: 4px;
}

.blog-main-right .blog-notice .blog-notice-lists li:last-child {
    margin-bottom: 0;
}

.blog-main-right .blog-helper {
    background-color: #ffffff;
    border: solid 1px #dddddf;
    border-width: 0 1px 1px;

    padding: 24px 16px;
}

.blog-main-right .blog-helper li {
    font-size: 14px;
    margin-bottom: 10px;
}

.blog-main-right .blog-helper li a {
    display: block;
    height: 35px;
    line-height: 35px;
    /* 텍스트만 영향을 받음 */
    padding-left: 30px;

    /* 
    아이콘을 넣을 때  <i>태그를 사용하거나
    background-image 속성을 사용할 수 있다.
    강사님은 주로 background-image 속성을 사용하는 편.
    */
    background-image: url(../img/checkbox.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 20px 20px;
}

/* Blog Footer */
#blog-footer {
    padding-top: 40px;
    padding-bottom: 55px;
    background-color: #f6f6f6;

    text-align: center;
}

#blog-footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    margin-bottom: 20px;
}

#blog-footer ul a:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    background-color: #d7d7d7;

    margin: 0 6px;

    vertical-align: -1px;
}

#blog-footer ul:first-child a:before {
    content: initial;
}

blog-detail.html

<!-- Blog Header -->
<header id="blog-header">
  <div class="blog-header__top">
    <div class="blog-container">
      <!-- Blog Header Left -->
      <div class="blog-header-left">
        <h2><a href="#">블로그</a></h2>
        <div class="blog-header__input-wrap">
          <div class="blog-search-wrap">
            <input type="text" />
            <button class="btn-search"></button>
          </div>
          <button class="btn-total-search">통합검색</button>
        </div>
      </div>

      <!-- Blog Header Right -->
      <div class="blog-header-right">
        <a href="#" class="btn-login">로그인</a>
        <button class="btn-menu"></button>
      </div>
    </div>
  </div>

  <!-- Blog header Nav -->
  <div class="blog-header__nav">
    <div class="blog-container">
      <!-- Nav Left -->
      <nav class="nav-left">
        <ul>
          <li><a href="blog.html">블로그 홈</a></li>
          <li><a href="#">주제별 보기</a></li>
          <li><a href="#">이달의 블로그</a></li>
          <li><a href="#">공식 블로그</a></li>
          <li class="on">
            <a href="blog-detail.html">챌린지 프로그램</a>
          </li>
        </ul>
      </nav>

      <!-- Nav Right -->
      <nav class="nav-right">
        <ul>
          <li class="on"><a href="#">블로그 마켓 가입</a></li>
          <li><a href="#">아이템 팩토리</a></li>
          <li><a href="#">블로그 공식블로그</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<!-- Blog Main Detail -->
<main role="main" id="blog-main-detail">
  <!-- Program -->
  <div id="program">
    <div class="blog-container">
      <h3>챌린지 프로그램</h3>
      <p>
        화제의 토픽, 영화 리뷰, 미션위젯과 함께 목표에 다가가는
        당신의 도전을 기다립니다.
      </p>
    </div>
  </div>

  <!-- Program Nav -->
  <nav id="program-nav">
    <div class="blog-container">
      <h4><a href="#">HOT TOPIC 도전</a></h4>
      <ul>
        <li><a href="#">블로거, 영화를 말하다</a></li>
        <li><a href="#">목표 달성! 미션 위젯</a></li>
      </ul>
    </div>
  </nav>

  <!-- Program Info -->
  <div id="program-info">
    <div class="blog-container">
      <div class="program-info-wrap">
        <h4>
          핫토픽 도전으로<br />
          인기 블로거가<br />
          되어보세요.
        </h4>
        <div class="program-txt-wrap">
          <p>
            핫토픽 도전은 매주 화/목/금 블로그씨 질문에 답한
            도전글에서 선정되며<br />
            선정된 글과 동영상은 블로그 홈 HOT TOPIC 영역에
            일정기간 노출됩니다.
          </p>
          <a href="#">HOT TOPIC 도전 가이드</a>
        </div>
      </div>
      <div class="program-msg-box blog-border">
        <span class="from">From, 블로그씨</span>
        <div class="program-msg-wrap">
          <p class="guestion">
            <span class="date">5월 19일</span>
            <span class="txt"
                  >블로그씨는 큰맘 먹고 오븐을 샀지만 그대로
              방치 중이에요.. 나의 아기자기한 홈 카페를
              영상과 함께 보여주세요!</span
              >
          </p>
          <a href="#">블로그씨 질문에 답하기</a>
        </div>
      </div>
    </div>
  </div>

  <!-- Program Day -->
  <div id="program-day">
    <div class="blog-container">
      <ul class="program-day-lists">
        <li class="program-day-list">
          <div class="program-day-title-wrap">
            <span class="date">5월 18일</span>
            <span class="txt">우리 동네 자랑</span>
            <span class="msg"
                  >공원이 있고 강이 보이는 우리 동네</span
              >
          </div>
          <ul class="program-image-lists">
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="program-day-list">
          <div class="program-day-title-wrap">
            <span class="date">5월 18일</span>
            <span class="txt">우리 동네 자랑</span>
            <span class="msg"
                  >공원이 있고 강이 보이는 우리 동네</span
              >
          </div>
          <ul class="program-image-lists">
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="program-day-list">
          <div class="program-day-title-wrap">
            <span class="date">5월 18일</span>
            <span class="txt">우리 동네 자랑</span>
            <span class="msg"
                  >공원이 있고 강이 보이는 우리 동네</span
              >
          </div>
          <ul class="program-image-lists">
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
            <li class="blog-border">
              <a href="#">
                <img
                     src="https://via.placeholder.com/170x130"
                     />
                <h4>우리 동네는 매력적이다.</h4>
                <span>김인권</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</main>

<!-- Blog Footer -->
<footer id="blog-footer">
  <div class="blog-container">
    <ul>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
    </ul>
  </div>
  <p>Copyright © NAVER Corp. All Rights Reserved.</p>
</footer>

blog.css

/* Blog Main Detail */
/* Program */
.blog-border {
    border: 1px solid #eaeaec;
}

#blog-main-detail {
    padding-top: 0;
    padding-bottom: 100px;
}

#blog-main-detail #program {
    background-color: #634ea4;
    padding: 62px 0 50px;

    color: #ffffff;
}

#blog-main-detail #program h3 {
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 10px;
}

#blog-main-detail #program p {
    font-size: 16px;
}

/* Program Nav */
#blog-main-detail #program-nav {
    border-bottom: solid 1px #ebebeb;
    background-color: #ffffff;

    padding: 10px 0;
}
#blog-main-detail #program-nav .blog-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#blog-main-detail #program-nav a {
    font-size: 14px;
    color: #666;
}

#blog-main-detail #program-nav h4 {
    font-weight: 600;
}

#blog-main-detail #program-nav h4 a {
    color: #000;
}

#blog-main-detail #program-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#blog-main-detail #program-nav ul a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: #ababab;
    margin: 0 12px;

    vertical-align: -1px;
}

/* Program Info */
#blog-main-detail #program-info {
    background-color: #f8f8f8;
    padding: 44px 0 36px;
}

#blog-main-detail #program-info .program-info-wrap {
    display: flex;
    flex-wrap: wrap;

    margin-bottom: 50px;
}

#blog-main-detail #program-info .program-info-wrap h4 {
    font-size: 32px;
    color: #7d55c8;
    line-height: 44px;

    margin-right: 120px;
}

#blog-main-detail #program-info .program-info-wrap p {
    font-size: 18px;
    line-height: 28px;
    color: #262626;

    margin-bottom: 18px;
}

#blog-main-detail #program-info .program-info-wrap a {
    font-size: 13px;
    color: #7d55c8;
}

#blog-main-detail #program-info .program-msg-box {
    padding: 29px;
    background-color: #ffffff;
}

#blog-main-detail #program-info .program-msg-box .from {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #7d55c8;

    margin-bottom: 6px;
}

#blog-main-detail #program-info .program-msg-box .program-msg-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

#blog-main-detail #program-info .program-msg-box p {
    width: 810px;
    font-size: 18px;
}

#blog-main-detail #program-info .program-msg-box .date {
    color: #693bbc;
}

#blog-main-detail #program-info .program-msg-box .txt::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #d5d5d5;

    margin: 0 9px;
    vertical-align: -1px;
}

#blog-main-detail #program-info .program-msg-box a {
    display: block;
    width: 179px;
    height: 40px;
    background-color: #7d55c8;
    color: #ffffff;
    line-height: 44px;
    text-align: center;
}

#blog-main-detail #program-info .program-msg-box a:hover {
    background-color: rgba(125, 85, 200, 0.8);
}

/* Program Day */
#blog-main-detail #program-day {
    background-color: #ffffff;
}

#blog-main-detail #program-day .program-day-lists {
}

#blog-main-detail #program-day .program-day-list {
}

#blog-main-detail #program-day .program-day-title-wrap {
    padding: 36px 0 16px;
}

#blog-main-detail #program-day .program-day-title-wrap .date {
    color: #693bbc;
    font-size: 16px;
}

#blog-main-detail #program-day .program-day-title-wrap .txt {
    font-size: 16px;
}

#blog-main-detail #program-day .program-day-title-wrap .txt::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #d5d5d5;

    margin: 0 9px;
    vertical-align: -4px;
}

#blog-main-detail #program-day .program-day-title-wrap .msg {
    font-size: 14px;
    color: #666666;
}

#blog-main-detail #program-day .program-image-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#blog-main-detail #program-day .program-image-lists li {
    width: 175px;
    height: 228px;
}

#blog-main-detail #program-day .program-image-lists li img {
    width: 100%;
    margin-bottom: 15px;
}

#blog-main-detail #program-day .program-image-lists li h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
}

#blog-main-detail #program-day .program-image-lists li span {
    font-size: 12px;
    color: #959595;
}

Review

블로그 메인 페이지의 오른쪽 영역과 블로그 챌린지 프로그램 페이지를 카피캣했다.
오늘은 오타때문에 애를 먹는 일이 없어서 별 어려움이 없었다.

GitHub Actions+Trivy를 통한 DevSecOps 구현
yBatis의 getMapper () 인터페이스, resultMap 탭, Alias 별명, 가능한 한 sql 열 추출, 동적 조작

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage