[HTML 기초] HTML 기초 두번째

///////////////////////// 어제 복습 : HTML 기초부분1 //////////////////////////////////////
1. html 형식
<html> : html을 묶는 틀.
<head> : 주로 title지정.
<meta> : content type을 지정.
<body> : body부.

2. html tag

1). <p></p>
: paragraph(문단 구분하는 tag)
: paragraph끼리 어느정도 띄어져있음.

2). <em></em>
: Displays text emphasized (generally italicized)
: 이태리체로 변환.<기울임체>

3). <strong></strong>
:Displays text as strongly emphasized (generally bold)
: 굵은글자

4). <h+number> </h+number>
: <h1></h1> : 제일 큼.
: <h6></h6> : 제일 작음.

5). 일련된 numbering
<ol> : An ordered list
:<ol></ol> 안에는 Defines a list item within a list 가 들어갈수 있다.
ex) <ol>
<li>첫번째</li>
<li>두번째</li>
</ol>

6). <ul></ul> : 순서가 없는 아이템 < 앞에 기호가 붙음.>
: 역시 안에 Defines a list item within a list 가 들어갈수 있다.
<li></li>

7). <a></a> : attribute
ex> <a href="naver.com"> </a> : 링크가 됨.

8). <img /> : alt , src는 반드시 attribute로 반드시 사용해야함.
<img /> option attribute
1). width="" : 가로길이 <px>
2). height="" : 세로길이<px>
3). alt = "" : 이미지 이름
4). src = "" : 이미지 소스

ex> <img alt="소시" src="개굴서현.gif"/>

9). 왠만하면 사용하지 마세요 : table : table을 사용시 느려짐.
<table border="1">
<tr>
<td>row1, column1</td>
</tr>
<tr>
<td>row2, column1</td>
</tr>
<tr>
<td>row3, column1</td>
</tr>
</table>
table의 border : 윤곽선.

<td colspan="2"> : 가로를 2만큼 합침.
<td rowspan="2"> : 세로를 2만큼 합침.

10). form

1) 첫번째 form 실습
//<form action = "전송될 대상">

*form 의 attribute중 method
: default get방식 : 주소창에 get방식이 나옴 ex) html04.html?girl=YS
: method = post <숨겨져서 전송된다.> 주소창에 경로가 나타나지않음.

2) ID /Pass
ex) PASS : <input type="password" name="pass"/>

3) Hidden(?) : 보이지 않는다는 특징밖에 없는것처럼 보이지만 많이 사용.
ex) HIDDEN : <input type="hidden" name="h" value="hidden"/>

4) Checkbox (체크 할수 있는것.)
ex) <input type="checkbox"/>

5) radio
ex) <input type="radio"/>

6) submit
ex) <input type="submit" value="전송"/>

7) 선택바..
ex) <select name="girl"> // Checkbox 임.
<option value="taegi"> 김태희 </option>
<option value="YS"> 한예슬 </option>
<option value="SS"> 소시 </option>
</select>
8) 파일
ex) <input type="file"/>

9) reset
ex) <input type "reset" value="리셋"/>

<form 에서 radio & checkbox 비교>
1. checkbox : 여러개 고를수 있는것.
답을 고르시오
<input type="checkbox" name="c" value="f"/>float<br />
<input type="checkbox" name="c" value="d" checked="checked"/>double<br />
<input type="checkbox" name="c" value="l"/>long<br />

2. radio : 하나만 고를 수 있음
답을 고르시오 하나
<input type="radio" name="ra" value="1"/>1
<input type="radio" name="ra" value="2"/>2
<input type="radio" name="ra" value="3"/>3
<br />

3. file : 파일 탐색기.
<input type="file"/>

4. reset : 초기화
<input type "reset" value="리셋"/>

5. submit : 전송
<input type "submit" value="전송"/>

///////////////////////// 오늘 수업 : HTML 기초부분2 ////////////////////////////////////

* frame : 요즘에는 권장되지 않지만 과거 많이 사용했었음.

