HTML 이론

<HTML: 정보 표현 CSS: 디자인>

client : server에 요청(request)하는 역할
server : 요청에 응답(response)

HTML : 뼈대
CSS : 디자인
JS(자바스크립트) : 기능

HTTP(Hyper Text Transfer Protocol) : 인터넷에서 하이퍼텍스트 문서를 교환하기 위하여 사용되는 통신규약

HTML(Hyper Text Markup Language) : 웹 페이지에 정보를 담아 표시하기 위한 마크업 언어

Hyper Text : 현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트

Markup : 어딘가에 Mark, 즉 표시를 해두는 것

태그 : ex) 시작 태그 : <p>, 끝 태그 : </p> (태그 안에는 속성을 넣을 수 있음)
속성 : attribute, 값 : value --> 해당 요소에 추가적인 내용을 담고 싶을 때 ex) 글자색, 크기, 배경색 등..
시작 태그와 끝 태그 사이를 Content(내용)이라고 하며 전체를 Element(요소)라고 함

 

	개행 태그	개행
p태그	한 줄의 영역	O
span태그	내가 넣은 컨텐츠	X

 

제목태그 h태그 + 1~6

 

개행태그 br 

강조 태그 
- strong 실질적 강조
- b 시각적 강조

F12 : 개발자 도구

<리스트 태그>
<ul> : unordered list
: 번호 없는 목록을 사용할 때 사용하는 태그
<ol> : ordered list
: 번호 있는 목록을 사용할 때 사용하는 태그
<li> : list item
: 공통적으로 사용되는 태그

<이미지 태그>
<img> : 웹 페이지에 이미지를 보여주는 태그
* src 속성 : 이미지의 경로 지정(파일 경로나 URL)

<경로>
절대경로 : 어떤 페이지나 파일이 가진 고유한 경로 (외부 웹페이지로 연결할 때 사용)
상대 경로 : 특정 위치를 기준으로 파일을 찾는 경로(내부 자료를 연결할 때 사용)

      a. 현재 기준으로 ./
      b. 상위 기준으로 ../
      c. 루트 기준으로 ../../../
      d. 최상위 /

<앵커 태그>
<a href="url">텍스트</a>
* href : hypertext reference로 연결할 주소 지정

=> 이동태그 a태그 
     href 속성 => 어디로 이동? 

 

<표 만들기>

(1) 표를 만들어야겠다! => <table></table>
(2) 몇 줄로? => table row => <tr></tr>
(3) 몇 칸으로? 
=> table header => <th></th>
=> table data => <td></td>
(4) 표 안의 데이터를 채워준다! => th, td의 Content 안에 작성

 

<테이블태그>
th & td 태그 속성
colspan : 가로칸(양옆)을 합침
rowspan : 세로칸(위 아래로)을 합침
ex) rowspan = "2"

※ form은 데이터를 저장하는 필드 단위인가?
--> 데이터를 전송할 때 하나로 묶어주는 단위
--> 여러개 사용 가능하다. 단, submit 버튼을 한 번 클릭하게 되면 페이지가 변동된다. 즉, 한 번 submit을 누르면 페이지를 벗어난다.

 

※ name과 id 비교
name--> 중복사용 가능

            다른 페이지로 값을 전송했을 때 해당하는 태그를 구분하기 위해 사용하는 속성값
id --> 중복사용 불가능

         현재 페이지에서 해당하는 태그를 구분하기 위해서 사용하는 고유값

         css, js에서 많이 사용하는 속성