03/29 HTML/CSS 아이템 스타일링

 

 

메인메뉴 아이템의 스타일 적용하기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

왼쪽 패딩공간 24px안에 12px만큼 가운데에 반복없이 배경이미지 적용

 

 

 

 

잘 안보이지만 구분자 배경이미지가 입혀졌다

 

 

맨 앞의 구분자 배경이미지는 없애주기

 

 

 

 

 

 

developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo-classes - CSS: Cascading Style Sheets | MDN

 

Pseudo

가짜 클래스 -> : 

가짜 엘리먼트 -> : :

 

목록에서 사용하는 가짜 클래스명 

첫번째 친구는 -> :first-child

 

 

 

그래서 굳이 class명 주지 않아도 되겠다

 

 

0번째라는 개념 없이 1부터 시작한다 -> 위의 코드와 같은 결과

 

 

 

 

 

 

마우스가 올라갈때 마우스가 올라간 상태에서만 스타일링을 주고 싶다(액션) -> pseudo 클래스 사용

 

a태그에 스타일링(액션)

 

* 파란색 언더라인 (link 상태)

* visited했던 녀석은 주황빛?으로 색이 바뀌게 되어있다 (active 상태)

 

 

* hover 

 

a태그에 hover 적용 -> "강좌선택" 위에 마우스 올려본 상태이다

 

 

 

 

 

 

ul의 크기가 여백까지 차지하고 있다 -> 오른쪽 사진처럼 컨텐츠의 크기만큼만 차지하도록

 

컨텐츠 블럭 자체는 다른 녀석에게 영향을 주는 크기면 안된다

 

 

 

 

 

 

member-menu 스타일 적용해보기

 

 

 html부분 수정

 

 

 

그렇게 완성된 헤더부분

 

 

 

main 안의 경로부분도 바꿔주자

 

breadcrumb

 

icon-path.png

icon home

left padding 20

구분자 중간 패딩 10