웹2 2

https://codepen.io/EONJENOG/pen/zYVEJbY

absolute 부모역할태그

[absolute]

- 상위태그가 전부 static 상태일 경우 body태그가 부모 역할을 한다.

- 가장 가까운 상위태그를 찾아 자식으로 활동한다.

- display를 사용할 수 없는 상태가 되고 부모역할은 할 수 있다.

 

[relative]

- display를 유지하면서 부모역할을 할 수 있다.

 

[부모역할]

- 위치속성 기준선

- 너비높이 상속 기준

 

https://codepen.io/EONJENOG/pen/poXWOmY?editors=1100

hover

https://codepen.io/EONJENOG/pen/mdZBGZB

마우스를 올리면 형태가 변화하는 absolute

 

 

 

---

[피코그램 구현]

드라이브 이동

 

css

- 높이는 안쪽 코드에 있을수록 좋다.

  ㄴ 바깥 코드는 높이를 상속받기 때문에

 

html / css

- menu-box에 마우스를 올렸을 때 2차 메뉴가 나타나야 하므로 menu-box의 자식 태그로 넣는다.

 

css

- menu-2에 absolute를 적용하는 이유

 

css

- menu-2에 absolute를 적용하면 처음에는 body가 부모가 된다. (다른 태그들은 모두 static 상태니까)

- 우리는 menu-2(2차메뉴)가 화면 전체 너비를 가지길 원하므로 top-bar에 position: relative; 코드를 적용한다.

- 또한 top-bar의 밑에 찰싹 붙어있길 원하므로 top: 100%; 를 적용한다.

 

css

- menu-box에 마우스를 올리지 않았을 때는 높이값이 0이어야 한다.

- transition을 걸때는 auto값을 사용할 수 없다. 무조건 커스텀을 해야 한다. [height: 0;]

- menu-box에 마우스를 올렸을 때 2차 메뉴의 높이 값이 358px;

 

 

- 어려운 hover와 absolute 구조를 먼저 짜고, 잘 작동되는지 확인한 후 주석처리하고 나머지 구조를 짜면 편하다.

 

 

html / css

- 1차 메뉴와 너비 값이 같아야 하므로 같은 너비값을 지정

- 높이 값은 menu-2 박스의 높이를 상속 받는다.

 

 

 

css

- flex-basis 까먹지 말기~

 

 

css

- text에 높이 값을 주고싶다면 박스의 높이를 지정하지 말고 line-height를 사용하자

  ㄴ 중앙정렬을 할 필요가 없다.

 

 

css

- css에 써놓고 필요한 곳에 찾아바꾸기