코딩을 배우면서 느끼는 것은 기본기가 중요하다는 것이다.
그래서 기초적인 걸 다시 정리차원에서 적어둔다.
HTML5의 기본적인 템플릿 구조는 이렇게 되어 있다.
스마트폰에서 접속하는 걸 고민하지 않게 하는 한줄이 viewport 기능이다.
익스플로러의 최대 단점은 버전별로 보여지는 웹의 모습이 많이 다르다는 것이다.
마이크로소프트사는 X-UA-Compatible 태그로 웹의 호환성을 지정할 수 있도록 하였다.
바로 X-UA-Compatible 태그다.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
edge라고 기록된건 IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻이다.
모든 버전에서 사용가능한 사이트라고 하면 edge만 추가해주면 된다.
<!DOCTYPE html> <!--HTML5 선언 -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/><!--화면 사이즈를 고려하지 않아도 적절하게 표시 -->
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" /> <!--브라우저 호환성 설정 -->
<title>HTML 서식</title>
<!-- Include the jQuery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
문서본문
</body>
</html>
HTML5 에서는 <script type="text/javascript"를 넣지 않아도 된다.
Web은 HTTP(Hyper Text Transfer Protocol) 라는 프로토콜에 따라 서버와 클라이언트 간의 통신을 수행한다.
HTML은 태그를 통해 정보를 구조화한다.
태그란?
- 문서의 글자크기, 글자색, 글자모양, 그래픽, 링크 등을 정의하는 명령어
- 꺽쇠괄호 ‘<>’를 사용 <html>
- 일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍 <table></table>
- 태그의 종류는 엄청 많다. 문법과 용도에 맞게 사용해야 한다.
Web browser마다 랜더링 방식이 서로 달라 HTML5가 나왔다.
- HTML에 화면 표시와 관련된 태그까지 추가하게 되자 간단하게 해결하고자
CSS(Cascading Style Sheets)가 담당하게 했다.
화면에 정보를 보여주는 방법으로 가장 많이 사용하는 것이 테이블이다.
테이블은 table 태그를 사용한다.
테이블 선언 <table></table>
- 테이블 행은 <tr>을 사용
- 행을 셀로 분할하는 태그는 <td>를 사용, 제목 태그는 <th>를 사용
- 테이블의 너비, 테두리, Padding, 셀간격, 경계설정 등은 CSS를 사용
- CSS 는 head에 정의한다.
<style>
table,tr,td {border:1px solid #000000}
</style>
테이블에서 셀간에 병합을 하는 것은 셀에 해당하는 <tr>, <th> 테그이다.
영어로 행에 해당하는 row, 열에 해당하는 column 을 사용하여
위아래 행을 병합하는 것은 <tr rowspan="합치고 싶은 만큼의 숫자">
같은 행에서 옆으로 병합하는 것은 <tr colspan="합치고 싶은 만큼의 숫자"> 로 하면 된다.
테이블에서 실제 정보가 표현되는 것은 <tr> 태그이다.
예제를 살펴보자.
DB와 연결하기 위해 DB 연결파일을 include 하고 나서, 테이블 태그를 작성하고 실제 내용을 채울 곳은 while 문으로 반복해서 <tr><td>내용</td></tr> 구조로 작성된 것을 알 수 있다.
<?php
include_once 'dbconnect.php'; // DB 연결
echo '<table border="1">';
// 제목
echo '<tr>';
echo '<th ALIGN=CENTER BGCOLOR="#9DEEE1">번호</td>';
echo '<th ALIGN=CENTER BGCOLOR="#9DEEE1">구분자</td>';
echo '<th ALIGN=CENTER BGCOLOR="#9DEEE1">연관번호</td>';
echo '</tr>';
$sql = "SELECT uid, classname, relateduid FROM category ORDER BY uid DESC";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result) ){ // DB에서 가져온 갯수만큼 테이블 행 생성
// 내용
echo '<tr>';
echo '<td ALIGN=CENTER>'.$row['uid'].'</td>';
echo '<td ALIGN=CENTER>'.$row['classname'].'</td>';
echo '<td ALIGN=CENTER>'.$row['relateduid'].'</td>';
echo '</tr>';
}
echo '</table>';
?>
Web 에서의 특수문자
공백 |
|
> |
> |
< |
< |
'Web 프로그램 > Layout' 카테고리의 다른 글
| bxslider 사용 예제 (폴더내 파일 자동 인식) (0) | 2017.04.28 |
|---|---|
| [PHP] 현재 디렉토리 경로 설정 (자동인식) (0) | 2017.02.20 |
| 모바일, PC 구분하는 코드 (0) | 2017.02.12 |
| 부트스트랩 테이블 Layout 구조 파악 (0) | 2017.02.01 |
| [jQuery Mobile] 스마트폰 Layout (0) | 2016.11.11 |
Link2Me
