Web Application - Java
- Oracle
- Html/CSS
HTML/CSS
문서 노드 구조
<h1> ~ <h5> 머릿말
<hr> 분리 선
<p> enter
<p align = "left/center/right"> 줄 정렬
<br> 줄바꿈
-> 공백문자하나추가
⁢ -> <
&get; -> >
& -> &
" -> "
<pre></pre> 공백,줄바꿈 등을 그대로 입력해서 출력
<xmp></xmp> <>" 등의 기호도 그대로 입력해서 출력
BODY문
<body background="파일경로"> 배경이미지
<body bgcolor="색깔"> 배경색깔
<body oncontextmenu="return false"> 마우스 우클릭 금지
<body onselectstart="return false"> 마우스 드래그 금지
<font>는 하지말자..
리스트
<ol> <ul> <li>
테이블
<table>
<tr> 행
<th> 열에 대한 제목(머릿말)
<td> 셀 데이터
각 행마다 colspan이 다를 때, 제일 큰 셀을 기준으로 한다.
<td colspan> <td rowspan>
링크
<a href="링크주소">링크</a>
<a href="링크주소" target=_blank>링크</a> 새로운 페이지에서 보여주기
_blank(새로운 창에서 출력),
_parent(현재 프레임의 부모 창에서 출력),
_self(현재 자신 창에서 출력),
_top(가장 처음 열린 창에서 출력)
<a href="링크주소#단락위치">링크</a>
iframe
- 엄청많이한다
HTML안에 또 다른 HTML을 넣는다.
.htm 예전에 만들어진 파일이거나 예전에 만들어진 파일을 불러오는 파일
<iframe></iframe>
form
get방식
post방식
- 데이터 전달
스타일 시트,CSS(Cascading Style Sheet)
- 보여지는 정보를 화려하게 장식하여 표현하기 위하여 쓰는 HTML태그
HTML - 문서의 내용,문서의 구조적인 것 -> CSS - 문서 표현하기
XML - 문서의 내용(DTD/SCHEMA) -> XSL - 문서 표현하기
CSS 문서 적용하기
1. 태그 내부 삽입형
<태그 style="속성:값; 속성:값;">내용</태그>
-> <span style="background:skyblue; font-weight:bold">태그 내부형</span>
2. 문서 내 지정형
<style type="text/css">
스타일 내용
</style>
-><head>
<title></title>
<style type="text/css">
p{margin-left: 30pt; font-size: 15pt}
h3{color: red}
</style>
</head>
<h3>이것은 붉은색 제목3입니다.</h3>
<p>이 문단은 왼쪽 여백이 30pt이고, 문자 크기가 15pt입니다]
.</p>
3. 외부 문서 삽입형
<link re=stylesheet href="스타일외부파일" type="text/css">
//2번과 결과는 같다
->sample.css
p{margin-left: 30pt; font-size: 15pt}
h3{color: red}
-><head>
<link type="text/css" rel="stylesheet" href="sample.css">
</head>
<body>
<span style="background:skyblue; font-weight:bold">태그 내부형</span>
<h3>이것은 붉은색 제목3입니다.</h3>
<hr>
<p>이 문단은 왼쪽 여백이 30pt이고, 문자 크기가 15pt입니다.</p>
<p>2차 p 태그입니다.</p>
CSS 적용 방법
1. 태그 선택자
태그(속성:속성값)
2. 클래스 선택자
.클래스명(속상:속성값)
<태그 class = 클래스명>
3. 아이디 선택자
#아이디명(속성:속성값)
<태그 id=아이디명>
복수 선택자
태그1, 태그2(속성;가속성값)
태그1, 태그2(속성 속성값)
하나의 태그에 여러개의 선택자
태그명,클래스명(속서이소성값)
태그명.%아이디명(속성; 속성값측정)
박스모델
<div></div>
padding - 글 내용과 라인과의 거리(여백)
border - 선 두께
margin - 밖에 있는 여백
body{ margin: 2em } /* top, bottom, left, right=2em */
body{ margin: 1em 2em } /* top, bottom=1em & left, right=2em */
body{ margin: 1em 2em 3em } /* top=1em & left, right=2em & bottom=3em */
->(margin (border (padding ( 글 ) padding) border) margin)
텍스트
text-decoration
- 텍스트에 밑줄이나 윗줄을 긋게 한다.
색과 배경
시각적 효과
visibility
- 보이지 않게 한다
layer
- 레이어는 서로 겹칠 수 있기 때문에 z-index를 순서대로 지정하여 제일 큰 숫자가 젤 위에 보이게한다
커서
필터
JavaScript 홈페이지, 참고하기
KoXo 자바스크립트 매뉴얼 - 메인 인덱스
koxo.com
http://www.trio.co.kr/autocss.html
http://www.trio.co.kr/autocss.html
www.trio.co.kr
'Study > HTML, CSS' 카테고리의 다른 글
| [HTML5/CSS/Javascript] 스티키 노트(포스트잇) 만들기 (0) | 2019.05.27 |
|---|---|
| [HTML/CSS] 메뉴 탭 처럼 만들기 (0) | 2019.05.27 |
