프론트엔드/HTML (Markup Language)

HTML 메타 태그 중 Pragma 지시어 (Pragma directives) 란?

Pragma directives (Pragma 지시어) 란? 웹 브라우저에 특정 HTTP 헤더를 관리하는 방법에 대한 "지침(directives, instructions)" 을 제공하는데 사용된다. Pragma 지시문은 태그에서 http-equiv 속성을 사용한다. 웹페이지 동작에 상당한 영향을 미친다. Pragma 지시어를 이용한 캐싱 제어 예제 살펴보기 Pragma 지시어를 통해 클라이언트측 캐싱을 활성화 혹은 비활성화 할 수 있다. 개요 Pragma 의 내용을 "캐시 없음(no-cache)" 으로 설정하면 브라우저는 웹페이지를 캐시하지 않는다. 페이지에 액세스할 때마다 서버에서 페이지의 새 버전을 검색한다. HTML 에 Pragma 지시어 입력하기 HTML 의 섹션에 위와 같은 태그를 추가할 수 있..

스스로 닫히는, 닫지 않아도 되는 태그들 (self-closing tags)

스스로 닫히는, 닫지 않아도 되는 태그들 (self-closing tags) 명시적으로 형태로 닫을 필요가 없는 태그를 self-closing tags 라고 한다. empty tags, singleton tags 모두 같은 의미를 갖는다. 태그 내부에 텍스트나 컨텐츠를 갖지 않는 태그들이다. 자체적으로 닫아줘도 되지만, 브라우저는 동일하게 해석한다. 과 은 브라우저에겐 동일하게 보인다. 단, XHTML 에서는 self-closing tag 를 닫아주는 것이 규칙이다. self-closing tags 의 종류 여기 없는 것들은 deprecated 된 것들이다. : 줄넘김을 할 때 사용한다. : 이미지를 넣을 때 사용한다. : 입력창을 넣을 때 사용한다. : 메타 데이터를 넣을 때 사용한다. : 스타일시트나..

시멘틱 HTML (Semantic HTML, 의미론적 HTML, Semantic Markup) 이란?

시멘틱 HTML (Semantic HTML) 이란? 시멘틱 마크업 (Semantic markup) 이라고도 한다. 의미론적인 것에 좀 더 집중한 HTML 을 말한다. 단순히 눈에 보이는 것을 만들어놓는 것이 아니라, HTML 이 갖는 의미까지 고려한 HTML 이다. 웹페이지의 컨텐츠를 기계와 인간이 더욱 읽기 쉽게 만들어주는 HTML 작성 방식이다. 시멘틱 HTML을 구성해서 얻는 이득 검색엔진 최적화 (SEO, Search Engine Optimization) 를 해준다. 검색엔진 봇이 인식하는 HTML 태그의 퀄리티를 높여 로봇의 페이지 이해를 돕는다. 스크린 리더에 더 잘 읽힌다. 접근성이 더 좋아진다. 유지보수성이 좋아진다. 명확한 태그 이름을 통해 의도한 구조와 의미를 더 명확하게 만든다. 시멘..

HTML 메타 태그란? meta tag

메타 태그 메타 태그란 해당 HTML 페이지에 어떠한 내용이 들어있는지 미리 알려주는 것이다. 브라우저가 페이지를 해석하는데 도움도 주고, 검색엔진이 페이지를 읽을 때도 이 부분을 가져간다. 또한 SNS 에 공유할 때 나오는 썸네일 등도 이 부분에서 가져온다. 인코딩 정보 크롬과 같은 브라우저에서는 utf-8 을 사용하지 않아도 자동으로 인코딩을 고쳐주는 경우도 있다. 그러나 모든 사람이 크롬 브라우저만 사용하는 것은 아니므로 안정적인 동작을 보장해주기 위해서 위의 charset="utf-8" 을 적어주는 것이 좋다. 페이지의 저자와 내용 name 에 메타태그의 종류(name, description 등)를 입력하고, content 에 내용을 입력한다. og: 태그 og 태그는 Open Graph Data..

HTML 최상단 !DOCTYPE html 의 의미

개요 은 HTML 문서의 최상단에 작성되어야 한다. 브라우저가 문서를 렌더링 할 때 quirks mode (en-US)로 바뀌지 않도록하는 것이 유일한 목적이다. HTML 문서가 quirks mode 로 인식되면, 렌더링 과정에서 W3C 표준을 지원하지 않으므로 작성할 때 예상했던 결과와 다른 결과가 나올 수 있다. quirks mode 는 오직 옛날에 W3C 표준을 지키지 않은 HTML 문서들을 정상적으로 보여주기 위해 남아있는 호환용 모드이다. 파이어 폭스에서는 Page Info 에서 Render Mode 를 보여준다. 위의 Render Mode 항목이 Standards compliance mode 로 설정되어 있는 것을 볼 수 있다. 레퍼런스 MDN DocType 파이어폭스 Page Info Win..