07.27 Naverブログコピー猫

ネイバーブログコピー猫

• コードペン0.25 x画面でpc画面を確認できます.
• .blog header topセクションは左と右に分かれ、flexでソートされます.
• .blog header leftはprevident-content:flex-stratである.左揃え
  
  .blog header rightはprevident-content:flex-endです.右揃え

<style>
.blog_header_left {
    display: flex;
    justify-content: flex-strat;
    align-items: center;
}
.blog_header_right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>

• と同様にnav部分もflex-start/endで左と右に分かれている.
「
• とブログサイトへの参加はフォーカス効果があります.」onという名前のクラスを追加し、cssを使用して詳細な設計作業を行います.

<nav class="nav_left">
 <ul>
  <li class="on"><a href="#">블로그 홈</a></li>
 </ul>
</nav> 
/*nav_left의 li에 on이 붙었을 경우 border-bottom과 폰트설정*/
<stlye>
.nav_left ul li.on {
    border-bottom: 3px solid #00ab33;
} 
.nav_left ul li.on a {
    color: #00ab33;
    font-weight: bold; 
} 
</style> 

<nav class="nav_right">
 <ul>
  <li class="on"><a href="#">블로그 마켓 가입</a></li>
 </ul>
</nav> 
/*nav_right의 li에 on이 붙었을 경우 폰트와 배경색 설정*/
<style>
.nav_right ul li.on a{
    color: #fff;
    background-color: #00c73c;
    border: 1px solid rgba(0, 0, 0, 0.07); 
}
</style>