입문) HTML 과 CSS (LIST , 간단한 메뉴 리스트)

HTML 기본태그

ㅡ리스트

ul : unorderde list 순서 상관 없음. (점)ㅡli

ol : ordered list 순서 중요함. (1.2.3.4. 순서나옴) ㅡ li

dl : 데이터 리스트 (단어의 정의)

ㅡ 중첩 ul , li와:hover

ㅡ중첩 ul  : ul 안에 li 에 ul이 들어가고 무한히 반복 가능함 

 

ㅡ작성법

ul>li*2 ==리스트 2개 만들기

ul>li*2>a[href=#]  +탭 == li의 a링크의href 의 값이  #인것 2개 만들기 

:hover ==마우스가 올려진!!

 

<h1>go</h1>
<ul>
  <li><a href="#">동물</a>
      <ul>
          <li><a href="#">포유류</a></li>
          <li><a href="#">조류</a></li>
        </ul>
    </li>
   <li><a href="#">식물</a>
         <ul>
        <li><a href="#">과일</a></li>
        <li><a href="#">야채</a></li>-
      </ul>
   </li>
</ul> 

HTML 기본태그

ㅡ네비게이션 : 작업물이 네비게이션이다 하면 사용함  (메뉴관련)

nav>ul>li*2>a[href=#]{메뉴 아이템 $}    작성하기.

 

ㅡㅡㅡ실습

<h1>go</h1>
  <nav>
    <ul>
      <li><a href="#">"메뉴아이템1"</a></li>
      <li><a href="#">"메뉴아이템2"</a></li>
    </ul>
  </nav>

 

CSS

text-align:center; === 가지고 있느 자식에 text만 가운데 정렬 . 

display:inline-block; === 한줄에 여러개 보이는 효과 , 너비 값을 최대한 줄이는 효과

display:block;  ===나 혼자 다 쓰겠다.

/*노말라이즈*/ === 브라우저의 성의를 무시하는 것 (제로 에서 시작 )
nav, ul, li{
    list-style:none;
    padding:0;
    margin:0;
}
a {
    color:inherit;
    text-decoration:inherit;
}

ul li {
    display:inline-block; 
    background-color:gold;
}
ul {
  background-color:blue;
 /* text-align:center; 아래 인라인블록때문에 의미없음 삭제함 */
  border-radius:5px;
  padding:10px;
  display:inline-block;   //디스플레이 최소화
}

nav { 
    text-align:center;
} /*최상위 nav태그에서 위치 정렬*/

 

>>>>>CSS 풀다운메뉴 만들기

/* 서브메뉴들*/
ul ul {
  display:none;
} 
/*메뉴아이템 */
ul li:hover{
  background-color:grey;
}
/*서브메뉴처리*/

position:static;

 

 

 

CSS 노멀라이즈=초기값 주기

ex)

ul, li ,{

    list-style:none;

    padding:0;  = 박스의 안쪽 여백

    margin:0;

   }

 

dilsplay:inline-block; 글자화- 한줄에 여러개 -이 아이의 부모한테 줌

display:block; 한줄 다씀 

nav.top-menu  == nav 안에 클래스top-menu 만듦.

/*1차 메뉴 아이템*/
nav.top-menu > ul> li {