6. 전체 메뉴 수정

							<ol>
                                <li><a href="#">HTML 태그(Tag)</a></li>
                                <li><a href="#">블록 요소/인라인 요소</a></li>
                                <li><a href="#">DTD 선언</a></li>
                                <li><a href="#">언어 속성 설정</a></li>
                                <li><a href="#">HTML </a></li>
                                <li><a href="#">HTML </a></li>
                                <li><a href="#">특수문자</a></li>
                                <li><a href="#">하이퍼 링크</a></li>
                                <li><a href="#">HTML </a></li>
                                <li><a href="#">HTML </a></li>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">HTML</a></li>
                            </ol>

1. 여기서, ol태그의 숫자를 어떻게 없애나?

 

Unordered List <ul>이나,

Ordered List <ol>의 하위에 속한

List <li>에 기호나, 숫자를 표시 되지 않게 하는 CSS 스타일 list-style:none 속성

"list-style: none" CSS를 추가하면, unordered list (<ul>) or ordered list (<ol>)의 bullet or number제거됨

 

---

2. 팁:

 

1. 태그전체에 css를 적용한 경우 따로 class 또는 id를 선언하고 적용시킬 경우 적용이 안된다.

    예) #top dl {font-size:11px; width:90px;  margin:12px 1px 0 0; border:1px solid #4D6EBB;}

         .test {width:39px; height:18px; border:none; margin-right:109px; margin-top:13px;}

 

       이런경우

       <div id="top">
          <h2>탑메뉴</h2><hr>
          <dl class="test">

          </dl>

        </div>

        ==> dl태그의 class 적용 안됨!

 

       #top dl {font-size:11px; width:90px;  margin:12px 1px 0 0; border:1px solid #4D6EBB;}

       #top dl.test {width:39px; height:18px; border:none; margin-right:109px; margin-top:13px;}

 

       이런경우

       <div id="top">
          <h2>탑메뉴</h2><hr>
          <dl class="test">

          </dl>

        </div>

        ==> dl태그의 class 적용 됨!

 

2. 직접 태그안에 style="" 할 경우는 무조건 적용됨!

---

3. 팁:

  

* 전체 메뉴 */
.nav {overflow: hidden; padding: 30px 0;}
.nav > div {float: left; width: 40%;}
.nav > div:last-child {width: 20%;} /* ie9부터 사용 가능 */
.nav > div.last {width: 20%;}
.nav > div h3 {font-size: 18px; color: #25a2d0; margin-bottom: 4px;}
.nav > div ol {overflow: hidden;}
.nav > div ol li {float: left; width: 50%;}
.nav > div.last ol li {width: 100%;}
.nav > div ol li a:hover {text-decoration: underline;}

이런식으로 >  이게 가능한지는 처음 알았다.

 

---

4. overflow 사용시 주의사항

 

overflow사용시에 무조건 상위태그의 높이값이 주어져있어야만 한다. 기억!

너비도 주어져야한다.

 

---

5. float:left를 작성시 주의사항

 

반드시 width 값이 주어져야만 한다.

 

---

6.＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot;의 의미?

 

&nbsp;

” ” : 공백(스페이스 한 칸)을 의미
 

&lt;

부등호(<)
 

&gt;

부등호(>)
 

&amp;

앰퍼샌드(&) 기호
 

&quot;

쌍따옴표(“)
 

&#035;

sharp(#)
 

&#039;

따옴표(‘)

 

---

7. display:float은 블록레이아웃(div)같은 것에만 적용이 된다.

인라인 에는 적용이 안된다..!

 

---

8. div:nth-child()

 

https://thrillfighter.tistory.com/575

css nth-child 선택자 외 first-child, last-child 선택자 정리

https://aboooks.tistory.com/251

:first-child, :last-child 선택자

 

참조할것..!

---

 

9. div:last

 

마지막으로 일치하는 요소 찾기(":last")

아래 예제는 .top > ul > li 요소중 마지막 요소를 가져옵니다.

 

				$(".top>ul>li:last").css("border","1px solid #ff0000")

 

결과

 

---

10. float : left 로 인한 영역깨짐(height:0이 되는 경우의방지법)

/*float : left 로 인한 영역깨짐(height:0이 되는 경우의방지법)*/

/* 1. 깨지는 영역에 똑같이 float:left를 사용한다. 결국 모든 박스에 float:left를 사용하게 된다.  */

/*2. float의 성질을 차단하는 clear:both;를 사용한다.--> 어떤 영역이 깨졌는지 찾기가 어렵다. */

/*3. float을 사용한박스위의 상위박스한테 overflow:hidden을 사용한다 --> 현재는 제일 많이 사용.*/

/*4. clearfix를 사용합니다. --> 가장많이 쓰임 */

.nav{overflow: hidden;}

.nav  > div{float:left; width: 40%;}

 

--> 항상 div 블록박스에 float:left를 작성한 이후 그 상위 부모박스한테 overflow:hidden을 쓰는 연습을 하자..!