지난 번 헤더 상단의 메뉴 부분까지 한 작업에 이어 visual 부분의 코드도 작성한다.
#HTML
id="visual"의 div가 크게 감싸고 있고, 그 안에 img태그와 자손 div인 id="visual_menu"를 만든다. 그 자손 div 안에 ul태그를 만들고 li를 작성한다.
#CSS
첫 번째로 전체적인 id="visual"의 div의 넓이와 높이를 설정해준다. 100% 비율로 맞췄다. 개발자 도구를 활용해 실제 홈페이지 사진 높이를 참조했다.
id="visual_menu"를 보면 position이 relative, z-index 등 새로운 속성들이 등장한다. 위치 설정과 관련된 속성들이다. bottom 속성은 html전체의 밑 끝점부터 값만큼(여기서는 50px) 해당 요소를 밀어내 위치시킨다. background 속성에 쓰인 rgba함수는 괄호안에 각각 red, green, blue, alpha의 값을 넣어 색을 정한다. alpha값은 투명도를 나타내며 0.0~1.0 사이의 값을 지닌다. 0.0에 가까울수록 투명해지며, 1에 가까울 수록 불투명하다. position속성의 값을 relative로 주면 상대적으로 위치가 설정되는데 여기서는 img태그가 상대적으로 밑에, div태그가 위에 자리하게 해 위에 투명하게 띄운 듯한 효과를 낸다.
margin속성을 활용해 요소를 가운데로 정렬할 때, 요소에 넓이와 높이값을 주어야 한다. 안 그러면 적용이 안 된다.
a태그에 display속성 - inline-block값을 주지않으면 안 되는 이유는 a태그가 inline 속성을 가지고 있기 때문이다. inline-block값을 줘 padding값이 들어먹게 해야 비주얼메뉴를 제대로 따라 만들 수 있다. box-sizing 속성은 padding을 줄 때 같이 주라고 했는데 아직 이유는 모른다.
a:hover 처럼 선택자 옆에 :어쩌구 처럼 입력하는 걸 Pseudo-Class Selector, 유사 속성 선택자라고 한다. 그 중 hover는 요소 위를 둥둥 떠다닐 때 특정한 효과를 나타내도록 한다.
