2주차 과제 1_HTML 수업 정리
기술 소개
HTML(HyperText Markup Language)
: 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어
기본 문법
태그 : html에서 가장 중요한 특징
a.html => a : 파일 이름 / html : 확장자
편집기 : 내용 입력하는 부분 / viewer : 편집기에 입력한 내용을 화면에 표현한 것
시작 태그 : 슬래시(/) 없는 태그 / 닫히는 태그 : 슬래시(/) 있는 태그
+ 살펴본 태그
strong 태그 : 글자 굵게
h1 태그 : heading 1의 약자로, 즉 제목으로(굵고 크게) 처리
하이퍼텍스트와 속성
속성 : 태그 속성에 맞게 특별한 기능을 수행
+ 살펴본 태그
a 태그 : a 태그 안쪽에 있는 부분이 링크라는 사실을 브라우저에 알려주는 태그, href라는 속성과 함께 사용됨, 새로운 탭에서 열리고 싶다면 target 속성 활용(target=“_blank”), 마우스포인트 올려놨을 때 내용 표시되기 위해서는 title 속성 활용
<h2>오늘의 명언</h2>
우리 모두는 <strong>자신의 힘</strong>을 발견한 내용을 가장 쉽게 익힌다.
<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" target=“_blank” title="전설적인 프로그래머">도널드 커누스</a>
태그의 중첩과 목록
태그의 중첩 : 태그 안에 또다른 태그 존재 가능, 즉 중첩 가능(마치 ul 태그 안에 li 태그가 존재하는 것처럼)
+살펴본 태그
li(list) 태그 : 각각의 항목이 시각적으로 구분되게 함
ul(unordered list) 태그 : 그룹핑을 해줌
ol(ordered list) 태그 : 숫자를 붙여줌
<ul>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ul>
<ul>
<li>가나다</li>
<li>라마바</li>
</ul>
문서의 구조
부가적인 정보와 본문의 정보로 나뉘고 각각 다른 태그에 담도록 약속 되어 있음
본문이 아닌 태그는 head 태그 안에, 본문인 태그는 body 태그 안에 들어옴
head 태그와 body 태그는 html 태그로 감싸짐
+ 살펴본 태그
title 태그 : 태그의 제목으로 표현
<meta charset="utf-8"> : 글씨 깨짐 현상 처리
<!DOCTYPE html> : (document type declaration) 어떤 표준을 따르는 코드인지를 알려줌
<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업소개</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML</h1>
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
</body>
</html>
웹사이트 만들기
웹사이트를 여러 개의 HTML 파일로 구성시킬 수 있음
주요 태그
단락 – p
p 태그 : paragraph의 줄임말로 단락을 표현할 때 사용
<html>
<body>
<p>HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.</p>
<p>HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
<p>The language is written in the form of HTML elements consisting of tags enclosed in angle brackets . Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page.</p>
</body>
</html>
줄바꿈 – br
br 태그 : 새로운 행에서부터 입력이 시작되도록 합니다. A forced line-break의 줄임말
br 태그를 사용해서 단락을 구분할 수 있지만, p 태그 사용을 통해 하나의 단락임을 정확히 표현할 수 있음
<html>
<body>
HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.<br><br><br>
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.<br><br><br>
The language is written in the form of HTML elements consisting of tags enclosed in angle brackets . Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page.<br><br><br>
</body>
</html>
이미지 – img
img 태그 : 문서에 이미지를 포함
alt(alternative text) : 이미지가 깨지거나 사용할 수 없을 경우에 대체로 나옴
<html>
<body>
<img src="img.jpg" height="300" alt="산 이미지" title="산 이미지">
</body>
</html>
입력양식 – form
form : 사용자가 입력한 정보를 서버로 전송하는 것들
form 태그의 action 속성 : 정보를 어디로 보낼 것인지 작성
<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>
텍스트 입력
textarea 태그 : 여러 줄 입력 가능
<html>
<body>
<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="2">default value</textarea>
</p>
</form>
</body>
</html>
선택
dropdown list : 제한된 공간에서 여러개의 선택지를 선택 기능
radio 버튼 : name 값이 같은 것들끼리 그룹핑 됨, 단일 선택만 됨
checkbox 버튼 : 다중선택 가능
checked 속성 : 기본적으로 선택됐으면 하는 항목에 활용
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<h1>색상2 (다중선택)</h1>
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>
</body>
</html><html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/order.php">
<p>
<h1>색상(단일색상)</h1>
붉은색 : <input type="radio" name="color" value="red">
검은색 : <input type="radio" name="color" value="black" checked>
파란색 : <input type="radio" name="color" value="blue">
</p>
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100" checked>
105 : <input type="checkbox" name="size" value="105" checked>
</p>
<input type="submit">
</form>
</body>
</html>
버튼
button : 자바스크립트와 주로 같이 사용함
reset : 사용자가 입력한 정보가 초기화 됨
<html>
<head><meta charset="utf-8"></head>
<body>
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" onclick="alert('hello world')">
<input type="reset">
</form>
</body>
</html>
데이터 전송 – hidden
hidden : UI가 눈에 보이지 않지만, 서버에 값이 전송되기 위해 사용
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="egoing">
<input type="submit">
</form>
</body>
</html>
컨트롤의 제목 – label
lable : 무언가의 이름표임을 정확하게 기술 가능
<html>
<body>
<form action="">
<p>
<lable for="id_txt">text</lable> :
<input id="id_txt" type="text" name="id" value="default value">
</p>
<p>
<lable for="password">password</lable> :
<input id="password" type="password" name="pwd" value="default value">
</p>
<p>
<lable for="password">textarea :
<textarea cols="50" rows="2">default value</textarea>
</label>
</p>
<p>
<label>
<input type="checkbox" name="color" value="red"> 붉은색
</label>
<label for="color_blue">
<input id="color_blue" type="checkbox" name="color" value="blue"> 파란색
</label>
</p>
</form>
</body>
</html>
method
get 방식 : URL을 통해 정보를 전송하는 방식
post 방식 : URL을 통해 전송하지 않고, 숨겨서 정보를 전송하는 방식
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/method.php" method="post">
<input type="text" name="id">
<input type="password" name="pwd">
<input type="submit">
</form>
</body>
</html>
파일 업로드
파일을 업로드하는 기능이 존재한다면, method는 post로, enctype은 multipart/form-data로 함
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile">
<input type="submit">
</form>
</body>
</html>
참고 : https://opentutorials.org/course/2039