FRAME 을 웹브라우저에서 지원안될수 있음.
그래서 지원안될 경우를 대비해서 <noframes> 안에 있는 부분을 실행.

사용안하는 이유: 프레임을 사용하면 페이지 로딩시간이 느려짐.<웹서버에 과부하도 많이생김.>

ex)
<frameset >
<frame />
<frame />
<noframes>
<body>
<p>This page uses frames. The current browser you are using does not support frames.</p>
</body>
</noframes>
</frameset>

1) frame attribute : cols

///////////////////////// 오늘 수업 : CSS 기초부분1 ////////////////////////////////////

1. Style 지정

1) 선택 Style 지정방법 <p style="attribute색상">
: 선택 Style 지정시 해당 tag에서만 적용된다.

ex)
Style color: <p style="color:색상">

색상지정방법
: 이미정의되어있는 색상 filed명사용하기 ex) black
: RGB값 사용하기. (#16진수:3자리<00 00 00>)

ex) Style color, border:
<p style="color:#999; border-style:solid; border-color:blue; border-width:2em">

* border-width:2em => border-width를 글자크기 2배로.
* 3가지<두께,스타일,색깔> 정의 한번에 <style = "border:2em solid blue;">

2) 전역 Style 지정방법.
: 전역 Style 지정시 해당 전역에 포함되는 tag는 모두 적용된다.
주로 ..<title>밑에 <style>선언.

ex) <style type="text/css">/* style 내에서의 주석.*/
// 모든 paragraph<p>에 {}내용 전역 적용.
p{
text-align: center; // text-정렬: left / right / center
color : blue;
}
</style>

ex) <pre> tag : 내가 친 문자열 그대로 나오게하기.(띄어쓰기도 모두 적용)
<pre></pre>

-------------------------------------------------------------------------------------------
* style 우선순위에 대해서 알아보자!!!

1. 선택 정의한 style
2. 전역 정의한 style
-------------------------------------------------------------------------------------------

2. select 선택자를 사용하기 <"*(모든것)" , " .(class)" , "#(id)">
class : 중복사용가능
id: 하나만 사용가능.

ex)
//Class
.red{
color : red;
}
<pre class="red"> 줄바꿈 </pre> : tag에 class 정의
<p class="red"> 뿅뿅 </p> : 똑같은 결과 출력.

//ID
#white{
color:white;
background-color:black;
}

<p id="white"> 화이트로 gogogogogo</p> => 적용완료.
<p id="white"> 화이트로 gogogogogo2222</p>
=> 적용은 되지만 이렇게 사용하면 안됨.
id 가 계속 여러개가 중첩되는 경우가 발생시 적용이 안되는 결과가 초래될수 있음...

///////////////////////// 오늘 수업 : CSS 기초부분2 ////////////////////////////////////

CSS FILE 생성

1. div tag 사용 <division 의 약자>
:div 가 테이블을 대신하는 녀석임.

//1. classC.css : css file에 style 정의.

------------------------------------------------------------------------------------
//div Style 정의
div {
border:0.5em solid blue; //
text-align:center;
/*padding,margin 시계방향으로 위부터*/
padding:5px 10px 5px 100px;
margin:10px;
}

//div의 abs id 정의
div#abs{
background-color:fuchsia;
position:absolute;
left:10px;
top:20px;
}

//div 의 front class정의
div.front{
z-index:10;
}
--------------------------------------------------------------------------------------

//2. CSS.html 에서 적용.

//원래 위치할 자리에서 변화
div{
position: relative;
left:10px;
top:20px;
// 결과 : 왼쪽으로 10px띄고, 위로 20px띄움
// 위치할 자리를 수동으로 지정.
position: absolute;
}

*padding : 내용과 칸사이의 거리.
*margin : 칸과 칸사이

1) <div와 span의 차이>
*div는 줄바꿈이 되고,
*span은 옆으로 계속 붙는다.

ps. 나머지 속성들은 htmldog.com 에서 확인할 것.

