HTML
HyperText Markup Language
확장자 : .html, .htm
HyperText : 문서를 서로 연결해주는 링크
Markup : 태그를 이용하여 웹 브라우저에 내용(텍스트, 이미지, 영상 등)의 위치를 표시
웹편집기(메모장, VS Code 등)에서 마크업 형태로 작성
웹 브라우저(Chorome, Edge, FireFox 등)에서 인식하여 표시
기본구조
'!'입력 후 엔터치면 기본으로 생성되는 구조
<!DOCTYPE html>
<html lang="en"> <!--시작태그-->
<head> <!--문서에대한 설명-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> <!--반응형 웹을 만들기위한 메타 데이터-->
<title>Document</title>
</head>
<body> <!--실제 화면에서 보여지는 부분-->
<h1>안녕하세요</h1>
</body>
</html> <!--종료태그-->HTML에서는 대소문자를 구별하지 않지만,
<!DOCTYPE html> 의 경우에는 주로 대문자를 사용한다.
<head> ~ </head>~ 사이에 작성된 메타데이터들은 화면에 표현되지 않는다.
HTML Elements
HTML 요소는 시작 태그, 일부 내용 및 끝 태그로 정의
시작 태그에서 끝 태그까지의 모든 것.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- html 주석 -->
<!-- html 요소 -->
<!-- 시작태그와 내용, 종료태그로 구성됨-->
<h1>Header 1 Tag</h1>
<!--<h1> : 시작태그 / Header 1 Tag : 내용 / </h1> : 종료태그-->
<p>This is Content</p>
<!--빈 요소 , 빈 요소에는 끝 태그가 존재하지 않는다.-->
<!--내용을 포함할수 없거나, 포함하지 않을때 시작태그에서 바로 종료하는 태그-->
<br /> <!--줄바꿈-->
<hr /> <!--구분선그어주는것-->
<!--<div>Division</div>--> <!--공간을 구분하는 요소,
CSS스타일을 지정해줄때 사용-->
<!--<div />--> <!-- 빨간줄이 뜨지만 바로 종료할수 있다.-->
<!-- 종료 태그를 지정하지 않을때-->
<h1>Header Tag 1
<p> This is Content
Header Tag End
<!-- 원치 않는 결과를 발생시킬수 있음-->
<!--그러므로 종료태그는 필수로 작성해야함--> 
p부분에 해당하는 영역까지 h1으로 지정되서 글자가 크게 표시된다.
위의 Header 1 Tag 부분과 구별된다.
<!-- HTML 문서에서 줄바꿈을 한다고 해서 -->
<!-- 웹 브라우저에서도 줄바꿈이 이뤄지지는 않는다!-->
<p>안녕하세요
하이입니다</p>
<p> 안녕하세요 <br> 하이입니다</p>
<!--HTML 태그는 대소문자를 구분하지 않는다-->
<P>대문자 단락입니다</P>
<!-- XHTML 에서는 엄격히 대소문자를 구분하기 때문에-->
<!-- 소문자로 태그를 작성하는 습관이 필요하다-->
<!-- <>를 문자로 표현할땐 < >으로 표현-->
<h1><div></h1> <!--태그자체를 문서에 표현해두기-->
</body>
</html>
input 태그의 경우 (내용 입력받는 태그) 빈태그로 사용하게 된다
HTML은 대소문자를 구분하지 않음 단, XHTML과 같이 엄격한 문서 유형에 대해서는 소문자를 요구
(엑셀기반의 경우 대소문자 구분 요구하므로 보통 다 소문자로 작성한다)
HTML Attribute
- 모든 HTML 요소는 속성을 가질 수 있다.
- 속성은 요소에 대한 추가 정보를 제공
- 속성은 항상 시작 태그에 지정
- 속성은 일반적으로 name=”value”와 같은 이름/값 쌍으로 제공
HTML에서 소문자 속성을 권장, XHTML과 같은 더 엄격한 문서 유형에는 소문자 속성을 요구한다.
HTML로 따옴표를 사용하는 것을 권장, XHTML과 같은 더 엄격한 문서 유형에 대한 따옴표 사용을 요구한다.
HTML에서는 속성값 주위에 큰따옴표를 붙이는 것이 가장 일반적이지만 작은따옴표를 사용 가능하다.속성 값 자체에 큰따옴표가 포함되어 있는 경우 작은따옴표 사용가능하다.
<p title="'2023 프로야구 우승' 롯데 자이언츠">
<p title='"2023 프로야구 우승" 롯데 자이언츠'>
<!-- 속성 값 자체에 큰 따옴표가 포함 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute</title>
</head>
<body>
<!--HTML 속성-->
<!-- HTML 요소에 추가적인 설명 혹은 설정을 부여할때 -->
<!-- 속성은 key="value"형태로 지정 -->
<!-- 속성은 반드시 시작태그에 작성을 해줘야한다-->
<input type="text" /> <!--빈태그라서 바로 닫아줘야한다-->
<br />
<input type="password" />
<h1 title="속성연습"> 속성 연습 </h1>
<!--속성의 key는 대소문자를 구분하지 않는다-->
<!-- 하지만 XHTML은 엄격한 규율을 따르기때문에
소문자로 작성하는 습관을 가져야함-->
<h1 TITLE="속성연습">속성 연습</h1>
<!-- 속성의 value는 따옴표가 없어도 된다-->
<!-- 하지만 XHTML은 엄격한 규율을 따르기 때문에
따옴표를 작성하는 습관을 가져야한다-->
<!-- 따옴표를 지정하지 않으면 띄어쓰기같은 표현을 할 수 없다-->
<h1 title=속성 연습>속성 연습</h1>
따옴표로 묶어주지 않아서 띄어쓰기를 인식못해 '속성'까지만
속성에 포함된걸 볼수 있다.
<!-- a 태그의 href 속성-->
<!-- 링크의 이동경로를 지정하는 속성-->
<a href="https://www.naver.com/">네이버</a> <!--절대경로-->
<a href="/html-elements.html">요소 설명</a>
<!-- 파일이 있는 폴더 지칭 : / , 현재 위치하고 있는 폴더 : ./ -->
<a href="/elements/html-elements.html">요소 설명</a>
<a href="../elements/html-elements.html">요소 설명</a>
<!-- ../ 존재하고 있는 폴더의 상위로 이동-->
<!-- image 태그의 src 속성-->
<br />
<img width="200" height="200" src=
"https://th.bing.com/th/id/OIP.E3IHlLGTkpsd-
PS5AJsZDQD6D6?pid=ImgDet&rs=1" /> <!--절대경로-->
<img width="200" height="200" src="./sun.png" /> <!-- 상대 경로 -->
</body>
</html>
상대경로와 절대경로
HTML에서 절대경로와 상대경로
HTML에서는 파일의 경로를 나타내는 두 가지 방법이 있습니다.
바로 절대경로(Absolute Path)와 상대경로(Relative Path)입니다.
절대경로(Absolute Path):
절대경로는 파일이나 디렉토리가 웹 서버 상에서의 완전한 경로를 나타냅니다. 이는 파일이나 디렉토리의 전체 경로를 나타내기 때문에 웹 페이지가 어떤 디렉토리에 위치하든 상관없이 항상 정확한 위치를 참조할 수 있습니다. 절대경로는 "http://" 또는 "https://"와 같은 프로토콜로 시작하며, 도메인, 디렉토리 경로, 파일명 등을 모두 포함합니다. 예를 들면 다음과 같습니다:
상대경로(Relative Path):
상대경로는 현재 웹 페이지의 위치를 기준으로 파일이나 디렉토리의 경로를 나타냅니다. 따라서 웹 페이지가 어느 디렉토리에 위치하는지에 따라 경로가 상대적으로 결정됩니다. 상대경로는 프로토콜이나 도메인을 포함하지 않으며, 현재 디렉토리를 기준으로 상대적인 위치를 표시합니다. 예를 들면 다음과 같습니다:
images/image.jpg
(현재 디렉토리에 있는 images 디렉토리의 image.jpg 파일)
../images/image.jpg
(상위 디렉토리에 있는 images 디렉토리의 image.jpg 파일)
상대경로는 웹 페이지의 위치에 따라 다르게 작동하므로, 웹 페이지를 이동시킬 때마다 파일의 경로를 수정할 필요가 없다는 장점이 있습니다. 하지만 웹 페이지와 파일의 상대적인 위치를 정확하게 이해하고 사용해야 합니다.
상대경로는 "./" (현재 디렉토리)와 "../" (상위 디렉토리) 등의 특수한 표기법을 사용하여 표시될 수 있습니다.
이러한 절대경로와 상대경로는 HTML에서 이미지, CSS 파일, JavaScript 파일 등의 리소스를 참조할 때 사용되며, 웹 페이지의 파일 관리와 링크 설정에 중요한 역할을 합니다. 따라서 HTML 개발 시에는 절대경로와 상대경로를 정확하게 이해하고 사용하는 것이 중요합니다. 예를 들어, 웹 페이지의 이미지를 표시할 때 이미지 파일의 위치에 따라 절대경로나 상대경로를 사용하여 경로를 지정해야 합니다
본인기반 상대경로, 루트기반 상대경로
HTML에서의 상대경로에는 두 가지 타입이 있습니다:
본인기반 상대경로와 루트기반 상대경로입니다.
본인기반 상대경로(Self-relative Path):
본인기반 상대경로는 현재 웹 페이지의 위치를 기준으로 파일이나 디렉토리의 경로를 나타냅니다. 따라서 현재 웹 페이지가 위치한 디렉토리를 기준으로 상대적인 경로를 표시합니다. 본인기반 상대경로는 "./" 또는 생략된 경로를 사용하여 표현될 수 있습니다. 예를 들면 다음과 같습니다:
./images/image.jpg
(현재 웹 페이지와 같은 디렉토리에 있는 images 디렉토리의 image.jpg 파일)
images/image.jpg
(현재 웹 페이지와 같은 디렉토리에 있는 images 디렉토리의 image.jpg 파일)
루트기반 상대경로(Root-relative Path):
루트기반 상대경로는 웹 서버의 루트 디렉토리를 기준으로 파일이나 디렉토리의 경로를 나타냅니다. 이는 웹 서버의 루트 디렉토리부터 시작하여 파일의 절대적인 경로를 표시합니다. 루트기반 상대경로는 "/"로 시작하여 표현될 수 있습니다. 예를 들면 다음과 같습니다:
/images/image.jpg
(웹 서버의 루트 디렉토리에 있는 images 디렉토리의 image.jpg 파일)
루트기반 상대경로는 웹 서버의 루트 디렉토리를 기준으로 하기 때문에 웹 페이지가 어떤 디렉토리에 위치하더라도 동일한 경로를 참조할 수 있어 유용합니다. 그러나 웹 서버의 루트 디렉토리가 변경되면 경로를 수정해야 할 수 있으므로 유의해야 합니다.
이러한 본인기반 상대경로와 루트기반 상대경로는 HTML에서 이미지, CSS 파일, JavaScript 파일 등의 리소스를 참조할 때 사용되며, 웹 페이지의 파일 관리와 링크 설정에 중요한 역할을 합니다. 따라서 HTML 개발 시에는 본인기반 상대경로와 루트기반 상대경로를 정확하게 이해하고 사용하는 것이 중요합니다. 예를 들어, 웹 페이지의 이미지를 표시할 때 이미지 파일의 위치에 따라 상대경로를 사용하여 경로를 지정해야 합니다.
HTML Attribute 종류
href 속성
a 태그 : 하이퍼링크 정의
href : 링크가 다음 페이지로 이동하는 URL을 지정
<a href="https://www.naver.com/">네이버</a> <!--절대경로-->
<a href="/html-elements.html">요소 설명</a> src 속성 / width와 height 속성
img : 이미지를 HTML 페이지에 삽입하기 위해 사용
src : 표시할 이미지에 대한 경로( URL)를 지정
width와 height : img태그에서 태그에서 이미지의 폭과 높이(픽셀 단위)를 지정
<img width="200" height="200" src=
"https://th.bing.com/th/id/OIP.E3IHlLGTkpsd-
PS5AJsZDQD6D6?pid=ImgDet&rs=1" />HTML 구조와 Semantic
semantic : 의미론적인
‘시맨틱 태그’의 필요성
- HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있다.
- 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다.
- 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structure</title>
</head>
<body>
<!-- 시맨틱 태그-->
<!-- 태그의 이름만 보고도 어떠한 위치에 어떠한 역할을 하는지-->
<!-- 알수 있도록 하는 태그-->
<header> <!-- 웹페이지의 서론부분에 해당, head와 다르다!-->
<h1>HTML 구조 서론</h1>
<nav> <!-- 웹 페이지의 네비게이션 부분에 해당-->
<a href="/hello_html.html"> Hello html</a>
<a href="/elements/html-elements.html">Element</a>
</nav>
</header>
<main> <!--웹 페이지의 본론부분에 해당-->
<aside> <!-- 웹 페이지의 좌우측면 영역에 해당-->
<nav>
<a href="#1a">1 article</a>
<!-- 값이 지정되지 않았으면 #으로 표시, #은 아이디의 표시방법-->
<!-- 아이디 : 태그를 구분 짓기 위한 속성-->
<a href="#2a">2 article</a>
</nav>
</aside> 
1 article과 2 article을 누르면 각각 해당하는
article로 이동할 수 있게 된다.
<article id="1a"> <!-- 웹페이지 본론에서 하나의 주제에 해당-->
<h3> 1 Article</h3>
<section> <!-- 본론의 특정 주제에 대한 단원에 해당-->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<br />when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br />It has survived not only five centuries, but also the leap into electronic typesetting,
<br />remaining essentially unchanged.
<br />It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
<br />and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</section>
<section>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<br />when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br />It has survived not only five centuries, but also the leap into electronic typesetting,
<br />remaining essentially unchanged.
<br />It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
<br />and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</section>
</article>
<article id="2a">
<h3> 2 Article</h3>
<section>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<br />when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br />It has survived not only five centuries, but also the leap into electronic typesetting,
<br />remaining essentially unchanged.
<br />It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
<br />and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</section>
<section>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<br />when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br />It has survived not only five centuries, but also the leap into electronic typesetting,
<br />remaining essentially unchanged.
<br />It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
<br />and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</section>
</article>
</main>
<footer> <!-- 웹 페이지의 결론에 해당하는 부분-->
<p>copylight</p>
</footer>
</body>
</html>그 외 태그
<div> 태그 <!--구분, 분할-->
<div id=”header”>, <div class=”detail”>위 처럼 id, class속성을 사용 → 문서 구조 지정(영역 구별), 스타일 적용 시맨틱 구조를 따르지 않고 div를 이용해서 구조를 만들수도 있다.
HTML Head
HTML Head : 페이지를 열 때 웹 브라우저에 표시되지 않는다
title같은 페이지, CSS 링크, 파비콘(favicon), 그리고 다른 메타데이터(HTML 문서에 대한 데이터 : 작성자, 중요한 키워드 등)를 포함
head에 script를 적게 되면 먼저 실행이 되고 나서 body가 실행되게 되는데 head부분에 코드가 길어지거나 외부링크의 가져오는 경우 로드되는데 시간이 걸리게 된다. 그래서 이 시간을 줄이고 싶다면 script를 body에 적기도한다. 외부링크들은 body에 넣으면 화면이 로드되고나서 script를 읽는 방향으로 진행할 수있다.
common.js
function externalFunction(){
alert('외부함수')
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head 요소-->
<!-- html의 정보를 담고있는 요소-->
<!-- 브라우저 혹은 검색엔진에 정보를 제공할 때 사용-->
<!--meta-->
<!-- HTML의 데타 데이터를 지정하기 위한 요소-->
<!-- 문자집합, 작성자, 연관여 ... 을 표현-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">사용할 문자 집합 정의
<meta charset="UTF-8">브라우저가 웹 페이지를 렌더링하는 방식을 제어
<meta http-equiv="X-UA-Compatible" content="IE=edge">이 메타 태그는 "X-UA-Compatible"라는 HTTP 헤더의 값을 대체합니다. 이 헤더는 이전 버전의 인터넷 익스플로러(IE)와의 호환성을 유지하기 위해 사용되었습니다. 이제는 이 메타 태그를 사용하여 더욱 편리하게 브라우저 호환성을 설정할 수 있습니다.
위의 코드는 "IE=edge"라는 값을 사용하고 있습니다. 이 값은 브라우저가 가능한 최신 버전의 IE를 사용하도록 강제하는 것을 의미합니다. 따라서 이 메타 태그를 사용하면 더 나은 성능과 호환성을 제공할 수 있습니다.
웹 사이트를 모든 장치에서 보기 좋게 만들기 위한 뷰포트
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- title-->
<!-- HTML 문서의 제목을 지정하기 위한 요소-->
<!-- 브라우저 상단이나 탭에 표시가 된다-->
<title>Head 요소</title>title : 문서의 제목을 정의
<!-- Style-->
<!-- 해당 HTML 문서의 스타일을 지정하기 위한 요소-->
<!-- CSS3이 작성됨-->
<style>
body {background-color: cornflowerblue;}
h1 {color: azure;}
p {color:aliceblue;}
</style>style : 단일 HTML 페이지의 스타일 정보를 정의하기 위해 사용
style이나 script에 중복되는 요소가 있다면 위에서 쭉 읽다가 맨 마지막에 읽은게 적용이된다 배경화면 색깔 바꾸는게 위에서 지정을 해도 맨 마지막에 바꾸게 되면 그걸로 바꿔진다
<!--script-->
<!-- javaScript를 작성하기 위한 요소-->
<script>
function myFunction(){
alert('버튼클릭');
}
</script>
<script src="common.js"></script>
<!-- link 요소-->
<!-- 외부 자원과 관계를 가질때 그 관계를 지정해둔 요소-->
<link rel="stylesheet" href="common.css"/>
<link rel="icon" href="/attribute/sun.png" />
<!-- 화면에서 아이콘 걸어주는 방법-->
</head>외부링크로 css 파일을 생성해 style로 적용시킬 수 있다
common.css
body {background-color: yellowgreen;}문서 제목 앞에 아이콘이 적용된 모습
<body style="background-color: antiquewhite;">
<h1>
Header 1 Tag
</h1>
<p> 단락입니다 </p>
<button onclick="myFunction2();">클릭2</button>
<script>
function myFunction2(){
alert('버튼클릭2');
}
</script>
</body>
</html>script : 클라이언트 측 JavaScript 정의에 사용
script 통해서 버튼이 활성화되었다.
