## 3월 31일 프론트 엔드 5일차

###개념 - 개념 : position 속성 정리

 ###개념 - 개념 - top, left, right, bottom 

###개념 - 개념 : z-index 예제 

###개념 - 개념 : white-space:nowrap, 줄바꿈 금지

 ###개념 - 개념 : overflow-x:auto, 스크롤바 자동생성 

###개념 - 개념 : overflow-x:scroll, 스크롤바 무조건 생성 

###개념 - 개념 : overflow-x:hidden, 넘치는 내용 숨김

 ###개념 - 개념 : text-overflow:ellipsis, 넘쳐서 숨겨지는 텍스트 ... 처리(5분완성)

-이미지-

section{
width: 400px;
border:10px solid red;
}
section > img {
display:block;
width: 100%; //부모의 너비 기준에 변화

}

position은 static이 기본값 겹치지 않는다 ->사람
absolute 하면 겹쳐짐,독립적인 무언가. top left로 좌표이동 ->유령

부모에게 position:relative;를 주면
부모의 범위를 벗어나지 못한다

body,ul,li 노말라이징 -패딩 0 마진 0 리스트스타일 논

TODO

<h1>완료 : 메뉴아이템에 마우스를 올렸을 때 자식인 텍스트(a)의 배경색과 글자색을 적절하게 변경해주세요.</h1>
<h1>요구 : -</h1>

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

/* css 부분 */

/* 노말라이즈 => 모든 작업 전에 한번 */
/* 노말라이즈 */
ul, li {
  /* margin을 없앤다. */
  margin:0;
  padding:0;
  list-style:none;
}

/* a를 노말라이즈 합니다. */
a {
  /* 이렇게 하면 나중에 문제가 됩니다. */
  /* inherit => 나는 개성이 없어요. => 나는 부모의 속성을 그대로 물려받겠습니다. */
  color:inherit;
  text-decoration:none;
}

.menu-1 {
  text-align:center;
}

.menu-1 > ul {
  background-color:#dfdfdf;
  display:inline-block;
  padding:0 10px;
  border-radius:5px;
}

.menu-1 > ul > li {
  display:inline-block;
  width:200px;
}

.menu-1 > ul > li > a {
  padding:10px;
  /* display:inline 요소에는 margin, padding, width, height가 일반적인 방식으로 적용되지 않는다. */
  display:block;
}

/* 마우스가 올려진 메뉴아이템의 자식인 a */
.menu-1 > ul > li:hover > a {
  color:white;
  background-color:black;
}

a 노말라이징 -텍스트 데코 논 -컬러 인헤릿

1차메뉴 작성
-.menu-1 ul
백그라운드 컬러
-.menu-1 > ul
디스플레이 인라인블럭
패딩 0 20px
곡률 5px

-.menu-1 ul > li:hover > a
백그라운드 컬러
컬러

2-2차 메뉴 나오게하기
-2차메뉴 정렬 탑,레프트,위드 포지션
-2차메뉴 가두기
-2차메뉴 유령화

3-3차 메뉴 나오게 하기
-3차메뉴 구별짓기
-3차메뉴 옆에 나오기
-3차메뉴 마지막꺼 왼쪽에 나오기