form 태그
사용자 정보를 입력받는 요소
데이터 전달 방식
GET 방식 - 주소 데이터를 입력해서 전달
POST 방식 - 주소 변경 없이 비밀스럽게 데이터 전달
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼태그</title>
</head>
<body>
<!-- action 속성 : 이동할 페이지를 지정하는 것 -->
<!-- method 속성 : 1) get방식 - url창에 사용자가 입력한 내용을 다 보여줌.(보안에 취약)
2) post방식 - url창에 사용자가 입력한 내용을 보여주지 않음.(보안에 강함)-->
<form action="#" method="post">
<!-- 사용자가 입력하는 입력 양식 -->
<!-- name : 페이지 이동할때 이동한 페이지에서 참조하는 값 -->
아이디 : <input type="text" name="text"/><br/>
비밀번호 : <input type="password" name="passwd"/><br/>
<!-- radio 버튼 : 오로지 1개만 선택할수 있도록 name속성을 동일하게 반드시 정해야함.
value값 이동한 페이지에서 참조하는 실제값 -->
성별 남 <input type="radio" name="gender" value="man"/>
여 <input type="radio" name="gender" value="woman"/><br/>
<!-- checkbox : 다중 선택이 가능한 입력양식이며 반드시 name값이 동일해야함.-->
취미 독서<input type="checkbox" name="hobby" value="reading"/>
운동<input type="checkbox" name="hobby" value="health"/>
코딩<input type="checkbox" name="hobby" value="coding"/><br/>
<input type="file" name="file"/><br/>
<!-- 사용자에게 보이지 않는 입력양식 : 통상 접속일시, 회원가입일시 전달할때 사용함.-->
<input type="hidden" name="hidden" value="09:36"/><br/>
<input type="button" name="button" value="버튼"/><br/>
<input type="reset" value="초기화"/><br/>
<input type="submit" value="전송"/><br/>
<input type="image" src="images/Penguins.png"/><br/>
</form>
</body>
</html>
select 태그
1. 한 항목만 선택하기 : <select> 태그 사용
목록으로 보여주는 항목중 하나 또는 여러개를 선택할 때 사용
2. 여러 항목 선택 : mutiple
3. 선택 옵션 묶기 : <optgroup> 태그 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Label for속성</title>
</head>
<body>
<form action="">
<table>
<tr>
<!-- label태그의 for속성과 input태그의 id속성을 서로 연결을 시켜주면
글자를 클릭해도 input태그에 내용으로 이동을 함으로써 사용자들의 UI
편의성을 지원해줌. -->
<td><label for="username">이름</label></td>
<td><input id="username" type="text" name="username"/></td>
</tr>
<tr>
<td>성별</td>
<td>
<input id="man" type="radio" name="gender" value="man">
<label for="man">남자</label>
<input id="woman" type="radio" name="gender" value="woman">
<label for="woman">여자</label>
</td>
</tr>
</table>
</form>
</body>
</html>
label 태그의 for 속성의 의미
선택태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택태그</title>
</head>
<body>
<!-- 리스트의 내용을 하나만 선택할 수 있게끔 해주는 태그의 조합
select태그와 option태그를 이용 -->
<select>
<option>야채김밥</option>
<option>참치김밥</option>
<option>소고기김밥</option>
<option>누드김밥</option>
<option>계란말이김밥</option>
</select>
<!-- select태그에서 multiple속성을 이용하면
하나가 아닌 다중선택(ctrl키를 누른채)을 할수 있음.-->
<select multiple="multiple">
<option>야채김밥</option>
<option>참치김밥</option>
<option>소고기김밥</option>
<option>누드김밥</option>
<option>계란말이김밥</option>
</select>
</body>
</html>
공간 분할 태그
- CSS로 원하는 레이아웃을 구성하기 위해 공간 분할
div태그 블록형식으로 공간 분할
span태그 인라인 형식으로 공간 분할
- 자신의 글자 크기만큼 영영차지
- 왼쪽에서 오른쪽으로 쌓임
시멘틱 태그
- 시멘틱 웹
특정 태그에 의미를 부여한 웹
프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹
div, span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div,span</title>
</head>
<body>
<!-- div태그 : 공간분할 태그로써 한 라인을 전부 다 차지함.
내부적으로 div를 써서 조각으로 라인을 차지하게끔 할수 있음.-->
<div>
<div>div태그 - 블록형태1</div>
<div>div태그 - 블록형태1</div>
</div>
<div>div태그 - 블록형태1</div>
<div>div태그 - 블록형태2</div>
<div>div태그 - 블록형태3</div>
<div>div태그 - 블록형태4</div>
<br/>
<!-- span태그 : 글자나 문장의 영역만큼만 차지함.
아울러 인라인 형태로 왼쪽에서 오른쪽으로 쌓임.
-->
<span>span태그 - inline형태</span>
<span>span태그 - inline형태</span>
<span>span태그 - inline형태</span>
<span>span태그 - inline형태</span>
</body>
</html>시맨틱 태그 없이
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시멘틱 태그 미사용</title>
</head>
<body>
<!-- 제목 부분 -->
<div>
<h1>프로그램 언어의 종류</h1>
</div>
<!-- 네비게이션바 -->
<div>
<ul>
<li><a href="#">C언어</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">Python</a></li>
</ul>
</div>
<div>
<h1>C언어</h1>
<p>1972년에 같은 벨 연구소의 데니스 리치가 PDP-11 컴퓨터를 제어하기 위해 B언어의 특징을 물려받은, 최종적으로 'C'라는 이름으로 언어를 만들었다. CPL의 'C'는 케임브리지 대학의 C를 뜻했다가 후에 임페리얼 칼리지 런던과 조인트 프로젝트가 된 이후에는 'Combined'를 뜻하게 되는데, 스트로우스트루프의 회고에 의하면 저건 윗분들의 생각이고, 자신들에게 있어서 'C'는 언제나 CPL의 언어 디자이너였던 크리스토퍼 스트레이치(Christopher Strachey)였다고 한다. BCPL을 거쳐 'B' 가 된 것은 '벨' 연구소의 B를 딴 것.</p>
</div>
<div>
<h1>JAVA</h1>
<p>썬 마이크로시스템즈에서 1995년에 개발한 객체 지향 프로그래밍 언어. 창시자는 제임스 고슬링이다. 2010년에 오라클이 썬 마이크로시스템즈을 인수하면서 Java의 저작권을 소유하였다. 현재는 OpenJDK는 GPL2이나 오라클이 배포하는 Oracle JDK는 상업라이선스로 오라클이 돈독 올랐는지 2019년 1월부터 유료화정책을 강화하고 있다. Java EE는 이클립스 재단의 소유이다. Java 언어는 J2SE 1.4부터는 Java Community Process (JCP)에서 개발을 주도하고 있다. C#과 문법적 성향이 굉장히 비슷하며[1], 그에 비해 2019년 Q3에서 가장 많이 이용하는 언어로 뽑혔다. Javascript와는 다르다.</p>
</div>
<div>
<h1>Python</h1>
<p>이름은 귀도가 즐겨 보던 영국의 6인조 코미디 그룹 몬티 파이선에서 따왔다고 한다. 지금 CPython의 공식 GitHub 저장소를 보면 협업보조용 봇 이름들이 the-knights-who-say-ni(니라고 말하는 기사)나 bedevere(베디비어) 같이 죄다 몬티 파이선과 성배의 배역들이다. 많은 파이썬 교재들에서 변수 이름을 spam, eggs로 짓는 등 드립을 친다. 직접적 관계는 없지만 42도 필수요소. 또한 시작 프로그램 중 하나의 이름이 아이들(Idle)인데, 탄생배경을 생각해 본다면 몬티 파이선의 멤버 에릭 아이들(Eric Idle)의 이름에서 유래하였을 가능성이 높다. 물론 사전적 의미를 생각 안 하는 건 아니라서 심볼마크가 뱀 모양이다.</p>
</div>
</body>
</html>
시멘틱 태그 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시멘틱 태그 사용</title>
</head>
<body>
<!-- 제목 부분 -->
<header>
<h1>프로그램 언어의 종류</h1>
</header>
<!-- 네비게이션바 -->
<nav>
<ul>
<li><a href="#">C언어</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">Python</a></li>
</ul>
</nav>
<section>
<article>
<h1>C언어</h1>
<p>1972년에 같은 벨 연구소의 데니스 리치가 PDP-11 컴퓨터를 제어하기 위해 B언어의 특징을 물려받은, 최종적으로 'C'라는 이름으로 언어를 만들었다. CPL의 'C'는 케임브리지 대학의 C를 뜻했다가 후에 임페리얼 칼리지 런던과 조인트 프로젝트가 된 이후에는 'Combined'를 뜻하게 되는데, 스트로우스트루프의 회고에 의하면 저건 윗분들의 생각이고, 자신들에게 있어서 'C'는 언제나 CPL의 언어 디자이너였던 크리스토퍼 스트레이치(Christopher Strachey)였다고 한다. BCPL을 거쳐 'B' 가 된 것은 '벨' 연구소의 B를 딴 것.</p>
</article>
<article>
<h1>JAVA</h1>
<p>썬 마이크로시스템즈에서 1995년에 개발한 객체 지향 프로그래밍 언어. 창시자는 제임스 고슬링이다. 2010년에 오라클이 썬 마이크로시스템즈을 인수하면서 Java의 저작권을 소유하였다. 현재는 OpenJDK는 GPL2이나 오라클이 배포하는 Oracle JDK는 상업라이선스로 오라클이 돈독 올랐는지 2019년 1월부터 유료화정책을 강화하고 있다. Java EE는 이클립스 재단의 소유이다. Java 언어는 J2SE 1.4부터는 Java Community Process (JCP)에서 개발을 주도하고 있다. C#과 문법적 성향이 굉장히 비슷하며[1], 그에 비해 2019년 Q3에서 가장 많이 이용하는 언어로 뽑혔다. Javascript와는 다르다.</p>
</article>
<article>
<h1>Python</h1>
<p>이름은 귀도가 즐겨 보던 영국의 6인조 코미디 그룹 몬티 파이선에서 따왔다고 한다. 지금 CPython의 공식 GitHub 저장소를 보면 협업보조용 봇 이름들이 the-knights-who-say-ni(니라고 말하는 기사)나 bedevere(베디비어) 같이 죄다 몬티 파이선과 성배의 배역들이다. 많은 파이썬 교재들에서 변수 이름을 spam, eggs로 짓는 등 드립을 친다. 직접적 관계는 없지만 42도 필수요소. 또한 시작 프로그램 중 하나의 이름이 아이들(Idle)인데, 탄생배경을 생각해 본다면 몬티 파이선의 멤버 에릭 아이들(Eric Idle)의 이름에서 유래하였을 가능성이 높다. 물론 사전적 의미를 생각 안 하는 건 아니라서 심볼마크가 뱀 모양이다.</p>
</article>
</section>
<footer>
<address>경북 구미시 금오시장로 6 삼일빌딩 4층</address>
Since by 2020
</footer>
</body>
</html>
