본문 바로가기

Contact English

【웹 프로그래밍】 HTML

 

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