2020/06/21 - [HTML&CSS&JS] - [HTML5] HTML 시작하기 1
[HTML5] HTML 시작하기 1
1) 웹으로 사용할 워크스페이스 폴더를 하나 만들고 2) 아파치 톰캣 9버전을 zip버전으로 다운받는다. https://tomcat.apache.org/download-90.cgi Apache Tomcat® - Apache Tomcat 9 Software Downloads Welcome..
analysis-flood.tistory.com
이전 글을 보고 기본적인 설정을 완료했다면, 이제 확인해야할 부분이 있다.
Project 영역에서-Project 이름-WebContent 밑에 WEB-INF가 있는지 확인한다.
WEB-INF가 없다면, 웹 프로그래밍이 불가능하다.
WEB-INF 밑에는 classes, lib, web.xml 파일로 이루어져 있다.
classes같은 경우에는 Eclipse IDE에서는 보이지 않을 수 있다.
자바같은 경우, .java파일이 컴파일되면서 .class파일이 생성되는데, 이와 유사하다고 보면 된다.
HTML5는 HTML4에서 좀 더 동적인 웹 환경을 따라가기 위해서 만들어졌다.
보다 깔끔해지고, 코딩도 분명 간결해졌을 것! 이제는 더 이상의 버전 업은 없다고 한다.
HTML5는 EUC-KR을 기본적으로 사용하는데, EUC-KR은 한글 1 글자를 2byte로 표현한다.
그러나 요즘은 EUC-KR을 기본적으로 사용하지 않고,
UTF-8방식 (한글 1글자 = 3byte) 을 두루 선택하고 있기 때문에, UTF-8로 꼭 바꿔주는 것이 좋다.
UTF-8은 한글을 초성+중성+종성으로 나누어 결합하는 것으로 알고있다.
또한. 보통 HTML이나 CSS 등 다양한 웹 프로그래밍을 하다 보면,
보통 경로가 http://localhost:9999/Lecture-WEB/html/exam01.html 이런 식으로 구성된다.
중간의 WebContent는 생략되므로 알고 있으면 좋다.
이제, 새롭게 HTML 파일을 만들어본다! 먼저, a, div, span 태그에 대해서 알아보자.
<a>태그는 링크를 걸어줄 때 사용할 수 있는 인라인 태그이다.
<div>태그는 한 줄의 자리를 차지하는 블럭 태그이다.
<span>도 인라인 태그이다.
기본적으로 html은 기본적으로 어떻게 구성되어 있을까?
인라인 태그와 블럭 태그의 차이는 무엇일까?
간단하게, 2개의 html파일을 만들어보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyHome</title>
</head>
<body>
내가 작성한 HTML문서로 이동하라!
</body>
</html>exam01.html
이렇게 보면, meta charset이 UTF-8로 되어있음을 확인해볼 수 있다.
즉 이 부분을 EUC-KR같은 다른 인코딩 방식을 넣어줄 수도 있다.
<title> </title>은 우리가 인터넷을 키면 네이버라고 뜨듯이, 제목의 역할을 한다.
<body>부분은 html태그를 주로 쓰는 부분이고, 코드의 주요 몸통부라고 생각하면 좋다.
그래서 html은 뼈대구조를 만들어주는 몸통 body에 코딩한다고 생각하자.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> a div span tag </title>
</head>
<body>
<a href = "exam01.html"> exam01 </a>
<a href = "http://www.naver.com"> 네이버 </a>
<a href = "https://analysis-flood.tistory.com" target = "_blank"> 내 블로그 </a>
</body>
</html>
exam02.html
이렇게 body부분에서 <a> 태그를 써보자.
<a> 태그는 링크를 걸어줄 때 사용하며, 인라인 태그이다.
이렇게, 위 exam02.html을 Run하면, 3개의 글자마다 각기 다른 곳으로 이동할 수 있는 링크가 생겼다.
즉 <a href = "주소"> 글자 </a> 형태이며, target 속성에서 "_blank"를 입력하면, "새 창으로 열기"와 같게 된다.
이미 한 번 간 곳은 보라색으로 변경되며, 쿠키삭제 시 다시 파란색(기본 색)으로 돌아온다.
또, <a>태그는 인라인 태그로서 자신의 부분만을 차지하고, 한 줄을 전부 차지하거나 하지 않는다.
그런데, 첫 번째 exam01부분을 보면, 일반적으로 아는 인터넷 주소가 아닌데도 실행이 된다.
즉 내 파일의 경로를 지정해줄 때 꼭 알아야 할 부분이다.
절대경로나 상대경로로 지정해줄 수 있다.
<a href = "http://localhost:9999/Lecture-WEB/html/exam01.html"> </a> <!-- 절대경로 -->
<a href = "/Lecture-WEB-html/exam01.html"> </a> <!-- IP:PORT 생략 -->
<a href = "../exam01.html"> </a>
<a href = "exam01.html"> </a>즉, 이렇게 풀-로 다 써주어도 되고, IP:PORT를 생략할 수도 있다.
그런데, 3번째는 실행되지 않는다. ..의 의미는 상위의 의미이다. 즉 지금 html폴더와 같은 레벨에서 찾게 된다.
마지막 부분은 모두 생략한 것인데, 이는 상대경로로서 현재 위치를 알기 때문이다.
아무래도. 2번째 부분을 많이 사용하게되지 않을까? (개인적 생각.)
무튼 이렇게 오늘은 간단하게 HTML의 기초를 알아보았다!
'HTML&CSS&JS' 카테고리의 다른 글
| [HTML5] <audio> <video> <iframe> < embed> 태그 (0) | 2020.06.21 |
|---|---|
| [HTML5] <ol> <ul>, <li>, <header>, <section>, <footer> 태그 (0) | 2020.06.21 |
| [HTML5] <h> < img> <select> 태그 (0) | 2020.06.21 |
| [HTML5] <div>, <span>, <p>, <hr> 태그 (0) | 2020.06.21 |
| [HTML5] HTML 시작하기 1 (Apache Tomcat 9 설치) (0) | 2020.06.21 |
