백엔드 개발자의 클라우드 다이브

 1. 태그 사용 시 주의사항 

1) HTML Tag는 중첩 사용 가능

 - 태그 안에 태그를 정의하는 방법(닫힘 순서에 주의). 안쪽 태그부터 닫자!

 2)  부모 자식관계의 태그는 다른 태그를 넣지 않음

 - <ol>이나 <ul>은 <li>만 갖는다. (<li>는 <ol>이나 <ul> 안에만 온다.)  

 - <dl>은 <dt>, <dd>만 갖는다.

 - <table>은 <thead>, <tbody>, <tfoot>, <tr>만 갖는다.

 - <tr>은 <th>나 <td>만 갖는다.

>> 다른 속성을 넣고 싶다면 자식 태그 안에서 넣으면 된다. <ol><li><string>..

3) 부모태그에 속성을 설정하면 자식 태그에 속성이 상속됨

  자식태그에서 동일 속성을 사용하면 부모에서 전달된 속성은 소멸됨

4) 주석 

<!-- 내용 -->

 2. tag 

1) 줄변경

- Web Browser는 엔터로 줄변경을 하지 않음

• <br> : 한 줄 바꿈 / 줄을 변경하고 싶은 곳에서 <br>을 사용! <br/> 보통 이렇게 사용함
         : 문단 내에서 한 줄을 바꿀 때 사용
• <p> : 문단을 만들 때 사용  
         <p> 문단 내용 </p>

2) 글 목록

- <h1>~<h6>까지 제공됨

- <h1> 큰 글자 / <h6> 작은 글자

- 자동 줄변경의 기능이 있음

3) markup

<b> : 진하게

<strong> : 진하게 / reader기에서 강하게 읽어들일 수 있음

<i> : 이탤릭

<u> : 밑줄 / HTML5에서 지원하지 않음 (웹 브라우저에서는 그려서 보여주기는 함)

<strike> : 취소선 / HTML5에서 지원하지 않음

<mark> : 형광펜 효과 (HTML5에서 새로 지원된 태그)

<big> : 글자 크게 (HTML5에서 지원하지 않음)

<small> : 글자 작게

<sup> : 윗첨자

<sub> : 아랫첨자

 3. 속성이 있는 tag 

- 태그에 사용자가 값을 넣어 다양하게 사용해야 할 때

- 형식)  <태그명 속성 = 값 속성 = 값,,,>

- 값은 3가지 형태로 넣음

  ① "로 묶어서 : 속성 = "값" // 값에 공백 포함 가능. 이걸 제일 많이 씀

  ② '로 묶어서 : 속성 = '값'  // 값에 공백 포함 가능

  ③ 그냥 값으로 : 속성 = 값 // 값에 공백 포함 불가

- 태그 속성을 정의하는 순서는 없음

- 속성은 여러 태그에서 같이 사용하는 공통속성과 특정 태그에서만 사용하는 속성이 제공됨

1) 글자 태그

- 글자 크기, 글자 색, 글자모양을 변경하는 태그

- font는 글자만 갖는다. 테이블 등을 font태그가 가질 수 없음

- HTML5에서 지원하지 않음

<font size="크기" color="색깔" face="글꼴">글자</font>

  > 크기 : 1~10 

  > 색 : 영어 (black, red)

           RGB (#000000~#FFFFFF) // 앞에서부터 00:R, 00:G, 00:B

  > 글꼴 : 컴퓨터에 설치된 글꼴 모두 사용가능.

     (단, 클라이언트에 존재하지 않는 글꼴을 사용하면 클라이언트의 브라우저 기본 글꼴로 보여줌. 해결하려면 web font 사용)

2) 선긋기 태그

- Web Browser의 넓이 100%가 기본 설정 (자동 줄변경)

- browser마다 다르게 보여짐 (사용자에게 보여지지 않고(? 보여짐..), 소스를 구분하는 용도로 사용함)

 <hr color = "색깔" size="높이"  width ="넓이"/>

   > 넓이 설정방법

① 비율 (숫자%)

 - 브라우저의 몇 %로 할 건지 지정

 - 가변 / 브라우저의 크기에 따라 변경됨

② 숫자

 - pixcel로 지정

 - 고정 / 브라우저의 크기와 상관없이 항상 고정

** 속성 중 하나인 size와 color는  font와 선긋기 등의 태그에 공통으로 사용되는 속성임 => 글로벌 속성이라 함

3) 이미지 태그

- 이미지를 넣어서 제공할 때 사용

- 이미지는 모든 확장자가 다 가능!

