반응형 태그2 [HTML5] 간단한 상단메뉴 만드는 방법 오늘은 HTML 상단 메뉴를 만들어 볼게요~ 그리고 만든 메뉴에 마우스 오버를 하면 색이 칠해지것 까지 구현해보겠습니다. 일단 HTML코드를 작성해줍니다. HTML5 코드 메뉴1 메뉴2 메뉴3 HTML만 작성해서 확인하면 위의 모습입니다. 여기에 CSS3를 이용해야 원하는 결과가 나옵니다. CSS3 코드 nav{ width : 900px; margin : 0 auto; } nav ul{ list-style: none; border : 2px solid #cccccc; border-radius: 10px; height : 40px; } nav ul li{ float : left; margin-top: 10px; padding-right : 30px; height: 20px; } nav ul li a.. 2021. 10. 27. HTML5 기초-시맨틱 태그 사용하는 이유 & 종류 시맨틱 태그를 사용하는 이유는 세가지 정도가 있습니다. 첫번째는 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목인지, 어느부분이 메뉴이고 본문인지를 쉽게 알 수 있기 때문입니다. 그래서 글을 소리로 알려주는 기계(스크린 리더기 등)를 사용하는 시각장애인이 사이트의 구조를 소리로 구분할 수 있게 해줍니다. 두번째는 검색 엔진이 검색을 수행할 때에는 HTML 내에 있는 태그를 분석하는데, 태그들의 의미가 분명하다면 검색 엔진 입장에서 구분하기가 쉬워지기 때문입니다.(description, keywords, author, subject, classification 등의 정보를 표기할 수 있으며, 검색 엔진은 이런 정보를 적극적으로 활용합니다.) 세번째는 코드 가독성 및 유지보수가 쉬워지기.. 2021. 9. 26. 이전 1 다음 반응형
