https://opentutorials.org/course/2039 를 바탕으로 작성하였습니다
HTML 수업 - 생활코딩
수업의 목적 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리
opentutorials.org
기술소개
HTML : HyperText Markup Language= 하이퍼텍스트를 가장 중요한 특징으로 하는, 마크업이라는 형식을 가진, 컴퓨터 프로그래밍 언어
Language : 언어 (사람과 컴퓨터 사이의 약속)=> html: 사람과 웹 브라우저 사이의 약속
기본문법 (태그)
기본문법 1 (html 파일 만들어보기)
- 메모장에 텍스트 작성 후 확장자를 'html'로 저장하기. 파일형식은 모든 파일 형식으로 저장. txt아님 (ex: a.html) - a.html => a:파일의 이름, html:확장자 (즉, a파일은 html 파일)- 클릭하면 운영체제가 알아서 웹 브라우저를 통해 파일을 실행해줌
기본문법 2 (태그)
- 웹브라우저는 뷰어라고 할 수 있다 (보여주기)- 텍스트 안 ( 안녕 만나서 <strong>반가워</strong>!!) => strong 태그로 감싸져 있는 부분이 진하게 표시된다
<strong> : 시작 태그</strong> : 닫히는 태그
하이퍼텍스트와 속성 (태그 + 속성+링크 = html 문법 끝)
링크 사용 : a 태그 걸기 (브라우저에게 링크 태그라는 것을 알려줌) 태그명만으로 불충분그러나, 정보가 부족해 웹 브라우저는 아무런 행동을 취하지 않는다. 즉, href 속성을 통해 url을 전송한다
* 현재 페이지 이동이 아닌, 새로운 탭에서 페이지가 열리도록 하고 싶으면 target 속성 이용 ("_blank")
태그의 중첩과 목록
-항목을 리스트로 표현하기 : ul(혹은 ol) , li (ul태그로 묶여있는 li태그들끼리 grouping 됨)
<ul>
<li>기술소개</li>
<li>기본 문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ul>ul : unordered list (순서가 있지 않는 리스트)
ol : ordered list (순서가 있는 리스트)
문서의 구조
-<head></head> 태그 안에 들어가는 태그들 (부가적인 정보들)
- <title></title> 태그 : 탭의 제목의 표시
- <meta charset="utf-8"> 태그 : 글자 깨짐 방지
-<body></body>태그 안에 들어가는 태그들 (본문)
- <h1></h1>
- <strong></strong>
-<html></html> : head와 body 태그를 감싸주는 태그
DOCTYPE
<!DOCTYPE html> : 어떤 방식의 html 코드로 작성됐는지 선언해주는 것
DOCTYPE : document type (문서 타입)
<주요태그>
- 단락-p
: 'paragraph' (단락) 의 줄임말 . 단락은 줄바꿈과 여백을 통해 구분 (html은 줄바꿈을 적용하지 않아서 p태그를 사용)
<p>
p태그
</p>
-줄바꿈 - br
: 'forced line-blank' . 말 그대로 줄을 바꿔주는 태그 (내용이 없는 태그. 따라서 열리는 태그 하나만 있으면 됨)
만나서
<br>
반가워-이미지 -img
: 이미지를 포함시키는 태그. src 속성을 통해 이미지의 정보를 추가한다
<img src="1.png" width="100" height="300"> //100,300 픽셀로 사이즈 조정
<img src="1.png" height="300"> //height 300을 기준으로 기존 비율 적용
<img src="1.png" alt="사진대체"> //이미지가 깨질 경우 alt 속성을 통해 사진 정보 제공
<img src="1.png" title="1.png사진입니다"> //title을 통해 도움말 출력
<입력양식 -form>
: 사용자가 입력한 정보를 서버에 전송할 때 사용하는 태그
form 태그를 통해 action 속성값으로 input 값 전송할 경로 넣어주기. name이라는 값으로 전송.
<html>
<body>
<form action="http://localhost/login.php">
<p> 아이디 : <input type="text" name="id"></p>
<p> 비밀번호 : <input type="password" name="pwd"></p>
<p> 주소 : <input type="text" name="address"></p>
<input type="submit">
</form>
</body>
</html>
-텍스트입력
: 텍스트를 입력받는 input 태그 ( type="text"). 여러 줄을 입력받을 땐 <textarea> 태그를 사용한다
value속성은 기본으로 텍스트 창 안에 입력될 값을 지정해준다
<form action="">
<p> text : <input type="text" name="id" value="default value"> </p>
<p> password : <input type="password" name="pwd" value="default value"></p>
<p> textarea:
<textarea cols="50" rows="10">default value</textarea>
</p>
</fomr>
-선택
* dropdown list : select, option 태그를 이용해 선택 form을 작성한다
<form action="http://localhost/color.php">
<select name="color">
<option value="red"> 붉은색 </option>
<option value="black"> 검은색 </option>
<option value="blue"> 파란색 </option>
</select>
<input type="submit">
</form>
-버튼
* button 태그 : 자바스크립트를 사용할 때 활용도 생김
* reset 태그 : 사용자가 입력한 모든 정보가 초기화 됨
* submit 태그 : 기존에 입력값을 전달할 때 사용하는 태그
-데이터전송 - hidden
: 몰래 서버 쪽으로 데이터 전송할 때 사용.
<form action="http://localhost/hidden.php">
<input type="hidden" name="hide" value="hi">
<input type="submit">
</form>눈에 보이지 않지만, submit 버튼을 누르면 hide라는 이름으로 hi라는 value를 전달한다.
-컨트롤의 제목 - label
:어떤 정보를 설명하기 위한 태그. for속성을 통해 누구의 label인지 작성. input 태그에 id속성으로 연결가능
<form action="">
첫번째 방법 (설명 부분만 감싸기)
<p>
<label for="id_txt"> text : </label>
<input type="text" id="id_txt" name="id" value="default value">
</p>
두번째 방법 (전체 감싸기)
<p>
<label for="password">password :
<input type="password" id="password" name="pwd" value="default value">
</label>
</p>
</fomr>
- method
*get, post 방식. 전송방법의 속성. get이 기본속성. post할 경우 전송하는 정보 값이 노출되지 않는다
<form action="http://localhost/method.php" method="get">
<input type="text" name="id">
<input type="submit">
</form>
<form action="http://localhost/method.php" method="post">
<input type="text" name="id">
<input type="submit">
</form>
-파일업로드
: ethod="post" enctype="multipart/form-data" 필수
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile">
<input type="submit">
</form>