<img src="이미지 경로" width="넓이" height="높이" title="풍선도움말" alt="엑박떴을 때 보여줄 텍스트"
  border="테두리선두께" name=”이름명”/>

  > 이미지 크기변경(Resize)는 되도록 하지 말자. CPU 엄청 소모됨.

  > width나 height 하나만 바꿔도 나머지 하나가 알아서 맞춰서 바뀜

  > 이미지 경로 (!절대경로는 절대 사용하지 말자!) :

• URL
  - 다른 서버의 이미지도 연결해서 보여줄 수 있음
  - 장점) HTML파일의 위치가 변경되더라도 이미지의 경로를 수정할 필요 없음
  - 단점) 경로가 길다.
  - 사용법) src =http://~/이미지명.확장자" - 제일 많이 씀!!
• 상대경로
  - 서버에 존재하는 이미지만 연결해서 보여줄 수 있음
  - 장점) 경로를 짧게 표현할 수 있음
  - 단점) HTML 파일의 위치가 변경되면, 이미지의 경로를 수정해야 함
  -  사용법) src ="../이미지명.확장자"
  -  HTML 파일이 존재하는 위치로부터 경로를 연산함

4) 다른 HTML과 연결 (Hyper Text) 

- URL과 상대경로를 사용하여 다른 HTML 페이지와 연결 (Hyper Link)

- 사용법) <a href = "연결할 HTML의 주소" target = "연결된 HTML이 보여질 frame"  name ="이름"  id ="아이디"> 링크명 </a>

    > 연결할 HTML의 주소는 URL or 상대경로로 표현함

    > target을 " 아무거나 "로 주면 새창으로 뜨는데 보통 blank나 new로 줌

    > name 과 id는 글로벌 속성임

    > name속성은 한 페이지에서 특정 위치로 이동할 때 사용함

       : href="#name 속성명" => 링크 클릭 시 name 부분으로 이동함

- 연결된 페이지는 web browser 안의 내용을 모두 삭제하고 다시 그려서 보여줌 (화면 깜빡임이 발생함)

5) frame

- 하나의 웹 브라우저에서 여러 개의 HTML을 동시에 보여줄 때 

- frame, iframe (inner frame의 약자) 을 제공

• frame : 페이지의 전체를 나눌 때 사용 / 페이지의 디자인을 만들 때 사용 / 요새 잘 안씀 / Ex. Java API
• iframe : 페이지내의 일부분을 나눌 때 사용 / 페이지의 일부분을 변경하여 보여줄 때 사용 / 이걸 더 많이 씀

* iframe 

- 사용법) <iframe name = "이름" src ="최초 제공 페이지의 URL" frameborder="선의 두께" width ="넓이" height="높이" scrolling="스크롤바의 제공여부">  </iframe>

  > name은 태그에서 찾아갈 이름

  > scrolling은 yes/no/auto 중 하나로 설정 가능

- HTML안에 다른 HTML을 넣어서 보여주기 가능

- HTML안의 사진을 눌렀을 때 다른 HTML 보여주기 가능 >> 외부 HTML

6) 목록 태그 (list tag)

- ol, ul, dl 3가지의 목록을 제공

• <ol> 
  - 순서 목록
  -  순서가 있는 데이터를 보여줄 때 
  - 숫자 / 알파벳 / 로마자의 순서를 제공하는 목록 태그
  - <li> : 목록을 보여줄 때 사용. 자동 줄바꿈이 됨
  - 사용법) <ol type = "시작할 값">               
                  <li> 목록 </li> ......        
            </ol>
     > ol에 시작할 값을 주지 않으면 숫자로 시작함    
     > li태그의 value 속성으로 번호를 건너뛸 수 있음. 중간 list 번호를 건너뛰고 싶으면 <li value = "설정할 값">
• <ul> 
  - 도형 목록
  - 순서없는 목록
  - 사용법) <ul type="도형의 종류">          
                    <li> 데이터 </li> .......        
              </ul>  
   > 도형 종류 : square, circle, disc // disc가 기본
  
• <dl>
  - 설명 목록 - 어떤 대상에 대한 설명을 보여줄 때 
  - <li>를 쓰지 않음
  - 사용법) <dl>              
                    <dt> 제목 </dt>              
                    <dd> 설명 </dd> ..... // dd는 들여쓰기가 된다.        
               </dl>
  

7) 테이블 태그

- 표 만들기

-   <table>, <tr>,<th>,<td>, <thead>, <tbody>, <tfoot>으로 구성되는 태그

    (_얘네는 필수, 나머진 선택)

