요즘 XE를 공부하면서 다른 분들이 올려주신 레이아웃을 풀어서 공부하고 있는데요.
html파일들을 보다가 이해가 안되는 몇가지들이 있어서 질문을 드립니다.
이것저것 책도 혼자 사서 보고 하지만 잘 이해가 가지 않거나, 책에서 보지 못한 명령어들이 간혹 보여서 어렵기만 합니다.
꾸준히 해야할텐데, 이 문제부터 꼭 답변해주시기 바랍니다.

우선 #gnb li.on a{  font-weight:normal; color:#ffffff; } 이란 부분입니다.
제가 CSS를 대충 찾아보니 앞에 #부분은 ID스타일이라고 설명되어서 이해를 할 수 있겠는데 뒤에 li.on a 부분이 잘 이해가 안갑니다.
물론 명령어 li가 무엇을 의미하는지는 알지요.
하지만 정말 뒤에 .on a 부분은 모르겠습니다.
전체적으로 위에 있는 명령어 부분을 풀어서 설명해주셨으면 합니다.
많이 낯서네요.

그리고 바로 위에
#gnb li a:hover,
#gnb li a:focus { font-weight:normal; color:#ffffff; }
라는 명령어도 있더라고요.
위에 a:hover라는 명령어는 아마 마우스포인터를 링크위에 올려놓았을 때의 명령을 하는 것인텐데..
그 아래 a:focus 명령어는 처음 보는 것입니다.
좀처럼 인터넷을 검색해봐도 친절하게 설명해주는 곳이 없더군요.
답변 부탁드립니다.

요즘 레이아웃 중에서도 메뉴 부분을 공부하고 있는데 좀처럼 쉽게 이해가 되는 것들이 없습니다.
계속 들여다보고 찾아가다보니 아주 조금씩은 더디에 알아가는거 같은데 계속 답답한 요즘이네요.
그래도 그냥 태그들 붙여서 만들기보다 기초부터 좀 이해하고 싶다는 욕심은 남아있습니다.
그럼 부탁드릴게요^^