HTML
웹에서 정보를 표현할 목적으로 만들어진 마크업 언어로 태그<>를 사용해서 웹 페이지를 작성한다.
마크업(<>)은 문서의 논리적인 구조를 정의하고 출력 장치에 어떤 형태로 보일 것인지 지시하는 역할을 하며 마크업 언어는 그런 마크업의 형식과 규칙을 정의한 언어이다.
현재는 HTML5가 표준 프로토콜로 사용되고 있다. HTML5는 구조가 정해져 있기 때문에 정보를 찾아서 표시하는 속도가 빠르다는 장점이 있다. 또한 별다른 플러그인 없이 브라우저 자체에서 처리하기
때문에 그래픽 및 멀티미디어 기능이 강화되었다. css3, Javascript를 지원하기 때문에 다양한 API 제공이 가능하다는 특징도 있다.
html5의 구성 요소
<p align = ‘center’> html입니다. </p><p></p>부분은 시작 태그와 종료 태그로 한 쌍으로 이뤄져 있다. 보통 시작, 끝 태그를 한 쌍으로 사용하는 경우가 많지만 몇 가지 명령어는 단일 태그<>만으로 이루어져 있는 경우도 존재한다.
align = ‘center’ 부분은 속성 =’속성 값’ 부분으로 시작 태그에만 작성할 수 있다. 사용할 기능을 좀 더 구체화 시키는 역할로 여러 개의 속성을 사용할 수 있다. 속성 간의 구분은 공백으로 처리하고, 속성 값은 “ ” 혹은 ‘ ‘를 이용해서 묶어준다.
시작 태그와 종료 태그 사이에 작성하는 것은 내부 문자로 텍스트노드에 노출될 내용을 작성한다.
html 작성 시 주의 사항
- 태그는 대, 소문자를 구분하지 않지만 소문자를 권장한다.
- 시작 태그로 태그를 시작했으면 반드시 종료 태그를 작성해줘야 한다. 종료 태그가 없으면 종료 시점을 구분하지 못한다.
- 파일 확장자는 반드시 html 혹은 htm으로 설정하며 보통 html을 많이 사용한다.
- 문자의 공백은 몇 개를 입력하든 하나만 인식하므로 공백은
를 사용한다. 해당 특수 기호를 사용하면 브라우저에게 해당 부분을 공백으로 해석하라고 알려준다.
html 기본 구조
<!doctype html>
<html lang="ko">
<head>
문서의 각종 정보 및 문서 자체에 대한 설명 작성
</head>
<body>
화면에 출력해서 보여줄 모든 정보, 내용을 작성
해드에 들어가는 태그를 제외한 모든 태그 사용 가능
</body>
</html><!doctype html>
문서의 형식을 알려주는 태그로 html5에서는 해당 구문을 작성한다. html4, xhtml에서는 각 모드에 따라 작성 방법이 달라지고 html5에서 지원하는 것들은 사용할 수 없다. 요즘은 거의 html5를 사용하기 때문에 해당 작성 방법을 가장 많이 이용한다.
<html></html>
html 문서의 시작과 끝을 표시하는 태그로 태그 안에 작성하는 lang은 어느 나라 언어인지를 의미한다. html은 트리 구조로 html이 부모, 내부가 자식 관계를 갖는다. html 태그가 최상위 태그인 것.
<head></head>
기본적인 html에 대한 정보를 작성하는 부분으로 아래와 같은 설정이 가능하다.
정보 출력
<meta>태그를 이용한다. 내부적으로 통신 시 필요한 내용을 설정한다.
<!-- meta 태그 이용하기 -->
<!-- 페이지에 대한 언어 설정. html 태그 안에 lang="ko"를 작성해서도 설정 가능하다. -->
<meta http-equiv="content-language" content="ko"/>
<!-- 페이지에 문서 형식(MIME type) 및 인코딩 형식 설정 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!-- 페이지 인코딩은 http-equiv 말고 charset 속성을 이용할 수 있다. -->
<meta charset="utf-8"/>
<!-- 반응형 관련 사이즈 설정 -->
<meta name="viewport" content="width=device-width,inital-scale=1.0"/>💡 html에서 주석은 <!— —>를 사용한다. VSCode에서 단축키는 느낌표(!) 입력 후, 엔터를 누르면 된다.
외부 파일 불러오기
<link>태그를 이용한다. css파일을 불러와 스타일을 적용할 때 사용한다.
<!-- 외부에 있는 파일을 불러와서 페이지에 적용하기
rel : 불러오는 파일의 페이지에서 역할 ->stylesheet
type : MIME type을 설정. text, css
href : 외부파일의 위치를 설정(local||web)
-->
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 파비콘 적용
title 앞에 출력되는 이미지를 파비콘 이라고 한다.
크기에 맞는 이미지 파일이 필요하다.
-->
<link rel="icon" href="https://www.w3schools.com/favicon.ico" type="image/x-icon">창 제목 설정
<title>태그를 이용해서 웹페이지 창의 제목을 설정한다.
<title>나의 첫 페이지</title>
스타일 코드 작성
<style>태그를 이용한다. 해드 부분이 아니더라도 작성 가능하지만 일반적으로 해드 부분에 작성한다.
<!-- 스타일 설정 -->
<style>
div{
width:100px;
height:100px;
background-color: beige;
}
</style>script문 작성 및 불러오기
<script>태그 이용.
<script>
//보통 외부 스크립트문을 불러올 때 많이 사용한다.
alert("알림!");
//3초뒤 해당 링크를 열게 하는 기능
setTimeout(()=>{
location.assign('http://gdu.co.kr')
},3000)
</script>💡 태그 내부의 주석은 java와 같이 //로 처리한다.
<body></body>
화면에 출력되는 내용을 작성한다.
<body>
<h1>내가 만든 첫 페이지!</h1>
<button class="btn btn-outline-primary">외부 css 적용</button>
<div>스타일 적용</div>
<a href="/test.do">링크 요청하기</a>
</body>