• <tabel>
  - 표를 시작할 때 
  - 높이는 행마다 / 넓이는 열마다 같음
  - 사용법) <table border = "선의 두께" bordercolor="선색" width ="테이블넓이" height ="테이블높이"
                   align ="수평정렬" bgcolor="바닥색" background="바닥에 들어갈 이미지" 
                   cellspacing="td(셀) 간 간격" cellpadding="td 내부 간격(여백)">
  *테이블 자체에 넓이와 높이를 설정하는 것보다 안쪽 td나 th에서 넓이와 높이를 설정하고 테이블에 적용하는 걸 권장함*
• <tr>
  - 행을 만들 때
  - 안에 존재해야 함
  - 사용법) <tr bgcolor="바닥색" background="바닥에 들어갈 이미지" align="수평정렬" valign ="수직정렬">
  > 수평정렬 : align = "left,center,right"
  > 수직정렬 : valign = "top,middle,bottom"
  
• <th>
  - 테이블 header
  - 컬럼의 제목을 만들 때
  - 입력되는 글자는 가운데 정렬, 진하게의 설정이 자동 설정됨
  - 사용법) <th bgcolor="바닥색" background="바닥에 들어갈 이미지" align="수평정렬" valign ="수직정렬"
                   width ="넓이" height ="높이" colspan ="합칠 칸의 수" rowspan="합칠 행의 수">
• <td>
  - 컬럼의 데이터
  - 입력되는 글자가 왼쪽정렬에 일반 글자로 설정됨
  - <tr>안에 존재해야 함
  - <th>와 속성이 같음
  - 사용법) <td bgcolor="바닥색" background="바닥에 들어갈 이미지" align="수평정렬" valign ="수직정렬"
                   width ="넓이" height ="높이" colspan ="합칠 칸의 수" rowspan="합칠 행의 수">
  
• <thead>, <tbody><tfoot>
  -  각각 사용자의 눈에 보이지 않고 "테이블의 제목/내용/결과 부분"임을 알려줄 때

 Web 

- World Wide Web / Web / W3

- 인터넷에서 문자, 그림, 미디어(소리, 영상)를 포함하는 문서(HTML 문서)를 HyperText 개념을 사용하여 검색하고 전송할 수 있는 서비스

- HTML을 요청하고 해석할 수 있는 프로그램과 (=Web browser) 요청한 HTML을 응답해줄 수 있는 프로그램 (=Web Server)으로 구성됨

* Web Server

- HTML을 저장하고 있다가 인터넷에서 HTML이 요청되면 HTML을 응답해주는 프로그램 (Apache HTTP Server)

* Web Container

- Web Server의 기능을 가지고 있음 (HTML 파일 응답 가능)

- JSP, Servlet을 저장하고 있다가 Web Client에서 요청이 오면 JSP나 Servlet을 HTML로 변환하여 응답해주는 프로그램

   (Apache Tomcat)

* Web Client

- Web browser를 사용하여 Web Server로 요청을 보내고, 응답받은 HTML을 Rendering(그려주는)하여 보여주는 프로그램

 HTML (Hyper Text Markup Language) 

- 1995년 Tim, berners Lee가 HTML 1.0 초안을 발표

- 마크업(Markup Language) 언어 : 본문에서 특정부분을 강조하여 보여줄 수 있는 언어

- Web에서 HTML을 주고받기 위한 통신 규약 : HTTP (Hyper Text Transmission Protocol)

- Tag 언어 : <태그명> 내용 </태그명>의 형식으로 제작되는 언어

- SGML에서 필요한 것만 정의하여 만든 언어

- HTML은 연산의 기능이 없으며, 컴파일 하지 않고 Web browser에서 Rendering 하는 언어

  -> 그냥 그리기만 하는 언어다!

* HTML 작성법

- DTD(Document Type Definition)가 정의된 마크업 언어

     > Tag가 미리 정의되어 있음

     > 사용할 HTML 태그를 정의한 문서

- HTML 문서 작성 시 DTD에 정의된 것만 사용할 수 있음 

* 작성시 주의

- 대소문자를 가리지 않음 (하지만 맞춰 써야 함!)

- 태그는 짝으로 작성함

- ‘<’와 태그명 사이에는 공백을 넣지 않음

   Ex) <ol   > : 인식 가능 / <    ol> : 인식 불가능

* 태그 구성

- <시작태그> 내용 </끝태그>  이 전체를 element 라고 함 (태그=element)

  <열림태그> 내용 </닫힘태그>