본문 바로가기
▶ 자연과학/▷ 웹 프로그래밍
Contact English

【웹 프로그래밍】 HTML

초록E 2018. 12. 10. 17:55

 

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(녹색) 

③ 특수문자 태그 

○ &nbsp;    &#160;    space(공백) 

○ &lt;    &#60;    <

○ &gt;    &#62;    >

○ &quot;    &#34;    "

○ &amp;    &#38;    &

○ &phi;    &#934;    φ

○ &trade;    &#8482;    TM(위 첨자)

○ &copy;    &#169;    ©

○ &reg;    &#174;    ®

④ 문자효과 태그

○ <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

'▶ 자연과학/▷ 웹 프로그래밍' 관련 포스팅

티스토리툴바