html 파일구조
: Hyper Text Markup Language
1) html의 문서 구조
<!DOCTYPE html> : 문서가 html형식이라는 의미(html로 작성된 웹문서)
<meta charset = UFT-8>
<html> ---- html의 문서의 시작
<head> ---- 브라우저가 웹페이지를 해석할 수 있도록 문서의 정보를 표시(인코딩, 반응형 웹, 타이틀, 아이콘)
<title> </title>
</head>
<body>
브라우저에 표시할 내용을 정의(이곳의 내용물이 사이트에 반영됨)
</body>
</html> ---- html의 문서의 끝
* < __ > : 꺽세 안에 있는 것을 '태그'라고 함
< > </ > " : 열림태그와 닫힘태그 필수
* <h1> <a> </h1> </a> -> 틀림
[ <h1> [ <a> </a> ] < /h1> ] ->태그의 순서가 맞아야 함
2) 열림 태그를 입력하면 자동으로 닫힘 태그가 뜸
-> 이것이 표준 형태이기 때문에 (닫힘 태그가 없어도 웹페이지에서는 구현한 대로 나오나, 이클립스 자체에서 워닝이 뜸)
3) 이클립스에서는 <h1> ~ <h6> 까지만 인식함.
<h7>은 인식X
4) 'Tag' 작성 방법
<시작 태그명 속성1 = "속성값1" 속성2 = "속성값2"> </종료 태그명>
5) Tag
1. 텍스트 관련 Tag
- <h1> ~ <6> : 문서에 제목을 표시하기 위한 태그(굵게, 줄바꿈이 자동으로 포함)
- <font> : html5에서는 지양, 스타일은 html 태그의 속성으로 표시하지 않고 css로 작업
2. 줄바꿈
- <p> : 텍스트들의 단락을 정의, 앞뒤로 줄이 생기면서 단락이 생성
- <br> : 단순 줄을 바꿈
3. 특수문자
< : <
> : >
space(띄어쓰기) :
" : $qout;
<b> : 굵게
<i> : 이탤릭
<sub> : 아래첨자
<sup> : 윗첨자
4. 이미지 삽입
path를 적용 (이미지삽입, 하이퍼링크, 백엔드 어플리케이션 연결)</h3>
1. 절대경로
=> 절대경로는 이미지가 위치하는 경로의 full name(표준화된 폴더 구조 - 서버가 인식하는 위치)을 명시
http://호스트의ip:8088/clientweb/images/이미지파일 이름(~~~~.jpg)
*내 서버이기 때문에 http://172.30.1.37:8088 (ip)는 생략가능
[ /clientweb ] 절대경로는 clientweb 앞에 슬래시(/) 필수!! 슬래시를 빼면 상대경로가 되기 때문에 웹페이지에는 액박이 뜸
<img src = "이미지 경로"/>
2. 상대경로
=> 현재 문서의 위치를 기준으로 경로를 파악할 수 있도록 정의
상대경로-> <img alt="장동건" src="clientweb/images/jang1.jpg">
절대경로-> <img alt="장동건" src="/clientweb/images/jang1.jpg">
. : 현재 디렉토리
.. : 상위 디렉토리
'HTML, CSS, JS' 카테고리의 다른 글
| 2022-09-23 javascript 사용방법, 함수정의 (0) | 2022.09.24 |
|---|---|
| 2022-09-22 CSS우선순위, 속성 (0) | 2022.09.22 |
| 2022-09-21(2) CSS (0) | 2022.09.21 |
| 2022-09-21(1) html 양식태그 입력하여 서버로 전송 (0) | 2022.09.21 |
| 2022-09-19 환경구축 (0) | 2022.09.19 |
댓글