HTML_CSS_017_tag_a_Normalize

AMJ·2023년 4월 6일

html_css_js_log

목록 보기

17/59

`<a>` Tag normalize

<a href=""></a>

<span></span>

<img src="" alt="">

display default값이 inline 속성 이다.

Normalize

a의 같은 경우, 초기에 속성 값을 노멀라이즈.
color는 inherit
text-decoration은 none
혹은 inherit으로 초기화를 시킨다.

a{
	color : inherit; /* default 값이 black */
    text-decoration : inherit; /* default 값이 underline */
}

<nav>
  <section>
    <div><a href="#">Home</a></div>
    <div><a href="#">Tutorials</a></div>
    <div><a href="#">Articles</a></div>
    <div><a href="#">Inspiration</a></div>
  </section>
</nav>
<head>
  <style>
    a {
      text-decoration: inherit;
      color: inherit;
    }

    /* 메뉴박스 */
    nav {
      text-align: center;
    }

    /* 메뉴 */
    nav>section {
      background: grey;
      display: inline-block;
      border-radius: 10px;
    }

    /* 메뉴 아이템 */
    nav>section>div {
      display: inline-block;
      padding: 0 20px;
    }

    /* 메뉴 아이템 텍스트 */
    nav>section>div>a {
      padding: 20px;
      display: block;
      font-weight: bold;
      letter-spacing: -1px;
    }

    nav>section>div:hover>a {
      background-color: black;
      color: white;
    }
  </style>
</head>