HTML

•

Hyper Text Markup Language 의 약자

•

정적인 웹페이지를 만드는 언어

◦

정적 : 어떤 사용자가 입력하더라도 같은 웹페이지가 나오는 것

▪

홈페이지 등

◦

동적 : 사용자가 입력하는 값에 따라 다른 웹페이지가 나오는 것 

▪

검색 결과 등등

•

메모장, 한글, 워드 ... 문서작업이 가능한 프로그램에서는 모두 작성 가능하다.

•

HTML 문서는 태그라는 명령어로 구성되어있다.

•

태그의 기본 형식

<태그이름>문서의 내용</태그이름>

시작은 <!DOCTYPE HTML> 로. 웹페이지를 만들것임을 명령하는 것이다.

웹페이지의 제일 상단 TAP 위치에 보일 내용은 <head></head> 사이에 써준다.

그 외 나머지 모든 웹페이지의 내용들은 <body></body> 사이에 써준다.

<h1></h1>은 톱 헤드라인의 속성을 부여

<!— 로 시작해서 —> 로 끝나는 부분은 주석처리 된다.

<img src=”파일경로” /> 로 끝나면 이미지 첨가가 된다.

width=”숫자px” height=”숫자px” 를 첨가하면 이미지 축소 확장이 가능하다.

•

절대경로/상대경로

◦

절대경로 : 경로를 다 적는것 —> 불편함. 

◦

상대경로 : html파일과의 공통경로일 경우 공통경로는 제외하고 나머지 주소만 적는 것

▪

현재 경로의 전까지 공통경로일 경우에는 ../ 로 한 칸 전의 경로임을 나타내준다.

줄바꿈은 엔터키로 하지 않는다. 대신 <br/> 를 이용한다.

한글을 비롯한 언어가 정상적으로 보여지려면 html 문서에 바른 인코딩 설정이 필요

—> <meta charset="UTF-8" /> 를 <head></head> 사이에 써준다.

다음줄로 내려가 구분선을 그려주는 명령은 <hr/> 로 한다.

링크는 <a></a> 를 가지고 한다. 이때 속성은 href=”경로” 다.

ex) <a href=”https://www.naver.com”>네이버로 가기</a>

를 해주면 “네이버로 가기”라는 링크가 생기고 클릭하면 네이버페이지로 간다.

•

만약 이미지 태그를 걸고 싶다면

ex) <a href=”https://www.naver.com”><img src=”이미지경로”></a> 로 설정.

표를 만들때는 먼저

•

<table></table> 로 표를 만들 것임을 알려주고 설정할 속성은 border=”1” 와

width=”숫자px” 다. border=”1”은 테두리선을 그려준다는 의미다. boder=”0” 은 테두리선 없음.

•

행을 설정하는 것을 <tr></tr> 로 한다. 이렇게 한 쌍이 한 행을 만들어준다.

•

열을 설정하는 것을 <td></td> 로 한다. 마찬가지로 한 쌍이 한 열을 만들어준다. 물론 변수이름은 태그 안에 넣어주면 된다. 

◦

ex) <td>이름</td>

전체적인 구조를 확인해보면

<tr>

</tr>

</table>

위와 같이 하면 1행2열의 표가 생긴다.

행과 열을 추가는 간단하다.

HTML form 태그

•

input 태그 : 데이터를 입력하기 위해 사용되는 태그. 속성으로 태그의 종류를 지정한다. 

•

태그의 타입 종류

text : 일반적인 text데이터를 입력하기 위해 사용. (아이디 등등)

password : 로그인, 회원가입 페이지 등에서 비밀번호 입력을 하기 위해 사용. (화면상 숨겨져서 나옴)

submit : form내의 데이터를 서버로 전송할 때 사용.

reset : form내의 데이터를 초기화할 때 사용.

checkbox : 데이터 값을 여러 개 전송해야 할 때 사용 (즉, 중복선택 가능)

radio : 여러 개의 데이터 값 중 한개의 값만 전송해야 할 때 사용 ( 중복선택 불가 )

참고로 checkbox와 radio는 name이라는 속성을 지정해줘야 하는데, 여러 질문이 나올 경우에 선택지들의 그룹을 구분하기 위해서 꼭 필요한 속성이다.

select : 리스트 형태의 데이터를 사용. input과 독립적이다.( 를 클릭하면 선택지가 나온다.)

textarea : 여러 줄의 텍스트를 입력하기 위해 사용. 속성 cols(화면에 보여질 최소 문자개수)와 rows(화면에 보여질 최소 줄의 개수)로 행과 열의 크기를 지정. input과 독립적이다. (ex) 본문같은 개념

전체 구조는

<form>

-아이디 : <input type=”text”/></br>

-비밀번호 : <input type=”password”/></br>

-취미:

<input type=”checkbox” name=”hobby”> 영화 

<input type=”checkbox” name=”hobby”> 독서 

<input type=”checkbox” name=”hobby”> 운동 

<input type=”checkbox” name=”hobby”> 여행 

</br>

-전공:

<input type=”radio” name=”major”> 경영학

<input type=”radio” name=”major”> 물리학

<input type=”radio” name=”major”> 통계학

<input type=”radio” name=”major”> 역사학

</br>

-지역:

</select></br>

-자기소개:

</form>

  는 띄어쓰기를 대신하는 문장이다.