1. HTML 이해하기
HTML은 웹문서를 작성하는 언어이다. HTML은 프로그래밍 언어의 범주에 들어있지만 범용적인 프로그래밍 언어와는 달리 문서를 작성하는데 특화되어있다.
HTML은 구조가 단순한데, 문서를 만드는 언어이므로 가장 중요한 것은 문서의 내용이다. 문서는 태그로 이루어져 있다.
태그를 활용하지 않으면 다음 사진과 같이 밋밋하고 무엇이 제목인지도 알 수 없다.
따라서 태그의 사용유무에 따라 차이가 크다.
브라우저는 HTML 문서를 해석할 때 HTML 태그를 가지고 해석을 한다. 줄 바꿈, 글자 위치, 글자 크기, 색, 문자열에 연결된 링크, 표, 이미지, 리시트 등등을 모든 작업은 태그를 필요로 한다.
# 태그란?
<태그>의 형식으로 표현한다. 시작 태그와 끝나는 태그가 쌍으로 존재하는 데 끝나는 태그는 그 이름 앞에 /(슬래시)를 붙인다.
#<html>... /html>
<html> ... </html>은 HTML 문서라는 것을 표시하는 태그이다. 따라서 HTML문서의 내용은 HTML 태그로 둘러 쌓여있다. 이제 HTML문서의 내부를 살펴보면 <head> 태그와 <body> 태그가 있다.
#<head>태그?
문서의 정보를 알려주는 메타 정보들이 주이고 <body>태그는 문서의 내용을 기술한다. <head> 태그를 살펴보면 가장먼저 <meta charset="EUD-KR">이 있다. meta는 데이터를 설명해주는 정보를 의미하는데 meta태그는 문서의 정보를 기술해 준다.meta태그의 charset속성은 문서의 인코딩이 어떻게 되어있는지를 알려주는 속성이다. 다음으로 title 태그는 문서의 제목을 알려준다 title태그의 HTML이 실제 웹브라우저 제목에 기재되어있는 것을 확인할 수 있다.
#<body>태그?
<body>태그에는 문서의 실질적인 내용을 기술한다.
가장먼저 보이는 H1태그는 Headline으로 머릿말을 뜻한다. H1부터 H6까지 존재하며, 숫자가 높아질수록 글씨가 작아진다. 즉 H1은 가장 큰 글씨로 표시된다.
바로 밑에 <HR>태그는 내용 구분선이다. 이 태그는 나홀로 태그라고도 불리며, 시작과 끝이 없이 단돈으로 사용된다.
그다음으로 <p>라는 태그가 보이는데 <P> 태그는 한 문장을 의미한다.
즉, 개행을 해주는데 <P>태그 외에도 <br>태그를 이용하여 개행을 할 수 있다.
#a태그
<a href="..."> 부분은 링크와 같은 역할이다. 하이퍼링크를 달아서 다른 사이트의 주소와 연결시크는 것이다. 속성값을 _blank로 한다면, 웹 문서가 새로운 창으로 열린다.
! 그 외의 자주 쓰이는 속성이나, 스타일, 이미지 등은 예제와 함께 보겠다.
html 학습 사이트 추천 (https://www.w3schools.com/)
2. table 태그
|
테이블 태그 이름 |
설명 |
|
tr (table row) |
표 태부 행 태그 |
|
th (table header) |
행 내부 [제목 셀 태그] |
|
td (table data) |
행 내무 [일반 셀 태그] |
#테이블 태그의 기본적인 <body> 태그의 형태이다.
테이블 형식을 만들기 위해서는 먼저 <table> 태그안에 <tr>, <th>, <td>로 이루어져 있다. <tr>태그는 한 행을 의미하며, <th>는 table head로 굵은 글씨로 표현되며 중앙 정렬이 자동으로 되는 것을 알 수 있다. <td>는 해당 테이블의 데이터가 들어가는 부분이라고 이해하면 쉽다. 각 <hd> 속성에 align ="center"은 중앙정렬이다.
마지막으로 table 속성에 border="1"은 1픽셀의 굵기로 표테두리를 만들어주며,
style = width:100%는 웹브라우저 창크기에맞게 100%들어간다는 뜻이다.
'Foundation > - JSP' 카테고리의 다른 글
| Session (0) | 2017.11.17 |
|---|---|
| ArrayList를 이용한 회원정보 출력 (1) | 2017.11.15 |
| HTML - <form>, get, post 방식 (0) | 2017.11.15 |
| 서블릿(Servlet) (0) | 2017.11.14 |
| 웹프로그래밍의 이해 (0) | 2017.11.09 |
