[HTML]기본 구조, 폴더 위치, 주석

✨ UI/💗 HTML

[HTML]기본 구조, 폴더 위치, 주석

뉴이 NUEY 2024. 12. 20. 00:23

index.html
: 프로젝트의 시작페이지

위치는 프로젝트 내 src-main폴더-webapp 또는 resource 폴더 안에 넣어둡니다. (프로젝트마다 다름)
프로젝트를 시작하면 index.html에서부터 시작합니다.
static은 정적인 페이지를 모아두고 (index.html 포함)
templates 에는 jsp나 thymeleaf등 뷰 템플릿으로 만든 페이지들을 모아둡니다.
보통 index.html로 시작하는 경우는 없고 다른 페이지로 포워딩해서 시작페이지로 사용합니다.

개발자 도구로 열면 보이는 css, html, script는 모두 webapp이나 resource폴더에 모아둡니다.
데이터를 다루는 숨겨진 코드 java코드는 따로 모아 둡니다.

기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>타이틀명</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
: 웹브라우저에 HTML5 문서라는 것을 알려줍니다.
<html lang="ko"> : 문서의 루트 요소로, 언어를 한국어로 설정합니다.
- <head> : 메타데이터와 문서 제목 등을 모아놓은 곳입니다.
  - <meta charset="UTF-8"> : 문서의 문자 인코딩을 UTF-8(표준)로 설정합니다.
  - <title>: 문서의 제목을 설정합니다. 브라우저 탭에 표시됩니다.
<body>: 우리가 보는 화면의 내용은 모두 여기에 들어갑니다.
- <header> : 주로 메뉴란이 들어갑니다.
  
  헤더란 부분
- <footer> : 사이트맵, 저작권, 회사소개 같은 내용이 들어갑니다.
  
  네이버의 footer란

🌟 바디란에 들어가는 <header> 와 <footer>는 필수가 아닙니다. 그 외에는 필수요소.

✨ <head> 포함 요소
<meta> : 문서의 기본 정보 등을 정의. (UTF-8로 사용하기)
<title> : 문서의 제목을 정의. (탭 이름에 뜨는 거)
<script> : javascript 등을 정의
<style> : css 정의
<link> : 외부 문서를 연결할 때 정의

주석

🌟 단축키 : Ctrl + /

F12

저작자표시 비영리 변경금지 (새창열림)

'✨ UI > 💗 HTML' 카테고리의 다른 글

[HTML]테이블 만들기 & 셀 병합 (1)	2024.12.22
[HTML]목록태그 <ul> <ol> <dl> (0)	2024.12.21
[HTML]Entities (&nbsp 공백, &quot 큰 따옴표" 등) (0)	2024.12.21
[HTML]태그 종류. 블록 & 인라인 요소 (1)	2024.12.21
[HTML]html이란? (0)	2024.12.16