본문 바로가기

Programing/HTML15

HTML5 기본 템플릿 코드 <body> 아래에는 태그 내에 작성하는 태그들에 대해서 설명하겠다. 기본 구조 관련 태그 : 페이지 또는 섹션의 머릿말 (로고, 내비게이션 등) : 내비게이션(메뉴) 영역 : 페이지의 메인 컨텐츠 : 논리적으로 그룹화된 콘텐츠 블록 : 독립적인 컨텐츠 (뉴스, 기사, 블로그 글 등) : 보조 정보 (광고, 사이드바 등) : 페이지 또는 섹션의 바닥글 (저작권, 연락처 등)위 까지는 시멘틱 태그(Sementic Tag)라고 말한다.시멘틱 태그란 별다른 기능을 하는 것은 아니지만 "이 안에는 이런 내용이 있다"라는 것을 검색 엔진 봇에게 알려주는 것으로, html 문서를 봇이 더 쉽게 파악할 수 있게 도와주는 기능을 한다.비슷한 태그로 가 있는데, 구획을 나누는 태그로 기능을 하진 않지만 코드 내에서 영역을 구분 짓.. Programing/HTML 2025. 3. 4.
HTML5 기본 템플릿 코드 <head> 기본 템플릿 코드 This is a simple HTML + CSS template!  HTML:5 버전의 기본 템플릿은 보통 위와 같다.여기서 meta 태그는 일부러 몇 개 더  추가한 것이다.하나씩 내용을 살펴보겠다. 별 다른 기능을 하진 않는다.'이 문서는 HTML:5로 이루어진 문서'라는 것을 선언하는 것이고, 웹 브라우저가 문서를 잘못 읽어 개발자의 의도와 다르게 렌더링 하지 않도록 도와준다.닫는 태그는 필요 없다. ...이 문서의 시작과 끝을 알리는 것이 태그이다.이 html 태그의 주요 속성은 lang이 있고, 어떤 언어로 이 문서가 작성되었는 지를 선언하는 역할을 한다. 값으로는 en, ko 등이 있다.이를 어떤 것으로 작성해도 렌더링 하는 데는 문제가 없지만, 한국인이 타.. Programing/HTML 2025. 2. 6.
모던 HTML의 이해 들어가기에 앞서codesandbox.io에 접속하면 에디터가 없는 환경에서도 바닐라 자바스크립트 뿐만 아니라 리액트 등의 라이브러리까지 웹에서 활용하며 간단한 학습을 할 수 있다. Emmet에서 HTML5 기본 템플릿 생성하기대부분의 코드 에디터에서는 HTML 기본 템플릿을 만들어준다.이것을 Emmet(에밋)이라 한다.html:5를 입력하고 tab 또는 enter를 입력하면 위와 같은 템플릿이 자동으로 생성된다.HTML5 기본 구조의 의미문서가 HTML5의 표준을 따르고 있음을 명시적으로 표시하는 것이다.특별한 기능은 없다. 닫는 태그도 필요 없다.이 요소는 웹 브라우저가 문서를 해석할 때 HTML5 문서를 기준으로 하여 정확하게 읽을 수 있도록 도움을 준다.HTML 문서에서 가장 최상위 요소이며, 문서.. Programing/HTML 2025. 1. 20.
HTML이란? 웹이 보여지는 기본 원리우리는 브라우저를 통해 웹 사이트에 접속하고, 개발자가 미리 코드로 작성해 놓은 웹 페이지의 묶음을 쉽게 시각화하여 보고 이용한다.우리가 눈으로 보는 웹 페이지는 가장 먼저 HTML이라는 코드로 작성되어 있다.굵은 글씨꺽쇠 괄호 안에 미리 지정된 코드를 넣고, 슬래시로 끝나는 지점을 닫으면서 서식을 지정하는 것이다.그런데 저런 형태는 단순히 텍스트를 보여주기만 하는 형태이다. 위의 예제인 볼드 태그도 최신 마크업에서 등장한 것이고, 원시 웹에서는 정말 기본적인 텍스트만 렌더링 해주는 모습이었다.메모장을 생각해보면 우리가 메모장에 텍스트를 쭉 나열하는 것이 바로 원시 웹의 마크업 언어이다. 그리고 우리가 이것을 텍스트 편집기나 word 같은 프로그램으로 글자 크기도 바꾸고, 이미지.. Programing/HTML 2025. 1. 15.
버튼에 새로고침 기능 넣기 버튼 Programing/HTML 2024. 2. 29.

티스토리툴바