HTML(hypertext mark-up language)
추천글 : 【컴퓨터과학】 컴퓨터과학 목차
1. 개요 [본문]
2. 기본 문법 [본문]
3. <head> 태그 종류 [본문]
4. <body> 태그 종류 [본문]
5. <script> 문법 [본문]
6. <style> 문법 [본문]
a. HTML 앱 라이브러리
1. 개요 [목차]
⑴ HTML 파일의 확장자는 반드시 .html 또는 .htm
⑵ 아래에서 ●로 표시한 부분은 기입해야 하는 부분을 표시한 것
⑶ HTML이 쓰이는 예시
① 웹 페이지
② 자동화 보고서 : 특히 단순 텍스트 파일을 넘어 그래프나 색상 폰트를 쓰는 경우
③ 반응형 앱
④ 식일(Sigil) 전자책 플랫폼
2. 기본 문법 [목차]
⑴ 태그 : <와 > 사이의 명령어
⑵ 원칙 : <###> ~ </###>와 같이 표현
① <###> : 시작 헤더(Start Header)
② </###> : 끝 헤더(End Header)
⑶ 구조 : <HTML> <HEAD> ● </HEAD> <BODY> ● </BODY> </HTML>와 같이 표현
① <HTML>은 하나의 HTML 파일의 처음과 끝을 표시
② 하나의 HTML 파일은 헤더 부분과 바디 부분으로 구분
⑷ 태그 종류
① <HEAD> 태그 종류 (참조. 3)
② <BODY> 태그 종류 (참조. 4)
⑸ 주석
<!-- 이것은 주석입니다. -->
3. <head> 태그 종류 [목차]
⑴ <title> ● </title> : 문서의 제목을 나타냄, 브라우저의 타이틀바에 나타남
⑵ <base> ● </base> : HTML 파일이 위치한 장소의 URL 표현
⑶ <link> ● </link> : 외부의 문서와의 관례 표현, 외부 스타일 시트 지정
⑷ <style> ● </style> : 통일된 스타일 지정
⑸ <meta ● > : HTML 문서 안에서 이 문서에 대한 정보 표현, 서치 엔진과 관련
⑹ <meta http-equiv ● > : 문서의 문자형 지정, 화면 자동 갱신
⑺ <name> ● </name> : 메타 정보의 이름
⑻ <contents> ● </contents> : 실제 메타 데이터의 정보를 담는 부분
⑼ {% %} , {{ }} : HTML 내에 동적인 구문을 삽입
4. <body> 태그 종류 [목차]
⑴ 글자 및 문장
① 글의 크기 및 정렬
○ <h1>, <h2>, <h3>, <h4>, <h5>, <h6>이 있으며, <h1>이 가장 크고 <h6>이 가장 작음
○ <h# align="●"> : ● 부분에 정렬의 종류를 표시, left, center, right
② 폰트 태그 : 글꼴, 크기, 색
○ face : 글자의 글꼴 변경, 글꼴은 Windows\Fonts에 저장돼 있음
○ size : 글자의 크기 변경, 범위는 1 ~ 7
○ em으로 나타내는 게 pt, px로 나타내는 것보다 모바일, 웹 등 플랫폼에 따른 차이가 적음
○ color : 글자의 색 변경
○ 예 : RED, GREEN, BLUE, 0000FF(청색), 00FF00(녹색)
③ 특수문자 태그
○   space(공백)
○ < < <
○ > > >
○ " " "
○ & & &
○ φ Φ φ
○ ™ ™ TM(위 첨자)
○ © © ©
○ ® ® ®
④ 문자효과 태그
○ <b> ~ </b> : 진하게
○ <strong> ~ </strong> : 진하게
○ <big> ~ </big> : 크게
○ <blink> ~ </blink> : 깜빡이게
○ <i> ~ </i> : 기울임
○ <em> ~ </em> : 기울임
○ <kbd> ~ </kbd> : 입력한 글자가 키보드로 입력한 것과 같은 효과를 나타냄
○ <small> ~ </small> : 작게
○ <sup> ~ </sup> : 위 첨자로
○ <sub> ~ </sub> : 아래 첨자로
○ <tt> ~ </tt> : 타자 체로
○ <u> ~ </u> : 밑줄
○ <del> ~ </del> : 삭선(취소선) 표시
⑵ 문단
① 줄 바꿈 태그
○ ● <p> : 문단 구분, p는 paragraph의 약자
○ ● <br> : 한 줄만 띄우는 경우
② 긴 인용문 태그
○ <pre> ● </pre> : 공백, 특수문자, 줄바꿈이 있는 소스들을 에디터에 코딩하는 그대로 브라우저로 출력
○ 예 : 프로그램 소스
○ <blockquote> ● </blockquote> : 인용문 부분을 정의, 들여쓰기·글골의 형태 변경 등이 자동으로 이뤄짐
⑶ 목록 태그
① 문법
○ <ul> 태그로 순서 없는 목록을 선언 후 <li> 태그로 항목을 입력
○ <li> ● </li> 태그를 <ol type = "●●" start = "2"> ●●● </ol>처럼 감싸면 순서 있는 목록이 됨
② <ul> ● </ul>
③ <li> ● </li> : 리스트 요소를 의미
④ ●●의 종류
○ 1 : 1, 2, 3, ···
○ A : A, B, C, ···
○ a : a, b, c, ···
○ I : I, II, III, ···
○ i : i, ii, iii, ···
⑷ 글 링크 : <HEAD> 태그에서도 사용
① 내부 링크 : <a href = "#●"> ●● </a> ●●● <a name = "●"> ●●●● </a>
② 외부 링크 : <a href = "http://www.●" target ="●●"> ●●● </a>
○ target = "_self" : 현재의 창에 브라우저가 열림
○ target = "_blank" : 새로운 창에 브라우저가 열림
③ 이메일 링크 : <a href = "mailto:●@●●"> ●●● </a>
○ <address> ● </address> : 주소 입력 태그를 좀더 심화시켜 홈페이지 방문자를 위해 배려한 것
⑸ 표 태그
① 표 생성
○ <table> ● </table> : 테이블의 생성
○ <th> ● </th> : 행과 열 제목
○ <tr> ● </tr> : 테이블의 행
○ <td> ● </td> : 테이블의 열
○ <caption> ● </caption> : 표 제목
② 표의 기본 속성
○ <table bgcolor = "●"> ●● </table> : 표의 바탕색
○ <table border = "●"> ●● </table> : 표의 외곽선 굵기
○ <table bordercolor = "●"> ●● </table> : 표의 외곽선 색
○ <table bordercolordark = "●"> ●● </table> : 표의 외곽선에 어두운 입체감을 줌
○ <table bordercolorlight = "●"> ●● </table> : 표의 외곽선에 밝은 입체감을 줌
○ <table background = "●"> ●● </table> : 표의 배경 그림
○ <table cellspacing = "●"> ●● </table> : 셀과 셀 사이의 간격 크기 설정
○ <table cellpading = "●"> ●● </table> : 셀과 셀 내부의 글자 사이의 여백 크기 설정
○ <table align = "●"> ●● </table> : 표의 위치 정렬(left, center, right)
○ <table valign = "●"> ●● </table> : 셀 안에서 글자의 상하 위치 정렬(top, middle, bottom, baseline)
○ <table width = "●"> ●● </table> : 표의 너비 크기(픽셀, 비율(%))
○ <table height = "●"> ●● </table> : 표의 높이 크기(픽셀, 비율(%))
○ <table hspace = "●"> ●● </table> : 표와 표 밖의 주위 글자와의 좌우 여백 크기
○ <table vsapce = "●"> ●● </table> : 표와 표 밖의 주위 글자와의 상하 여백 크기
○ <table frame = "●"> ●● </table> : 표의 외곽선 형식
○ void : 모든 선을 제거
○ above : 위 외곽선만 보이게 설정
○ below : 아래 외곽선만 보이게 설정
○ hsides : 위, 아래 외곽선만 보이게 설정
○ lhs : 왼쪽 외곽선만 보이게 설정
○ rhs : 오른쪽 외곽선만 보이게 설정
○ vsides : 좌우 외곽선만 보이게 설정
○ box : 상하 좌우 모든 외곽선을 보이게 설정
○ <table rules = "●"> ●● </table> : 표 안에서 셀 선의 형식 지정
○ none : 모든 내부 선을 제거
○ base : <thead>, <tbody>, <tfoot> 태그 안에 있는 가로 경계선만 표시
○ rows : 가로 경계선만 표시
○ cols : 세로 경계선만 표시
○ all : 모든 경계선 표시
③ 셀 병합하기
○ 행 병합 : <th colspan="4"> ● </th>와 같이 표시
○ 열 병합 : <td colspan="2"> ● </td>와 같이 표시
⑹ 이미지 태그
① 선 그리기 태그
○ <hr> : 선을 그리기 위한 태그
○ <hr size = ● > : 선의 두께(픽셀과 비율(%))
○ <hr color = ● > : 선의 색깔
○ <hr width = ● > : 선의 너비(픽셀과 비율(%))
○ <hr align = ● > : 왼쪽 정렬(left), 가운데 정렬(center), 오른쪽 정렬(right)
○ <hr noshade> : 수평선의 음영효과 없앰
② 그림 삽입 태그
○ <img src = "●.●●" ●●● = "●●●●" ··· >
○ src : 그림 파일의 위치 지정, gif, jpeg, bmp 등 지원
○ ●●●의 종류
○ alt : 그림 파일에 대한 설명문
○ width : 그림의 가로 크기, 픽셀과 비율(%)로 표현
○ height : 그림의 세로 크기, 픽셀과 비율(%)로 표현
○ aligh : top, center, bottom, left, right 등
○ vspace : 그림과 글 사이의 상하 여백
○ hspace : 그림과 글 사이의 좌우 여백
○ border : 그림의 외곽선 굵기
⑺ 동영상 삽입 태그 : <embed src = "●.●●" ●●● = "●●●●" ··· ></embed>
① src : 동영상 파일의 위치 지정
② ●●●의 종류
○ loop : 자동으로 반복되는 수
○ volume : 사운드의 크기
○ width : 동영상의 너비
○ height : 동영상의 높이
○ hidden : 동영상의 숨김 여부
○ autostart : 자동 재생 여부
⑻ 폼 태그 : 텍스트 상자, 텍스트 영역, 체크 상자, 메뉴 등의 폼 요소
○ <form action = "●.●●" method="post"> ●●● </form>가 아래 내용을 감싸는 구조
○ <input type = "text" name = "NAME1" size="20" maxLength="40"> 등 : 단일 줄 입력 태그
○ <input type = "password" name = "NAME2" size="20"> 등 : 입력된 문자를 "●" 형태로 표시
○ <textarea name = "NAME3" cols="30" rows="3"> 등 : 데이터를 여러 줄로 입력
○ <input type = "checkbox" name = "NAME4" value = "VALUE1"> : 체크 상자, 여러 선택사항 중에서 2가지 이상을 선택할 경우
○ <input type = "radio" name = "NAME5" value = "VALUE2"> : 라디오 버튼, 여러 선택사항 중에서 하나만 선택할 경우
○ <select name = ● size = ●● multiple><option value = ●●●> ●●●● : 선택 메뉴
○ <input type ="submit" value = "입력하기"> 등
○ <input type = "reset" value = "취소하기"> 등
⑼ 프레임 태그
① 프레임 : 브라우저 화면을 여러 개로 분할하여 각기 다른 문서를 보여주는 것
② 프레임 태그에서 사용되는 속성
○ name : 프레임의 식별 이름 설정
○ scrolling : 스크롤바를 사용할지의 여부, auto, yes, no
○ marginwidth : 프레임의 좌우 여백의 크기, 픽셀 단위
○ marginheight : 프레임의 상하 여백의 크기, 픽셀 단위
○ target : 링크로 연결된 웹 문서를 보여줄 프레임 지정
○ 해당 파일 : 해당 파일과 연결 설정
○ _blank : 새로운 창에 링크된 웹 문서가 열림
○ _self : 현재의 창에 링크된 웹 문서가 열림
○ _parent : 현재 차으이 부모 프레임에 링크된 웹 문서가 열림
○ _top : 모든 프레임을 해제한 후 링크된 웹 문서가 열림
○ noresize : 프레임의 크기 고정
○ url : 프레임의 웹 문서 지정
○ bordercolor : 프레임의 외곽선 색 지정
③ 4:1 비율로 나누기
<frameset cols="4*, *">
<frame src="left.html">
<frame src="right.html>
</frameset>
④ 픽셀로 나누기
<frameset cols="120, *">
<frame src='"left.html">
<frame src="right.html">
</frameset>
⑤ 3단으로 나누기
⑥ <iframe>으로 나누기
○ align : 프레임과 텍스트와의 정렬 위치, left, right, center, top, baseline, bottom
○ name : 프레임의 식별 이름
○ scrolling : 스크롤바를 사용할지 여부, auto, yes, no
○ marginwidth : 프레임의 좌우 여백의 크기
○ marginheight : 프레임의 상하 여백의 크기
○ target : 링크로 연결된 웹 문서를 보여줄 프레임의 이름
○ noresize : 프레임의 크기 고정
○ url : 프레임의 웹 문서 지정
○ bordercolor : 프레임의 경계선 색 지정
○ frameborder : 프레임의 경계선을 보여줄지 여부, yes, no
⑽ 자바 스크립트
5. <script> 문법 [목차]
⑴ 문법
① <script> ● </script>, ●에 내용을 기입
② 모든 변수를 선언할 때 자료형 var로 지칭
⑵ document : HTML 문서에 텍스트를 표시할 때 세밀한 조절을 가능하게 함
① <p id="identification"></p>
○ 식별 아이디가 "identification"인 document를 <BODY>●</BODY> 안에 표시
② document.getElementById("identification")
○ 식별 아이디가 "identification"인 것을 지칭
③ document.getElementByld("identification").innerHTML = variable + "text_example";
○ identification 자리에 변수 variable의 내용과 "text_example"를 표시하겠다는 의미
⑶ Date : 자료형 중 하나
① var date = new Date();
○ Date형 변수인 date를 선언
② Date("Jan 1, 2019 00:00:00")
○ 2019년 1월 1일 자정을 지칭하는 Date 변수
③ Date()
○ 현재의 시간을 지칭하는 Date 변수
④ var date_get_time = new Date().getTime();
○ 처음부터 현재까지의 시간을 ms 단위로 나타낸 것
6. <style> 문법 [목차]
⑴ <ins data-client="ABC">●</ins>인 html 코드를 강제로 안 보이게 하는 코드
<style>
ins[data-client="ABC"] {
display: none !important;
}
</style>
⑵ <script src = "https://●?client=ABC">●●●</script>인 html 코드를 강제로 안 보이게 하는 코드
<style>
script[src*="client=ABC"] {
display: none !important;
}
</style>
⑶ 50%의 확률로 위 ABC client가 안 나오게 하는 코드
<script>
window.onload = function() {
var probability = 0.5; // 50% chance to hide the ad
if (Math.random() < probability) {
var style = document.createElement('style');
style.innerHTML = `
ins[data-client="ABC"],
script[src*="client=ABC"] {
display: none !important;
}
`;
document.head.appendChild(style);
}
}
</script>
⑷ 모든 <ins>●</ins>의 높이를 0으로 만드는 코드
<style>
ins {
height: 0px !important;
overflow: hidden !important;
}
</style>
⑸ <ins data-client="ABC">●</ins>의 크기를 원하는 대로 조절하는 코드
<style>
ins[data-client="ABC"] {
text-align: left !important;
width: 320px !important;
height: 100px !important;
}
</style>
⑹ ⑸의 코드를 PC 버전에서는 'float: right'를 하고 모바일 버전에서는 'text-align: left'를 하는 코드
<style>
/* For PC */
@media (min-width: 992px) {
ins[data-client="ABC"] {
float: right !important;
width: 320px !important;
height: 100px !important;
}
}
/* For Mobile */
@media (max-width: 991px) {
ins[data-client="ABC"] {
text-align: left !important;
width: 320px !important;
height: 100px !important;
}
}
</style>
⑺ <div id="aswift_1_host">●</div>를 전부 안 보이게 하는 코드
<style>
#aswift_1_host {
display: none !important;
}
</style>
입력 : 2018.12.10 23:59
'▶ 자연과학 > ▷ 웹 프로그래밍' 카테고리의 다른 글
| 【웹 프로그래밍】 웹사이트 일반 (0) | 2022.09.25 |
|---|---|
| 【웹 프로그래밍】 Javascript (0) | 2018.12.10 |
| 【프로그램】 히포크라테스 기질테스트 프로그램과 12기질 장단점 (2) | 2018.10.11 |
| 【웹 프로그래밍】 더 구체적으로 URL 나타내기 (0) | 2017.08.06 |
| 【웹 프로그래밍】 티스토리 사이트맵 (0) | 2017.04.23 |
최근댓글