4/29 - 웹2 (7강)

4/29 -7강

position / hover

[position: static]

1. css의 속성중 하나이며 HTML 에서 요소가 배치되는 방식을 정해준다.
2. 기본값은 position: static이다.
3. 왼쪽 상단으로 정렬되며 한줄에 하나씩 오게 된다.

https://codepen.io/kkkge/pen/BaEgmRx

position: static

 

 

[position: relative]

1. 태그의 위치를 변경하고 싶을 때 position 속성을 relative로 설정할 경우,
원래 위치(position:static)를 기준으로 원래의 위치에서 벗어난 배치를 할 수 있다.
2. 요소의 위치 지정은 top, bottom, left, right 속성을 사용하여 요소의 원래 위치를 기준으로 상하좌우로 얼마나 떨어지게 만들지 정할 수 있다.

 

[position: absolute]

1. 가장 많이 사용되는 poition 속성이다. (relative와 같이 사용되기도 함)
2. absolute는 relative와는 다르게 상위요소를 기준으로 위치가 설정된다.
3. absolute가 적용된 태그는 static 상태 위치를 유지한다.
4. 위치를 바꿔주려면 위치 속성을 사용해야한다. ( top, bottom, left, right )
5. fixed와 absolute는 한가지 특징을 제외하고 동일한 특징을 가지고 있다.
6. absolute는 width: 0으로 작동한다.
  - 너비높이 기본값이 0으로 작동하기 때문에 형태 확인에 어려움이 있어 구현할 때 html에 글자를 작성한 상태로 시작
7. absolute는 html 구조상 자식엘리먼트로 인지되지만 좌표에서는 body 또는 relative를 기준으로 작동한다. 
  - relative는 absolute나 fixed가 대체할 수 있다.
8. static은 absolute나 fixed를 가두어놓을 수 없다. (부모역할 X)
9. relative는 static과 동일한 특징을 가지고 있지만 다른점은  absolute나 fixed를 가두어놓을 수 있다. (부모역할 O)
10. absolute는 너비높이 상속도 부모엘리먼트가 아닌 부모역할을 하는 엘리먼트에서 상속받는다.
11. absolute는 display영향을 받을 수 없다.

https://codepen.io/kkkge/pen/MWRMErX

position

 

 

[위치속성]

1. static을 제외한 나머지 속성의 위치조정은 top, bottom, left, right로 한다.
2. 위 4가지 값의 속성값은 부모역할을 하고 있는 엘리먼트를 기준으로 가진다.

 

 

---

[hover 이벤트]

1. 2차 메뉴를 만들 때 사용된다.
2. position과 함께 사용한다. (겹쳐서 생성하기 위함)
3. top-box와 s-box는 부모자식 관계여야한다.
  - 형제일 경우 너비가 맞지 않고 top-box에 s-box가 붙지 않아 top-box에서 커서가 벗어나면 2차메뉴가 사라져버리기 때문

https://codepen.io/kkkge/pen/zYXVELb

hover(부모와 자식)

 

https://codepen.io/kkkge/pen/jORjGQx

 

---

[배너이미지 위에 탑바 구현]

https://codepen.io/kkkge/pen/eYowezw

배너이미지 위에 탑바 구현