웹 기초 - 상단바 만들기

• 지금까지 배웠던 문법들로 상단바를 만들기 도전!

1.  사용하여 구현하기

HTML
<a href="bnx.oa.gg" target="_blanck">BMX</a>

<div>
  |&nbsp;&nbsp;&nbsp;
  BRAND
  &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  VISUAL
  &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  STYLE
  &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  MEDIA
  &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  NEWS
 &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  STORE
  &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  CUSTOMER
  &nbsp;&nbsp;&nbsp;|
</div>

CSS
a {
  /*   밑줄 제거 */
  text-decoration:none;
  /*  한 줄 혼자 사용 */
  display:block;
  /*   텍스트 정렬 */
  text-align: center;
  /*   폰트 크기/ 굵기 변경 */
  font-size: 3rem;
  font-weight: bold;
  /*   텍스트 색 변경 */
  color: black;
}
div {
  text-align:center;
  font-weight: bold;
}

• 1번 방식의 경우, BMX에 있는 여백에도 마우스를 클릭할 수 있다. -> a의 display가 block으로 설정되어 있기 때문!

---

2. |를 엘리먼트로 감싸기, width사용 가능

HTML

<div>BMX</div>

<nav>
  <section>|</section>
  BRAND
  <section>|</section>
  VISUAL
  <section>|</section>
  STYLE
  <section>|</section>
  MEDIA
  <section>|</section>
  NEWS
  <section>|</section>
  STORE
  <section>|</section>
  CUSTOMER
  <section>|</section>
</nav>

CSS

div {
  color: black;
  font-weight: bold;
  font-size: 4rem;
  display:block;
  text-align:center;
  letter-spacing: -0.3rem;
}
nav {
  font-weight: bold;
  text-align:center;
}
nav > section {
  width: 50px;	/*  '|'의 너비를 줌으로써 간격이 넓어진다.  */
  display: inline-block; /* `|`를 한 줄에 다 표현 */


}

---

3. 각 글자들을 감싸고 너비도 균일하게 하기

HTML

<div>BMX</div>

<nav>
  |
  <section>BRAND</section>
  |
  <section>VISUAL</section>
  |
  <section>STYLE</section>
  |
  <section>MEDIA</section>
  |
  <section>NEWS</section>
  |
  <section>STORE</section>
  | 
  <section>CUSTOMER</section>
  |
</nav>

CSS

div {
  text-align:center;
  font-weight: bold;
  font-size: 3rem;
}
nav {
  text-align:center;
  font-weight: bold;
}

nav > section {
  display:inline-block;
  width: 120px; /* 글자들에게 너비를 주면서 자연스럽게 '|'가 멀어지게 된다. */
}

---

4. 모든 글자에 a엘리먼트 추가하기

HTML

<div><a href="http://bnx.oa.gg/" tatget="_blank">BMX</a></div>

<nav>
  |
  <section><a href="#">BRAND</a></section>
  |<section><a href="#">VISUAL</a></section>
  |<section><a href="#">STYLE</a></section>
  |<section><a href="#">MEDIA</a></section>
  |<section><a href="#">NEWS</a></section>
  |<section><a href="#">STORE</a></section>
  |<section><a href="#">CUSTOMER</a></section>
  |
</nav>

CSS

a {
  color:black;
  font-weight: bold;
  text-decoration:none;
}

div {
  text-align:center;
}

div > a {
  font-size: 3rem;
  letter-spacing:-0.2rem;
}

nav {
  text-align:center;
}

nav > section {
  display: inline-block;
  width : 120px;
}

---

5. 메뉴바에 있는 글자들을 선택하는 범위 넓게 하기

HTML

<div><a href="http://bnx.oa.gg/" tatget="_blank">BMX</a></div>

<nav>
  |
  <section><a href="#">BRAND</a></section>
  |<section><a href="#">VISUAL</a></section>
  |<section><a href="#">STYLE</a></section>
  |<section><a href="#">MEDIA</a></section>
  |<section><a href="#">NEWS</a></section>
  |<section><a href="#">STORE</a></section>
  |<section><a href="#">CUSTOMER</a></section>
  |
</nav>

CSS

a {
  text-decoration: none;
  color: black;
}
div {
  text-align: center;
  font-weight: bold;
  font-size: 4rem;
  letter-spacing: -0.3rem;
}

nav {
  text-align: center;
  font-weight: bold;
}

nav > section {
  display: inline-block;
  width: 120px;
}

nav > section > a {
/* a엘리먼트 diplay 기본값이 inline */
/* block으로 바꿈으로써 너비가 최대화*/
  display: block;

}