웹2 3

[피코그램구현]

드라이브이동

 

 

[가상 요소를 활용하여 중앙정렬하기]

 

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

가상요소

 

css

- 가상요소를 menu-2에 적용한다.

- 가상요소는 자식요소로 작동하기 때문이다.

- 요소를 작성하지 않아도 content: ""; 는 꼭 작성해주어야 한다.

 

- menu-2의 앞과 뒤에 로고박스와 유저박스의 너비를 준다. (274px)

 

css: menu-2

- 이 때 가상요소는 inline 요소이기 때문에 아주 작게 나온다.

- 어차피 menu-2-box 와 정렬해 주어야 하기 때문에 flex-item으로 만들어 준다.

- menu-2에 패딩값을 적용해도 유연하게 뚫려있기 때문에 오른쪽 패딩값은 바깥으로 튀어 나간다.

  ㄴ box-sizing: border-box;를 적용한다.

 

 

---

[background]

background (대분류)

- background-color (중분류)

- background-image

 

[background-color 특징]

- 너비, 높이, 배경색 중 하나만 없어도 눈으로 형태를 확인할 수 었다.

- background-image 속성도 위 특징과 같은 특징을 가진다.

 

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

background-image

ㄴ 복습 3번 필수!!!

    - 복습 코드펜

 

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

absolute 중앙정렬