맨 처음 새 HTML페이지를 만들 때 생성되는 <! DOCTYPE html>는 생략할 경우 html 버전 4로 번역해주고 작성할 경우 버전 5로 번역해 준다.
[콘텐츠 묶음 코드 <p> <div><span>]
<p> : 콘텐츠 묶음 (블럭태그로 단락과 단락 사이에 공간이 생긴다.)
<div> : 컨텐츠 묶음 (블록태그)
<span> : 콘텐츠 묶음 (인라인 태그)
ㄴ 콘텐츠를 표현할 때도 묶고 나서 내림을 할 건지 옆으로 나열할 건지에 따라 span과 div로 사용된다.
<mark> : 형광펜(강조)
웹표준에 따라
의미가 없는 간단한 강조의 경우 <b><i>
의미를 부여한 강조는 <b> -> <strong> // <i> -> <em>으로 표기한다.
웹표준 : 장애인 비장애인 모두에게 동등한 서비스를 제공할 수 있는 것을 목표로 한다.
태그를 쓰는 이유는 의미를 구분하기 위해서 사용되며 태그를 쓸 때 의미에 맞게 사용할 수 있도록 한다.
[목차 <ol> || <ul> && <li> ]
순서 있는 목록 : <ol>
순서 없는 목록 : <ul>
<li> : 혼자만 사용되는 것이 아닌 위 태그 안에 종속되도록 사용되어야 하며 ol과 ul 중 같이 사용되어야 한다.
모든 태그는 속성을 가지고 있다.
<ul type = "disc" (기본값) ||"circle", "square">
<ol type = "1"(기본값) || "a", "A", "i">
*사전형 목록 : <dl>
제목 <dt>
내용 <dd>
<!--주석-->
[경로 기법]
이미지는 외부 자원이며, 자원이 존재하는 위치를 알아야 한다.
- 절대 경로: 내가 어느 위치에 있든 경로는 바뀌지 않음. (ex. <img src = "c:/student_java/html/cat.jpg"/>)
- 상대 경로 : 나 자신이 있는 위치를 기준으로 외부자원을 찾아가는 방식 (ex. <img src = "cat.jpg"/> )
[이미지 태그 <img src>]
형식 : <img src ="이미지 경로"/> (단일 태그이므로 열자마자 닫아준다.)
1.alt = "대체 문자열" (필수 속성으로 꼭 작성해줘야 한다.)
2.width/height = "픽셀" > 사용자제 (이미지 크기)
3.hspase/vspace = "픽셀" > 사용자제 (이미지 간격)
4.align = "left | rigth" > 사용자제 (이미지 배치 위치)
5.border = "픽셀" > 권고안 : 0 값을 줘야 한다. (이미지 선)
GUI 기억할 세 가지 단어: 이벤트 소스, 이벤트, 이벤트 핸들러
이벤트 소스 : 이벤트를 가해지는 대상(터치)
이벤트 : 이벤트를 담고 있는 대상
이벤트 핸들러 : 이벤트를 구현하는 것
ㄴ css때 자세히 배울 예정
웹 프로그램은 비동기화 프로그램으로 (처리에 대한 결과를 바로 인지해서 처리할 수 없음) 페이지를 페이지로 이동하면서(연결) 제공한다. ( 동기화가 유지되지 않으면서 서비스가 지연 ,서비스를 제공받는 사람과 제공하는 사람으로 나눠지기 때문에.
처리에 대한 결과를 바로 인지해서 처리 할 수는 없다.)
ㄴ페이지를 페이지로 이동하면서 (연결) 제공 <a 태그>
[링크 태그 <a>]
<a href="url주소" > 이벤트소스(근원지) </a>
-target = "속성값"
ㄴ _self (동일 페이지)|| _blank (새 창)
ㄴ(_top과 _parent는 더 이상 안 씀)
같은 페이지 내 이동시
<a name ="hong"></a> 이동할 위치에 이름을 지정해 주고
이동 위치에 <a href = "#hong"> 홍길동 </a></li> (# name로 연결해 준다.)
<map>
[테이블 태그]
기본 디자인 : 제일 큰 레이아웃 먼저 만들기.
html : 콘텐츠의 관리
웹표준은 테이블을 이용하지 않고 레이아웃을 작성해야한다.
(화면에 대한 레이아웃을 잡는데 테이블 X, 정보 전달, 데이터베이스를 전달하기에는 테이블이 좋다.
[표만들기]
<table>
<tr>행
<td>테이블 데이터</td> <-- 데이터가 있어야 활성화된다.
</tr>
</table>
ㄴ th=td(인라인 태그)
*블록과 블록 사이 간격 : margin
*블록과 컨텐츠 사이 간격 : padding
*블록과 테이블 사이 간격 : margin
*칸(셀)과 칸(셀) 사이 간격 : spacing
* 경계선 :border
*bordercolor = 비표준
<table> 태그 속성
1. width / height ="픽셀 또는 백분율" (가로 세로)
2. align = left | center | right
3. cellspacing = "픽셀" (칸과칸 사이 간격 )
4. cellpadding = "픽셀" (셀 밖의 여백)
5. border = "픽셀" (선)
6. bordercolor = "색상"
7. bgcolor ="색상"
8.background = "이미지 파일"
<tr>태그 속성
1. height = "픽셀 또는 백분율"
2. bgcolor / background는 table 태그의 속성과 동일
3. align = left | center | right
4. valign = top | middle | bottom
<td> <th>태그 속성
1. width = "픽셀 또는 백분율"
2. bgcolor / background는 table 태그의 속성과 동일
3. align = left | center | right
4. colspan = "숫자" (열 병합)
5. rowspan = "숫자" (행 병합)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border ="1" width ="300" height ="300" align ="center" cellspacing ="0" cellpadding = "10" bordercolor ="red" background ="cat.jpg">
<tr bgcolor ="pink" align ="right" valign ="top">
<td colspan="2">data01</td>
<td>data03</td>
</tr>
<tr>
<td>data04</td>
<td>data05</td>
<td>data06</td>
</tr>
</table>
<hr>
<table border ="1" width ="300" height ="300" align ="center" cellspacing ="0" cellpadding = "10" bordercolor ="red" background ="cat.jpg">
<tr bgcolor ="pink" align ="right" valign ="top">
<td rowspan="2">data01</td>
<td>data02</td>
<td>data03</td>
</tr>
<tr>
<td>data05</td>
<td>data06</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border ="1" cellspacing ="0" background ="cat.jpg" width = "300" height ="300" align = "center">
<tr>
<td colspan = "2" align ="center">가</td>
<td rowspan ="2"align ="center">라</td>
</tr>
<tr>
<td rowspan = "2" align ="center">나</td>
<td align ="center">다</td>
</tr>
<tr>
<td colspan ="2" align ="center">마 </td>
</tr>
</table>
</body>
</html>
'개발자 > 백엔드 웹 개발자 과정(국비)' 카테고리의 다른 글
| 자바스크립트(1)_2022-12-27 (0) | 2022.12.27 |
|---|---|
| HTML(3),css(1)_2022-12-26 (0) | 2022.12.26 |
| 221222_HTML(1) (0) | 2022.12.22 |
| 2022년 12월 19일 _ 29회차 (JDBC) (0) | 2022.12.19 |
| [DB]테이블 생성, 삭제, 수정, 데이터 생성, 수정, 삭제 (0) | 2022.12.16 |