[웹1]240122-9일차(마켓컬리 상단바 제작 3)

 

https://codepen.io/limyena/pen/yLwXEZg

마켓컬리 상단바 제작 3단계

텍스트 속성 -> 상속

ㄴ텍스트 요소를 정렬할때는 텍스트를 감싸고있는 태그에 적용한다.

 

1. 내가 움직이고싶은거 눈으로 확인

2. html 확인

3. class확인

4. css 확인

5. 너비 확인

6. 코드 적기

 

 

높이속성을 한번밖에 사용하지 못한다면?

이렇게 해도 적용이 되지만 한큐에 해결할 수 있는 방법 ↓

탑바섹션에 heght:70px 컨테이너에 HEIGHT;100% 해주는 대신

컨테이너에 height:70px를 적용해주면 한번에 적용됨.

 

모든 태그는 높이가 AUTO일때 0으로 적용됨

(풍선처럼)

 

line-height는 center-box가 아닌 li항목에 적용

이유 -> line-height속성은 텍스트요소이기때문에 자식항목에 상속될 수 있기때문에  텍스트를 감싸고있는 작은항목에 적용.

 

border-radius: 8px; 모서리 둥굴게

padding: 10px 15px;   좌 : 상하 우: 좌우

 

같은항목안에서 각각 커스텀 하는 방법