HTML, CSS #3

1. 메뉴 상단바 만들기!

지금 까지 했던걸 바탕으로 메뉴 상단바를 만들어 보자. 할수있어!! 진짜요?

예시)

• 일단 생각을 해볼게 BMX는좀 큰 글자인데 뭔가 클릭이 가능한 형태로 만들어야 되고,

• bold형태의 메뉴들이 있고 메뉴들은 간격이 좀 벌어져 있어.

<div>
  <a href="#">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>

• 먼저 내가 말한대로 div안에 a태그로 bmx를 만들고 nav안에 | 바 추가 하고 메뉴들은 section으로 감싸고 a태그로 설정했어.

a {
  color:black;
  text-decoration:none;
}

div {
  text-align:center;
}

div > a {
  font-size:7rem;
  font-weight:bold;
  letter-spacing:-0.4rem;
}

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

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

nav > section > a {
  display:block;
}

nav > section:hover > a {
  color:red;
  text-decoration:underline;
}

• css를 꾸며야 되는데, a태그는 bmx잖아? 그러니까 color:black;, text-decoration:none;을 주고

• nav로 준 메뉴들은 중앙으로 오게끔 하기 위해text-align:center;랑 글자 폰트를 주고, 또한 각각의 메뉴들은 a 태그를 갖고 있잖아? 그래서 nav > section > a 안에 display를 block으로 주면 메뉴 옆에 있는 공백 까지 선택이 가능해 ! 그러면 이제 저 사진처럼 모양은 나오게 될거야.
  

• 마지막으로 메뉴를 선택하면 이런식으로 변경되도록 하고싶어! 그러면 nav > section:hover > a section이 메뉴하나를 가지고 있으니까 여기에 hover를 붙이고 그에 맞는 효과를 넣어주면 끝!!
  네? 뭐라구요....뭐가 끝이에요

2. img 사용법

img도 삽입할 줄 알아야 홈페이지를 만들거나 하겠지?

<img src="https://picsum.photos/id/237/200/300" alt="">

그냥 뭐 없어 .. src에 이미지 주소 입력하고 alt에 별명? 붙여주면 되고

img {
  border:10px solid red;
  margin:20px;
  display:block;
}

살짝만 꾸며주면?

귀여운 강아지가 나온답니다~