<<float : 속성 >> 속성 : left / right / none/ inherit
: 왼쪽 / 오른쪽에 둥둥 떠있음.
: 이걸 사용해서 테이블 대체
: 줄바꿈하고 싶을 때에는 clear

ex)
<span class="dung" style="clear :right;">5번째</span>
이걸 사용해서 붙이는 것이다.

<<width : 10em;>>
<<background-color: yellow;>>

===========================================================

오후 수업 시작

===========================================================

(1) CSS의 선언
<1> Selector 와 선언부 (p.text : Selector, {} : 선언부)

<2> Selector는 ,로 구분할 수 있다.

<3> 일반 선택자
- 공용 선택자 * : 모든 태그 지정
- 타입 선택자 A : 태그 A 지정
- 클래스 선택자 .A : 클래스가 A인 태그를 지정
- ID 선택자 #A : 아이디가 A인 태그를 지정

<4> 복합 선택자
- 하위 선택자 A B : 태그 A로 감싸져 있는 모든 태그 B 지정

<5> 가상 클래스 선택자
- :first-child선택자 A:first-child : 태그 A로 감싸져 있는 가장 처음 태그 지정
- 언어선택자 A:lang(B) : 태그 A중 언어가 B인 태그 지정
- 링크선택자 A:link : 태그 A중 링크가 걸려있는 것 지정
A:visited : 태그 A중 링크가 걸려있고, 사용자가 이미 클릭한 태그 지정
- 동적선택자 A:active : 태그 A중 사용자가 마우스를 누르고 있는 태그 지정
A:hover : 태그 A중 사용자가 마우스 포인터를 위에 올려놓은 태그 지정
A:focus : 태그 A중 사용자의 키보드 입력을 받는 태그 지정

어떤 tag 안쪽에 있는 것을 바꿀 수 있다.

ex) 실습 " a " tag 변경

// a tag안에 link,visited 설정 변경.
a:link,a:visited{
color: gray;
text-decoration: none;

}
text-decoration: none / blink

//span(a) tag안에 hover 스타일을 변경

span:hover{
background-color: maroon;
border-bottom-style: groove;
border-bottom-width: 2em;

}

// 만약 width / height 를 넘게 될경우
overflow : visible / auto / scroll / hidden

visible : 스크롤은 안생기지만 억지로 나옴..
auto : 넘치면 스클롤 생성 / 넘치지 않으면 스크롤 생성 안함.
scroll : 스크롤 무조건 생성

--------------------------------------------------------------------------------------------------
마지막 시간
--------------------------------------------------------------------------------------------------

(4) DOM(Document Object Model)
DOM(Document Object Model)은 웹페이지에 표현되는 모든 속성에 대해 객체화 하여
이를 자유 자재로 사용할 수 있도록 만든 것이다.

<title>JS 첫번째</title>
<script type="text/javascript">
// 한줄주석
/* 여러줄 주석*/
var result=0; //멤버변수
function start(){
var test="지역변수에요";

//dom : document of model
//window : 브라우져창. window는 생략가능

window.alert(test);
alert(result++);
//결과 : dialog 창이 뜸. <이벤트>

var v = prompt("입력하세요"); //입력받는 창이 뜸.
alert("니가 입력한 값임 : "+v);

if(v=="1"){
alert("1을 입력하셧꾼용");
}else{
alert("니가 입력한 값임 "+v);
}
}

</script>
</head>
<body onload="start();"> //로딩시(onload)에 start(); 메소드를 실행해라!
</body>
</html>

//변수앞에는 반드시 var를 붙여줄것..
//변수는 무조건 var로 통일
//값 비교할때도 ==으로만 함.

body문 안에서도 사용할 수 있다.
<body>
<script type="text/javascript">
window.document.write("이필노 이제 제발 그만 졸아");
</body>

document.write(); // 배경화면에 깔림.

'웹 개발 > HTML / JSP' 카테고리의 다른 글

[ HTML / JSP ] Input type 종류들... (0)	2009.06.25
[ JSP 기초] JSP의 Script 요소 (0)	2009.06.25
HTML 기초 (0)	2009.06.25

재미있게 살자