html 공부 네이버 헤더 만들어보기.

 

-> 헤더 이미지

 

코딩:

<style>

.topBox{background: #FCFCFC; display: inline-block; padding-left: 5px; color:gray; font-size: 11px; border-bottom: 1px solid #EAEAEA;}

.topBox span{display: inline-block;line-height: 30px; font-size: 12px; margin:0 5px;} 

.topBox .box{border: 1px solid #CFCFCF; height: 18px; line-height: 20px; padding:0 2px; font-size: 11px;}

.topBox .circle{background: red; padding: 1px 2px; height: 10px; line-height: 10px; border-radius:10px; font-weight: bold; color:white; border: 1px solid #D91601; font-size: 10px; margin-left: -7px;}

.topBox .check{height: 10px; line-height: 10px; width: 12px; text-align: center; padding: 2px 0px;}

</style>

 

<div class='topBox'>

    <div style='border-top: 2px solid #2DAE05;'></div>

    <span style='color:gray;'>킹콩님</span>

    <span class='box'>로그아웃</span>

    <span>네이버</span>

    <span>me</span>

    <span class='circle'>6</span>

    <span>메일</span>

    <span class='circle'>109</span>

    <span>카페홈</span>

    <span>블로그홈</span>

    <span>더보기</span>

    <span class='box check'>v</span>

</div>

 

코딩과 이미지 비교

 < -- 이미지

<- 코딩