HTML5
참고서적 : 한 권으로 끝내는 Java 웹 개발서
HTML5 구조(p20)
<! DOCTYPE html> : HTML5 문서임을 나타냄
<HTML></HTML> : 문서의 시작과 종료를 나타냄
<meta charest="EUC-KR"> : 한국어를 인코딩으로 처리
<TITLE></TITLE> : 웹브라우저 제목 표시줄
<BODY></BODY> : 웹 페이지상 보이는 모든 내용body 태그(p26)
<p class = "myfont" > Hello Wordl! </p>
시작태그 속성 속성값 내용 종료태그
<h1>~<h6> : 문장의 제목사용 및 자동 줄바꿈 기능
<br> : 줄바꿈 (종료태그가 따로 존재x)
<pre> : </pre>에 속한 공백, 줄바꿈... 등 그대로 표현 시켜줌
<div> : 블록 영역으로 공간을 분할하는데 이용 (<br>기능이 없음)
<span> : 인라인 영역으로 공간을 분할한다.(줄바꿈 x)
<img src=" " width=" " height=" " alt=" ">
파일명, 웹상 경로 너비 높이 없는 경우, 에러 메세지
리스트 태그(p36)
<ul> : 리스트 형식의 태그
<li></li> : 세부 리스트 항목
<li></li>
<ul>
<ol type="A"> => ex) A. ___ type="50" : ex) 50. ___
<li></li> B. ___ 51. ___
<li></li>
</ol>
정의 태그(p37)
<dl>
<dt>정의할 용어</dt>
<dd>용어 설명</dd>
</dl>하이퍼링크(p38)
<a href= " " target="_______ " ></a>
_blank : 새창 또는 새탭에서 연결된 문서 오픈
_top : 현재 창에서 연결된 문서 오픈
(기본값) _self : 연결된 문서를 동일한 프레임에서 오픈
_parent : 상위 프레임에서 연결된 문서 오픈
테이블(p40)
<table> : colspan="4"(열 4칸 테두리로 묶음), rowspan="2"(행 2칸 테두리로 묶음)
<caption> ... </caption> : 표 상단 제목
<tr>
<th></th> : 표 내부 제목
<td></td> : 표 데이터
</tr>
</table>
입력양식(p44)
<form> : 응답받는 양방향 의사소통을 지원
<form action="URL" enctype=" " method="get/post" target="윈도우명" >
- action : 내용처리를 위한 서버 쪽 URL을 지정
- enctype : Key=value를 Map형태로 표현
- method : get(길이 제한 및 주소 출력), post(대용량,보안)
- target : 처리결과를 표시할 윈도우명
<input type="text" >
- password, checkbox, radio, submit, reset, button, image, file, hidden
html5때 추가 - date, month, week, time, email, url ...
<select> : 선택양식
<optgroup label=" "> : 옵션의 그룹화
<option></option> : 옵션 추가
</optgroup>
</select>
<fieldset> : 입력양식 그룹지정
<legend> : 입력양식 그룹이름
정규표현식(p61)
- [a-zA-Z]{n} : n개만큼 영문 a-z,A-Z를 입력합니다.
- [0-9]{n} : n개 만큼 0~9숫자를 입력합니다.
- [A-Za-z0-9]{min, max} : 영문자와 숫자를 min ~ max만큼 글자수를 입력합니다.
- [0-9]+ : 숫자를 1개 이상 입력합니다.CSS3
스타일 시트 선언(p77)
<style type="text/css">
코드작성
</style>
스타일 시트(p78)
<head>
<title>Insert title here</title>
<style>
span{ color: red; } // 내부 스타일 시트
@inport url("style.css"); // @import를 이용(복수 가능)
@import url("style2.css");
</style>
<link rel="stylesheet" type="text/css" href="style.css"> // 외부 스타일 시트(성능 속도면 우세)
</head>
선택자(p80)
1. 전체 선택자
<style>
*{ font-family: "Comic Sans MS"; }
</style>2. 타입(태그 선택자)
<style>
h1{ font-family: "Comic Sans MS"; }
</style>3. 아이디(ID) 선택자
<style>
#t1{ font-family: "Comic Sans MS"; }
</style>
<body>
<span id="t1"> ... </span>
</body4. 클래스(Class) 선택자
<span class="abc"></span>
<p calss="abc"></p>
.abc{ }
p.abc{ }5. 속성 선택자(p84 표 참조)
태그명[속성명]{속성: 값;}6. 가상 클래스 선택자(p86)
태그명:가상요소명{속성: 값};7. 후손(하위) 선택자(p88)
선택자 선택자{속성: 값;}8. 자식 선택자(p88)
선택자 > 선택자{속성: 값;}
ex) .footer > h3{ color: blue; }9. 형제 선택자, 10. 인접 형제 선택자(p90)
A ~ B인 경우 선택자 A 뒤에 위치하는 선택자 B를 모두 선택11. 그룹 선택자(p92)
<style>
h1, div, p { 코드 } // , 콤마를 기준으로
</style> 주요 스타일 속성(p94)
1. font(p94)
font-family : 글꼴 설정
font-size : 문자 크기
font-style : 문자 기울기
font-weight : 문자 굵기
font-variant : 문자 대문자
line-height : 줄 간격 조절
font : font 속성을 한 번에 기술 가능2. text(p96) : 문단 속성
text-decoration : 문자에 밑줄 또는 취소선 넣기
text-align : 문단을 왼쪽, 가운데, 오른쪽 정렬
text-indent : 문단의 들여쓰기, 내어 쓰기를 지정
text-transform : 영문자 모두를 대문자 | 소문자 변경
letter-spacing : 글자 간격 조절
word-spacing : 단어 간격 조절
vertical-align : 문자와 문자간의 수직 정렬
white-space : 줄바꿈에 대한 설정3. border(p98) : 테두리 속성
border-width : 선의 굵기
border-style : 선의 형태
border-color : 선의 색상4. list-style(p99) : 리스트 속성
list-style-type : 리스트 앞에 오는 불릿의 타입 결정
list-style-image : 리스트 불릿을 이미지로 사용
list-style-position : 리스트의 불릿이 밖에 있을지 안에 있을지 결정
list-style : 리스트 속성들을 한번에 사용5. background(p101) : 배경 속성
background-color : 배경 색상
background-image : 배경 이미지
background-repeat : 배경 이미지 반복 여부
background-position : 이미지 위치
background-attachment : 화면 스크롤 시, 배경 이미지가 어떻게 동작하는지 설정6. border(p102) - 테이블 속성
border-collapse : 테이블 셀 간의 간격 여부 설정
border-spacing : 테이블 셀 간의 공백 크기를 조절
empty-cells : 테이블에서 빈 셀에 대해 그 셀의 테두리나 배경을 브라우저에 보여줄 여부 설정
table-layout : 셀의 너비 고정/가변 설정
vertical-align : 셀 안에서 수직 정렬
caption-side : 캡션의 위치를 정하는 속성7. margin(p106) - 테두리와 바깥 영역
margin : 여백 속성을 이용한 스타일을 한 줄에 설정( top | right | bottom | left )8. padding(p107) - 내용과 테두리 사이 영역
padding : 패딩 속성을 한 줄에 설정( top | right | bottom | left )9. border(p109) - 테두리 속성
border-style, width, color, ( top | right | bottom | left )각 요소의 기본 속성(p94)
block : <div>, <h>, <p>, <ul>, <ol>, <form>
Inline : <span>, <a>, <img>
* position, z-index(p129)
* float, clear(p133)
* 레이아웃(p136) : 페이지 참조
🔥 머릿속으로 생각하지만 말고, 행동으로 보여줘