반응형
1. 개념
* HTML이란?
웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
* 웹 표준
- 웹 사이트를 제작할 때 지키는 규칙
- 웹 표준을 지켜 제작한다면 장소나 브라우저와 상관없이 웹을 볼 수 있음
* HTML5, CSS3 의의
- 최신 웹 표준에 맞는 웹 사이트 제작 도구
- 앱을 디자인하기 위한 기초
- 인터랙티브(사용자의 동작에 결과물을 보여줄 수 있는)한 사이트 제작
- 사이트와 블로그의 수정을 쉽게 함
* HTML 기본 문서 구조
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>This is my First Web</title>
</head>
<body>
<h1>Main Title</h1>
<p>Hello World~~~</p>
<img src="images/first.jpg">
</body>
</html>| <!doctype html> | - 현재 문서가 HTML5 언어로 작성된 웹 문서 - <!doctype>: 처리할 문서의 유형을 알려주는 태그 |
| <html> ~ </html> | - 웹 문서의 시작과 끝을 나타내는 태그 - lang 속성: 문서에서 사용할 언어 지정( ex: lang="ko" ) |
| <head> ~ </head> | - 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분 - 여기에 있는 정보는 실제 문서 내용이 아니기 때문에 문서 제목만 브라우저 창에 보여지고, 나머지는 보여지지 않는다. - <title> 태그: 브라우저의 제목 표시줄에 표시되는 내용 - <meta> 태그: 문자 인코딩 방법 및 문서의 키워드와 요약 정보를 지정 |
| <body> ~ </body> | 실제로 웹 브라우저 화면에 나타날 내용 |
* 웹 문서 제작 및 업로드
(1) 호스팅 서버 준비
- 웹 문서와 사용한 파일을 서버 컴퓨터로 업로드해야 클라이언트로 쓸 수 있음
- 웹 서버를 직접 구입하고 관리하기 어렵기 때문에 일정 금액을 내고 사용하는 호스팅 서비스를 이용
(2) FTP 프로그램 사용: 사용자 컴퓨터에서 작성한 웹 문서와 각종 파일을 서버로 업로드하거나 서버에서 다운로드 할 수 있도록 해주는 프로그램 ( ex: FileZilla)
2. 텍스트 관련 태그
* 텍스트를 묶는 태그
| <h1>, <h2>... | - 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그 - 예시: <h1> 제목 </h1> |
| <br> | 줄 바꿈 태그, 닫는 태그가 없음 |
| <hr> | 주제가 바뀔 때 사용하는 수평선 태그 |
| <p> | - 텍스트 단락 - 입력한 내용 앞 뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐 - 예시: <p> 텍스트 </p> |
| <blockquote> | - 인용문 넣기 - 다른 텍스트보다 안으로 들여 써짐 - 예시: <blockquote> 인용 내용 </blockquote> |
| <pre> | - 입력한 그대로 표시 - 소스에 표시한 공백이 그대로 표시됨 - 프로그램 소스 표현 - 예시: <pre> hello world </pre> |
* 한 줄로 표시하는 태그
| <strong>, <b> | - 굵은 표시 - <strong>: 중요한 내용이라 강조할 때 - <b>: 단순 굵게 |
| <em>, <i> | - 이탤릭체 표기 - <em>: 흐름상 특정 부분을 강조 - <i>: 단순 이탤릭체 |
| <q> | - 인용 내용 표시 - 줄 바꿈 없이 다른 내용과 한 줄에 인용 내용 표시 - 인용 내용 앞 뒤에 " " 추가 |
| <mark> | - 태그로 묶은 부분의 배경색을 노란색으로 표기 |
| <span>, <div> | - 영역 묶기 - <span>: 줄 안에서 (인라인) 묶기 - <div>: 줄 바꿔 (블록) 단락으로 묶기 |
| <ruby> | - 동아시아 글자에 주석 표시 - <ruby> 태그 안에 <rt> 태그를 사용해 주석 표시 |
* 목록을 만드는 태그
| <ul>, <li> | - 순서 없는 목록 - 각 항목 앞에 불릿이 붙여짐 |
| <ol>, <li> | - 순서 목록 - <ol> 태그 속성: type(불릿 앞의 숫자 조정), start(중간 번호 수정), reserved(역순으로 표시) (예시) <ol type = "a"> <li>a. 초콜릿</li> <li>b. 사탕</li> <ol type = "a" start = "3"> <li>c. 과자</li> <li>d. 막대</li> <li>e. 사탕</li> |
| <dl> <dt>, <dd> | - '제목'과 그에 대한 '설명'으로 이루어진 목록 - dl: definition list - dt: definition title |
* 표를 만드는 태그
| <table> ~ <table> | 표 전체 |
| <tr> ~ </tr> | 행 |
| <td> ~ <td>, <th> ~ <th> |
셀과 제목 셀 |
| colspan, rowspan 속성 | 행 또는 열 합치기 (예시) <td colspan="합칠 열의 개수"> 내용 </td> <td rowspan="합칠 행의 개수"> 내용 </td> |
| <thead>, <tbody>, <tfoot> | - 표의 구조를 제목 부분과 실제 본문, 요약 부분으로 나눈다. - 표의 본문이 길 경우 자바 스크립트를 이용해 제목과 바닥 부분을 고정하고 본문만 스크롤되도록 할 수 있다. (like 엑셀) |
| <col>, <colgroup> | - 열끼리 묶어 스타일 지정 - <col>: 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용 - <colgroup>: 태그 안에 묶는 열의 개수만큼 <col> 태그를 사용(닫는 태그 있음) |
(예시)
<table border = "1">
<tr>
<th>1행 1열(제목)</th>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<th>2행 1열(제목)</th>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
<table border = "1">
<colgroup>
<col style = "width: 100px;">
<col style = "width: 300px;">
<col style = "width: 100px;">
<col style = "width: 300px;">
</colgroup>
<tr>
<th>이름</th>
<td></td>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>주소</th>
<td colspan="3"></td>
</tr>
<tr>
<th>자기소개</th>
<td colspan="3"></td>
</tr>
</talbe>
3. 이미지와 하이퍼링크
* 이미지(GIF, JPG, JPEG, PNG)
| <img> | - 웹 문서에 이미지를 삽입할 때 사용 - src 속성: 이미지 파일 경로 - alt 속성: 이미지를 설명하는 대체 텍스트 - width, height 속성: 이미지 크기 조정 - 예시: <img src = "경로" [속성="값"] > |
| <figrue>, <figcaptio> | - 이미지에 설명글 붙이기 - 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용 - 예시: <figure> 요소 </figure> - 예시: <figcation> 설명 글 <figcaption> |
* 링크
- 하이퍼링크
다른 문서, 혹은 다른 사이트로 바로 연결해주는 기능, 외부 사이트나 외부 페이지로 연결이 가능하다.
| <a> | - href 속성: 링크한 문서나 사이트의 주소 - target 속성: 링크한 내용이 표시될 위치를 지정 - download 속성 - rel 속성: 현재 문서와 링크한 문서의 관계를 설명 - hreflang 속성: 링크한 문서의 언어를 지정 - type 속성: 링크한 문서의 파일 유형 (예시) <a href = "링크할 주소" [속성="속성 값"]>텍스트</a> <a href = "링크할 주소" [속성="속성 값"]><img src ="이미지 파일 경로"></a> |
| <a>의 target 속성 | 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지를 표시할 때 - _blank: 링크 내용이 새 창이나 새 탭에서 열린다. - _self: target 속서으이 기본값으로 링크가 있는 화면에서 열린다. - _parent: 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다. - _top: 프레임을 사용했을 때 프레임을 벗어나 링크 내용을 전체 화면에 표시한다. |
| 앵커 | 한 페이지 안에서 이동하는 일종의 단축키 (예시: 맨 아래로, 맨 위로) 태그의 id를 지정하고, href에 id를 선언하면, 링크를 누르면 id가 있는 태그로 이동한다. |
| <area>, uesmap 속성 | - 한 이미지 상에 여러 다른 링크를 만드는 것 |
반응형
'프로그래밍' 카테고리의 다른 글
| SQL 튜닝 - 튜닝 활용 (0) | 2021.10.06 |
|---|---|
| SQL 튜닝 - JOIN(2) (0) | 2021.10.05 |
| SQL 튜닝 - JOIN(1) (0) | 2021.09.30 |
| SQL 튜닝 - INDEX (0) | 2021.09.30 |
| SQL 튜닝 - 실행계획, 옵티마이저, 튜닝 절차 (0) | 2021.09.29 |