[피코그램구현]
[가상 요소를 활용하여 중앙정렬하기]
https://codepen.io/EONJENOG/pen/poXdgGQ?editors=1100
- 가상요소를 menu-2에 적용한다.
- 가상요소는 자식요소로 작동하기 때문이다.
- 요소를 작성하지 않아도 content: ""; 는 꼭 작성해주어야 한다.
- menu-2의 앞과 뒤에 로고박스와 유저박스의 너비를 준다. (274px)
- 이 때 가상요소는 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
ㄴ 복습 3번 필수!!!
- 복습 코드펜
https://codepen.io/EONJENOG/pen/oNroxBW?editors=1100