고정 헤더 영역
상세 컨텐츠
본문
728x90
2021/01/31 - [IT국비교육] - Index HTML
1. HTML(Hyper Text Markup Language)
웹브라우저에서 문자열, 이미지, 동영상, 입력 양식 등을 출력하기 위해 사용되는 언어입니다.
언어라고는 하지만 개발 언어는 아니니 참고하세요.
2021/01/28 - [IT국비교육/HTML] - EditPlus 설치 방법 HTML 개발 툴
EditPlus 설치 방법 HTML 개발 툴
2021/01/31 - [IT국비교육] - Index HTML 해당 글은 IT 국비교육 과정에서 배운 내용을 정리하여 공유하는 글입니다. 첫 번째 글은 IT 국비교육 과정 중 첫 번째 과정인 HTML로 사용된 프로그램은 EditePlus입
ssu-jo.tistory.com
2. 태그(Tag)
html에서 문자열, 이미지, 동영상, 입력양식 등을 출력하기 위해 사용되는 형식입니다.
※ 프로그램 언어도 태그 형식으로 바뀌는 추세입니다.
- 형식
⓵ <태그명 속성명=“속성값”> 콘텐츠 </태그명>
<태그명>과 </태그명> 사이의 컨텐츠가 태그 기능의 영향을 받습니다.
</태그명> 생략 시 <태그명> 뒤에 모든 콘텐츠가 영향을 받습니다.
⓶ <태그명 속성명=“속성값”/>
· 태그명 : 태그 종류
· 속성명 : 태그의 성질
· 속성값 : 속성명에 대한 값(수치)
· 속성명=“속성값”은 0개 이상 나올 수 있습니다.
· 속성값은 “ 또는 ‘로 감쌈, 속성값 중간에 공백이 없으면 생략 가능하나 되도록 사용합니다.
· 태그명, 속성명은 대문자 또는 소문자 가능하나 되도록 소문자 사용하도록 합니다.
※ 속성값은 구분하니 주의하세요.
※ Black 형식(한 행을 독차지하는 태그> - 그 외의 태그는 Inline 형식
div, table, hr, h[1,6], p, center
3. HTML의 기본 구조 관련 태그
· <html></html> : HTML 소스 전체를 감싸는 태그입니다.
· <head></head> : 제목이나 머리말을 감싸는 태그로, Javascript 함수가 들어갑니다.
· <title></title> : 제목 표시줄에 나타나는 내용을 감싸는 태그로 <head> 안에 삽입합니다.
· <body></body> : 화면에 출력될 문자열, 이미지, 입력 양식 등을 감싸는 태그입니다.
| 속성 | 기능 |
| background | 출력화면의 배경 이미지 지정 |
| bgcolor | 출력화면의 배경색 지정 |
| text | 글자 색상 지정 |
| leftmargin | 화면 왼쪽 여백을 지정 |
| rightmargin | 화면 오른쪽 여백을 지정 |
| onLoad | 태그 안의 모든 내용물을 읽은 후 자바스크립트 코드 설정 |
· <meta>: 화면 이동 , 문자셋, 검색 엔진의 검색하는 문자열 등을 설정하는 태그, 안에 삽입
예 : <meta charset="UTF-8"> -> 한글을 정상 출력하게 하는 meta 태그
<html>
<head>
<title> 환영 </title>
<script> 자바스크립트 함수 선언 </script>
</head>
<body>
반갑습니다.
</body>
</html>
4. 주석 – Comment
소스의 내용을 설명하기 위해서 사용 차후 사용할지도 모르는 소스를 숨기기 위해서 사용합니다.
주석의 최대 수혜자는 개발자 본인!!!(현장에서는 주석은 제일 마지막 단계에 한다고 합니다.)
| 분야 | 주석문 형태 | 주석 처리 영역 |
| HTML, XML | <!-- 추석문 --> | 주석처리 영역 1줄 이상 주석처리 |
| CSS | /* 주석문 */ | |
| Javascript Java JSP |
/* 주석문 */ | |
| // 주석문 | 1줄만 주석처리 |
※ html과 xml의 차이
· html : 미리 정해진 태그를 사용합니다.
· xml
사용자가 원하는 태그를 사용합니다.
oracle 구조물을 그대로 표현할 때 사용하며, oracle table 명이나 column명이랑 일치하는 경우가 많습니다.
환경설정에 관련된 데이터를 설정할 때 사용합니다.
5. HTML에서 사용하는 색상값 표현 방법
HTML에서 색상을 설정하기 위해 표기하는 방법은 2가지가 있습니다.
⓵ 영문 표기법
영문을 색상 표기하는 방법입니다.
예 : black, blue, red, yellow 등
⓶ RGB(Red Green Blue) 표기법
Red 표현 16자리 진수 2자리, Green 표현 16자리 진수 2자리, Blue 표현 16자리 진수 2자리를 이용하여 색 상을 표기하는 방법입니다.
총 16,777,216개의 색상 지원합니다.
예 : #000000(black), #FFFFFF(white), #FF0000(red), #00FF00(green), #0000FF(blue)
6. HTML에서 사용하는 길이 단위
HTML에서 사용하는 길이 단위를 정리한 표입니다.
| 구분 | 단위 | 설명 |
| 절대 단위 | pt | 포인트 1포인트=1/72인치 |
| 상대 단위 |
% | 화면의 좌우 또는 상하를 100% 놓고 설정하는 단위 예 : 100% 의미는 화면 꽉 차게 |
| px | 1 픽셀 |
7. 파일 경로 지정 방법 – jsp 영역
파일이 저장된 경로를 지정하는 방법입니다.
호출 파일이 피 호출 파일의 경로를 지정할 때 사용합니다.
| 경로 | 설명 |
| 절대 경로 | 파일 호출자의 위치에 관계없이 변치 않는 정확한 경로 |
| 상대 경로 | 파일 호출자의 위치에 따라 변하는 경로 |
| 호출 파일 | 피 호출 파일 | 상대 경로 호출방법 | 절대 경로 호출방법 |
| 네이버 웹서버의 x.html | 네이버 웹서버의 p1.jpg | “p1.jpg” | “http://www.naver.com/a1/b1/p1.jpg” “/a1/b1/p1.jpg” |
| 네이버 웹서버의 p2.jpg | “img/p2.jpg” | “http://www.naver.com/a1/b1/img/p2.jpg” “/a1/b1/img/p2.jpg” |
|
| 네이버 웹서버의 q1.jpg | "../b2/q1.jpg” | “http://www.naver.com/a1/b2/q1.jpg“ “/a1/b2/q1.jpg” |
|
| 네이버 웹서버의 q2.jpg | “../b2/img/q2.jpg” | “http://www.naver.com/a1/b2/img/q2.jpg” “/a1/b2/img/q2.jpg” |
|
| 다음 웹서버의 p1.jpg | X | “http://www.daum.net/a1/b1/p1.jpg” | |
| 다음 웹서버의 p2.jpg | X | “http://www.daum.net/a1/b1/img/p2.jpg” |
../는 [1단계 상위 레벨]을 의미
※ HTML5
HTML4 보다 다양한 태그를 지원하여 웹브라우저에서 다양한 이미지, 멀티미디어, 콘텐츠 등의 출력을 지원합니다.
모든 브라우저들이 HTML5를 지원하지 않습니다.(크로스 브라우징 문제)
크로스 브라우징 문제를 해결하기 위해 모든 브라우저에서 지원하는 기능들만을 선별해서 사용하거나, jQuery를 사용합니다.
※ jQuery를 쓰는 이유
⓵ 간단한 코딩으로 강력한 기능 사용
⓶ 크로스 브라우징 가능
⓷ 디자이너가 쓰기 쉬운 기능이 많음
※ 웹 개발 시 웹프로그래머의 역할
⓵ DB 연동 작업
⓶ 입력 양식 관련 HTML은 개발자가 할 수도 있음
728x90
LIST
'HTML' 카테고리의 다른 글
| 입력 양식 관련 태그 - HTML (0) | 2021.01.31 |
|---|---|
| Table 태그 - HTML (0) | 2021.01.31 |
| A 태그 / DIV 태그 - HTML (0) | 2021.01.29 |
| 글자 관련 태그 - HTML (0) | 2021.01.28 |
| EditPlus 설치 방법 HTML 개발 툴 (0) | 2021.01.28 |
댓글 영역