저번에 이미지를 누르면 다른 html로 이동하는 a태그를 사용했던 html위에 네비게이션을 만들었다. 네비게이션에 :hover를 이용하여 마우스를 갖다대면 해당 영화 포스터가 나오게 끔 만들었다. 먼저 네비게이션의 틀을 container, navi, ul, li 순으로 만들었다 container 안에 마블스튜디오로 배경을 넣었고 background : cover; 로 다 덮고 크기를 조절했다. 다음은 ul안에 li를 작성하면 글자앞에 ● 기호가 붙어있다. 이를 없애기 위해 list-style:none; 적용 li에 float:left를 적용하여 가로로 1자를 만들어 줬고 position을 통해 포스터가 겹치지 않게끔 자리를 잡아줬다. 다음 a태그를 이용해 네비게이션을 구성했는데 위 같이 누르기전 파랑색,..

1. 시맨틱(Semantic)태그 1-1. 시맨틱(Semantic)태그란? 시맨틱(semantic)의 사전적 의미는 '의미론적' 이다. 말그대로 시맨틱태그란 의미가 있는 태그이다. 예를 들면, 태그는 의미가 없는 non-semantic 태그이고, , 와 같은 semantic 태그는 의미가 있는 태그이다. 시맨틱태그는 HTML5부터 채택된 방식으로 하나의 웹사이트를 여러구역으로 나누어 작성하는 방식이다. 다른 부분은 필요에 따라 선택형 구역이지만 되지만 머리말인 'header'와 꼬리말인 'footer'는 필수적인 구성부분이다. 네이버를 예로 들자면 1-2. 시맨틱태그의 장점은? (1) SEO(Search Engine Optimization) - 검색엔진 최적화 검색엔진은 HTML에 있는 태그를 분석하는데..