html 리스트, id와 class, Normalize, inherit

! 목표 : 메뉴바의 코드를 오늘 배운 개념으로 새롭게 정리하자

Html의 리스트

• 기본적인 마크다운 문법을 활용하여 코드를 정리하자
• ul : 리스트
• ol : 순서 리스트
• li : 리스트의 아이템

  위 코드들은 앞으로 동일한 범위 내의 내용을 가진 아이템들이 나열될 것을 예고한다

  추가로 CSS에서 list-style: none; 속성을 주면 앞에 점, 숫자가 사라진다

---

id와 class

• id : 고유의 식별자 역할
  1. 중복되면 안되며 숫자로 시작하는 것도 안된다
  1-1. 언더 바, 알파벳과 숫자를 섞어서는 가능하다
  2. html에서 오직 한 개의 속성을 가진다

  html 입력방식 :<div id=”aa”><div>
  css 입력방식 : #aa{ }

• class : 묶음, 테이블 같은 역할
  1. html에서 여러 개 생성 및 사용이 가능하다
  2. 같은 class를 사용하는 태그라도 id가 다르면 id의 속성을 따른다

  html 입력방식 :<div id=”aa” class=”c1”><div>
  css 입력방식 : .c1{ }

  • .c1.c2{ } : .c1과 .c2 모두의 속성을 설정한다
  • .c1 .c2{ } : .c1 안에 있는 .c2 를 설정한다 (띄어쓰기 차이)

---

Normalize

• 컴퓨터의 주관이 들어간 값을 우리가 디자인할 수 있게 원초적인 모습으로 바꿔주는 것

  대표적인 예 :

  1. img 삽입 시 이미지의 패딩, 마진값
  2. a 태그의 파란 글자와 밑줄
  3. h1, h2...에 자동으로 들어가 있는 마진값
  4. ul의 패딩, 마진값, li의 점
     4-1.list-style:none; → li 점 제거 css코드

• 기본적으로 코드 제작 시 제일 처음에 항상 해주자

  /* 노멀라이즈 */
  body, ul, li{
     margin: 0;
     padding: 0;
     list-style: none;

  ---

  inherit

• 부모의 속성값을 자동으로 따라간다
• 대표적인 inherit 속성 : color, text-align, font-size, font-weight

  ! 처음 코드를 시작했을 때 !

  • 부모와 자식의 관계가 헷갈렸던 이유는 따라가는 것도 있고 아닌 것도 있기 때문이었다
    

    • 왜 알아야 할까?
      
      

    1. 모든 텍스트에 color 코드가 삽입되어 있다고 가정해 보자
       
       
    2. 그 날 텍스트의 메인 컬러를 바꿔 달라는 요청이 오면...하나하나 다 바꿔주어여한다
       
       
    3. 하지만 inherit의 속성을 알고있었다면 부모의 컬러만 바꿔주면 된다
       
       
    4. 또는 하나의 텍스트만 컬러를 바꾸자는 요청이 오면 해당 텍스트에만 color코드를 삽입해주면 된다

---

> 테스트 메뉴바 제작

• 위 내용을 활용하여 간단한 메뉴를 만들어 보자

1. html 메뉴 아이템 생성

<nav class="menu">
    <ul>
        <li><a href="#">메뉴 아이템</a></li>
        <li><a href="#">메뉴 아이템</a></li>
        <li><a href="#">메뉴 아이템</a></li>
    </ul>
</nav>

emmet 코드 : nav.menu > ul > li*3 {메뉴 아이템}

2. Normalize 진행

body, ul, li{
    margin: 0;
    padding: 0;
    list-style: none;
}

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

• body ul li의 마진값을 없애주고 li의 점을 없애준다
• a 태그의 글자 색과 밑줄을 없애준다

3. 메뉴 커스텀

• html 리스트 코드와 class를 활용하여 속성을 준다

.menu{
    text-align:center;
}
.menu>ul{
    display: inline-block;      // `ul`모아주기
    background-color: lightgray;
    padding:0 20px;
    margin: 10px 0;
    border-radius:5px;          // 모서리 둥글게
}

.menu>ul>li{
    display: inline-block;      // 아이템 정렬
    width:150px;
}
.menu>ul>li>a{
    display: block;              // 검색 범위를 부모와 맞춤 + 글자화 한다
    padding : 10px;
}
.menu>ul>li>a:hover{
    background-color:black;
    color:white;
}

주의할 점 : a 태그에는 inline이 기본값이기 때문에 weight padding 등 잘 먹히지 않는다

• 기본값을 inline-block이나 block으로 바꾸는 것을 항상 생각해 두자

• 테스트 결과 잘 작동한다

---

3-1. hover 시 하위메뉴 나오는 기능 찾아보기

예시코드 -->

<a href="#">버튼</a>
<div>안녕</div>

• 여기서 나는 '버튼'에 마우스를 올렸을 때 '안녕'이 나오게 하고 싶다

a + div {
  display:none;              //'안녕'을 지금 보여주지 않겠다
}
a:hover + div {
  display:block;              //hover 했을 때 오직 '안녕'만 꽉 차게 보여줄 것이다
}

위 코드에서 '+'는 a 태그의 바로 아래에 있는 div를 가져오겠다는 뜻이다

---

Today Comment :

• a 태그에 margin 등 속성이 잘 안 먹히는 것
• 왜 부모에 속성이 어떤 건 되고 안되는지 답답했던 것
• 또 display의 속성과 삽입 위치가 헷갈렸던 것
• 그냥 코드 삽입하면 되지 inherit을 굳이? 라고 생각했던 것
• 태그가 있는데 리스트 코드를 따로 써줘야 하나? 라는 의문 등등
  
  전반적으로 답답했던 부분을 이해하고 생각의 범위를 넓힐 수 있었다
  
  다음에도 조사하면서 필요성에 대한 사례도 같이 알아두자