HTML #2

1. 경로 지정 ★

1) 개념

외부 파일을 참조할 때 외부 파일의 위치 (경로)를 알려주는 방법

2) 경로 지정 방법 2가지

(1) 절대 경로

• / 로 시작함
• 기준은 / 이다. http://127.0.0.1:5500/ 와 동일
  예> http://localhost:5000/sample.html
  http://127.0.0.1:5500/app1/sample.html

만약 경로를 /app1 로 지정하면 http://127.0.0.1:5500/app1/ 동일하다

(2) 상대 경로

• / 시작 안 함
  시작은 . 또는 .. 또는 그냥 타겟 파일 (target.html, js, css, png 등) 지정함

• 기준은 현재 페이지이다
  예>
  현재 경로: http://127.0.0.1:5500/app2/main2.html
  타겟 경로: http://127.0.0.1:5500/app1/sample.html

• . : 현재 디렉토리 의미
  .. : 부모 디렉토리 의미

2. 태그 및 값 그룹핑

1) 태그 그룹핑

• div 태그 사용 (현재는 시멘틱 태그와 병행해서 사용한다)
• 대표적인 블럭 레벨로서 기본적으로 전체 너비를 사용한다
• 블럭 레벨은 width 와 height 값을 지정할 수 있다

• 대표적인 블럭 레벨

• div, p, 시멘틱태그, ul,ol,li, table, form, hr

2) 값 그룹핑

• span 태그

안녕하세요. <span>홍길동</span>님

• 대표적인 인라인 레벨로서 필요한 만큼의 너비를 갖는다
• 인라인 레벨은 width 와 height값을 지정해도 적용이 안 됨

• 대표적인 인라인 레벨

• span, a , img, input, button, textarea

3. 시멘틱 태그 (sementic tag)

• 개념: '의미를 갖는다' 뜻으로 각 태그가 자신만의 의미가 있음을 뜻한다
• 종류:

<header> : 웹사이트 소개 정보나 메뉴, 로고등이 포함될 수 있음
          과거에는 <div id="header"> 형식으로 사용됨
		  현재는 <header>로 지정해서 사용됨
<main> : 웹사이트의 메인 항목 포함
           과거에는 <div id="main"> 형식으로 사용됨
<section> : 실제 문서 내용 포함
<article> : 문서내용이 많을 경우에 여러 개의 주제로 나눌 수 있음
<nav> : 사이트의 메뉴나 링크 포함
<aside>  : 배너 광고 포함
<footer> : 회사 소개, 저작권 정보등 문서 하단에 배치되는 항목 포함

4. 사용자 입력 태그 ★

: 사용자에게 값을 입력 받을 수 있는 태그

==> 반드시 form 태그로 감싸야 된다
버튼을 클릭했을 때 사용자 입력값이 서버에 전달될 수 있다

1) 단일값

<input type="text" name="" >
<input type="text" name=""  maxlength="4" required> 

required : 반드시 값을 입력
유효성검사를 클라이언트뿐만 아니라 서버에서도 해야 된다

2) 비밀번호

<input type="password" name="" >

3) radio

<input type="radio" name="gender" >남
<input type="radio" name="gender" checked>여

4) checkbox

<input type="checkbox" name="" >

5) email

<input type="email" name="" >

6) number

<input type="number" name="" >

7) file

 <input type="file" name="file"> 

8) date

<input type="date" name="xxx">

9) color

<input type="color" name="xxx">

10) textarea

<textarea name="description"  cols="30" rows="10"></textarea>

11) select

<select name="학년" >
      <option value="1학년">1학년</option>
      <option value="2학년">2학년</option>
      <option value="3학년">3학년</option>
</select>

5. form 태그

• form 태그로 감싸야 버튼을 클릭했을 때 사용자 입력값이 서버에 전달될 수 있다
  

<form action="target.html" method="get|post">
사용자입력태그
..
<button>전송</button>
<input type="submit" value="전송" >
<input type="button" value="전송" > <== 서버로 전달이 안 됨. JS추가해서 전달이 가능
</form>

• 사용자가 입력한 데이터(폼데이터)가 서버로 전달되는 방법 2가지

1) GET 방식

• 기본방식이고 URL에 사용자 입력한 폼데이터가 포함되어 전달된다
• 표현식:

http://127.0.0.1:5500/target.html?userid1=aaa&password=1234 
http://localhost:5500/타겟?input태그의name값=입력값&input태그의name값=입력값

• ? 뒷부분은 query string이라고 부른다
• 서블릿에서 doGet 메서드가 처리함

2) POST 방식

• URL에 사용자 입력한 폼데이터가 포함되어 전달되지 않지만 내부적으로 전달한다

• 표현식:
  http://127.0.0.1:5500/target.html
  userid1=aaa
  password=1234

• 서블릿에서 doPost 메서드가 처리함
  만약에 일치하는 메서드가 없으면 405 (허용하지 않는 메서드) 에러가 발생됨

6. 기타

1) image 보여주기

• img, png

<img src="절대|상대"  width="" height="" alt="대체텍스트" >

2) 화면 재사용하기

<iframe src="" ></iframe>

3) 특수문자

• html은 스페이스바 및 탭이 적용 안 됨

    공백 :  
     < : &lt;
     > : &gt;
     " : &quot;

4) 참고 웹사이트
http://www.w3schools.com ( 초급자용 )
http://developer.mozilla.org ( 중급이상 )