웹프로그래밍 2

vs code으로 html 기본구조 자동완성하기

html 기본구조를 매번 프로그래밍 할 때 마다 코드를 작성하는 것은 비효율적이라는 생각이 많이 들었다. 그래서 기본구조를 자동적으로 완성할 수 있는 방법이 없을까 찾아보았다. 방법은 생각이상으로 간단하다. 1. 빈 html 파일을 만든다. 2. 화면과 같이 !를 입력하면 도움도구가 생성되는데 바로 Tab을 누른다. 3. 그러면 다음과 같이 html기본구조가 자동적으로 생성된다. lang="en" 부분을 lang="ko"로 변경해준다. (자주 쓰는 언어에 관련된거라 보통 한국어로 적을 것이기 때문에 언어를 바꿔주는 과정이다.)

시맨틱 태그(Semantic tag)

Semantic은 '의미론적'이라는 뜻을 가진 단어이다. 의미를 가지는 태그로, 나눠진 구획의 기능을 태그 이름만으로도 이해할 수 있다. Semantic의 장점 1. SEO 최적화에 유리. (SEO: Search Engine Optimization) 검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다. 2. 웹 접근성에 효율적 일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다. 3. 유지보수의 용이성 많은 div사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며 해당 ..

728x90