2020. 11. 12. 13:33ㆍ교육과정/KOSMO
키워드 : HTML text 꾸미기 / HTML Form / CSS 기초
****
1. HTML 복습 추가 진도
2. HTML text 꾸미기
html 상에서 개행을 하거나 글자 간격을 넓게 주어도 실제 페이지에 반영이 되지 않는다.
(방법1)
<p> 태그 씌우기
--> But, 개행이 1번만 적용되고, <p> 태그 내의 개행이나 글자 간격은 적용되지 않는다.
의 갯수에 따라 글자 간격을 넓힐 수 있다.
2가지를 모두 사용한 결과
But, 코드가 지저분해진다는 단점이 있는 옛날 방식이다.
(방법2)
<pre> 태그 씌우기
이 때, 웹페이지에 나타나는 폰트가 다를 수 있다.
- 글씨 하이라이팅하기
<b>진하게</b><br/>
<strong>중요한</strong><br/>
<em>강조</em><br/>
<i>이탤릭체</i></br>
<b><i>진하게 이탤릭체</i></b><br/>
보통문자 <small>한단계작은문자</small><br/>
보통문자 <sup>윗첨자</sup><br/>
보통문자 <sub>아래첨자</sub><br/>
<del>삭제</del><br/>
<ins>추가</ins><br/>
<mark>하이라이팅</mark><br/>
- 밑줄<ins>과 삭제할 글자<del> 처리
<b>패스포트 스탬프 확인 장소</b><br/> <!-- 진하게 -->
<strong>시작 외돌개 제주 올레 안내소</strong><br/> <!-- 중요하게 -->
<em>중간 강정 올레 쉼터</em><br/> <!-- 강조 -->
<i>종점 월평 송이 슈퍼</i><br/> <!-- 이탤릭체 -->
<!-- 3. 삭제할 글자와 밑줄을 -->
<p>
난이도 : 상 <br/>
길이: 총 16.4km(4~5시간)<br/>
<del>수봉로는 언덕길이고 <br/>
일강정 바당올레에서<br/>
서건도 사이 바윗길이 험한 편이다</del><br/>
<ins>수봉로는 언덕길이고 <br/>
일강정 바당올레에서<br/>
서건도 사이 바윗길이 험한 편이다</ins><br/>
</p>
난이도 : 상 <br/>
길이: 총 16.4km(4~5시간)<br/>
<pre>
<del>수봉로는 언덕길이고 <br/>
일강정 바당올레에서<br/>
서건도 사이 바윗길이 험한 편이다</del><br/>
<ins>수봉로는 언덕길이고 <br/>
일강정 바당올레에서<br/>
서건도 사이 바윗길이 험한 편이다</ins><br/>
</pre>
3. 이미지 출력시 개행하기
- 이미지 출력 (옛날 방식으로 <br/>태그 사용하여 개행한 경우)
- 개행 없이 이미지 출력
- <figcaption> 태그를 사용하여 개행한 이미지 출력
4. CSS 파일 적용하기
- 스타일 파일을 적용하지 않는 HTML 문서
- CSS 파일을 적용한 HTML 문서
<link rel="stylesheet" href="99_html5구조.css" />
5. 폼(form) 만들기
웹 용어 method : 데이터 전송 방식
- get (default) : header 부분에 데이터 전송 (url에 보임)
- post : body 부분에서 데이터 전송 (url 안 보임)
(1) 보안데이터 ........ 로그인, 회원가입 등
(2) 파일전송
- 폼을 사용하면 사용자 입력값을 묶어서 서버로 보낼 수 있다.
<label for='name'>이름</label>
<input type='text' id='name' name='name'/><label for='gender'>성별</label>
<label for='male'>남자</label>
<input type='radio' id='male' name='gender' value='male' checked="checked"/>
<label for='female'>여자</label>
<input type='radio' id='female' name='gender' value='female'/><label for='job'>직업</label>
<select name="job" id="job">
<option value="nojob">백수</option>
<option value="developer">개발자</option>
<option value="nogada">노가다</option>
<option value="programmer">프로그래머</option>
</select><label for='hobby'>취미</label>
<input type="checkbox" id="sleep" name="hobby" value="sleep">
<label for="sleep">잠자기</label>
<input type="checkbox" id="eat" name="hobby" value="eat">
<label for="eat">먹기</label>
<input type="checkbox" id="breath" name="hobby" value="breath">
<label for="breath">숨쉬기</label>
<input type="checkbox" id="mung" name="mung" value="mung">
<label for="mung">멍때리기</label><input type='submit' value='전송'/>
<input type='reset' id='cancel' value='취소'/>
<06_SimpleForm.html 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05_Simpleform.html</title>
</head>
<body>
<!-- 웹 용어 method : 데이터 전송 방식
- get (default) : header 부분에 데이터 전송 (url에 보임)
- post : body 부분에서 데이터 전송 (url 안 보임)
(1) 보안데이터 ........ 로그인, 회원가입 등
(2) 파일전송
-->
<form action="xxxxx.jps" method='get'>
<fieldset>
<legend>회원가입</legend>
<ol>
<li>
<label for='name'>이름</label>
<input type='text' id='name' name='name'/></li>
<li>
<label for='nick'>별명</label>
<input type='text' id='nick' name='nick'/></li>
<li>
<label for='gender'>성별</label>
<label for='male'>남자</label>
<input type='radio' id='male' name='gender' value='male' checked="checked"/>
<label for='female'>여자</label>
<input type='radio' id='female' name='gender' value='female'/></li>
<li>
<label for='job'>직업</label>
<select name="job" id="job">
<option value="nojob">백수</option>
<option value="developer">개발자</option>
<option value="nogada">노가다</option>
<option value="programmer">프로그래머</option>
</select></li>
<li>
<label for='hobby'>취미</label>
<input type="checkbox" id="sleep" name="hobby" value="sleep">
<label for="sleep">잠자기</label>
<input type="checkbox" id="eat" name="hobby" value="eat">
<label for="eat">먹기</label>
<input type="checkbox" id="breath" name="hobby" value="breath">
<label for="breath">숨쉬기</label>
<input type="checkbox" id="mung" name="mung" value="mung">
<label for="mung">멍때리기</label></li>
<li>
<label for='lover'>애인</label>
<label for='Yes'>있다</label>
<input type='radio' id='Yes' name='lover' value='Yes'/>
<label for='no'>없다</label>
<input type='radio' id='no' name='lover' value='no'/></li>
<!-- 모바일용에서 쓰던 HTML -->
<li>
<label for='trip'>여행하고픈 나라</label>
<input type='text' list='countries' id='trip' name='country'/>
<datalist id='countries'>
<option value='네팔'>
<option value='남극'>
<option value='탄자니아'>
</datalist>
</li>
<li>
<input type='submit' value='전송'/>
<input type='reset' id='cancel' value='취소'/></li>
</ol>
</fieldset>
</form>
</body>
</html>
6. 데이터 전송방식 (get / post)
method : 데이터 전송 방식
- get (default) : header 부분에 데이터 전송 (url에 보임)
- post : body 부분에서 데이터 전송 (url 안 보임)
※ get 방식 : 사용자 입력값을 전송 후 url에서 확인할 수 있다.
* nick은 form 바깥에 있어서 서버로 보내지지 않음.
즉, 사용자 입력값은 form 안에 위치해야 함.
* form 안에서 name과 nick이 모두 정상적으로 입력됨 (캡처에서는 nick의 name 부분에 오타 있음 ㅡㅡ;; )
※ post 방식 : 사용자 입력값이 전송 후에 url에 나타나지 않는다.
(jsp 오타 ㅡㅡ;; )
※ get 방식 다시 한 번 비교
* <Fieldset>
화면상에서 사용자 입력값을 묶어서 나타낼 수 있으며 legend 태그를 통해 제목을 설정할 수 있다.
* method='get' 방식을 사용하여 url에 사용자 입력값을 모두 확인되는 경우
※ <datalist>와 <option> 태그는 HTML에서의 드롭박스를 만들어준다. (모바일용에서 사용하던 HTML임)
7. CSS 기초
<head> 태그 안에서 <style> 작업을 할 수 있다.
웹 페이지 상에서 개발자모드(F12)로 들어가면 소스코드를 확인할 수 있다.
* 나중에 작성한 CSS가 덮어쓰여져 화면에서 출력된다.
* 16진법으로 color 입력시 숫자 2개가 동일할 경우 하나로 줄여서 쓸 수 있다.
* 클래스명으로 스타일 적용할 곳을 찾을 경우 . 을 사용한다.
* 클래스명으로 작성한 스타일은 태그로 작성한 스타일보다 우선순위를 가지며 적용된다.
* id로 스타일 적용할 곳을 찾을 경우 #을 사용한다.
* id로 작성한 스타일은 태그나 클래스로 작성한 스타일보다 우선순위를 가지며 적용된다.
* id로 작성한 스타일끼리는 나중에 작성한 것으로 덮어쓰여져 적용된다.
* 가중치를 사용하여 스타일을 적용시킬 수 있다.
div#point100 { color : blue; } <!-- 101의 가중치 (1 + 100) -->
body div#point100 { color : green; } <!-- 102의 가중치 (1 + 1 + 100) -->
8. 요소(element) 찿기
* 속성으로 찾기
input[type=text] { ~~~~~~~~~~~ }
* 첫번째 요소 찾기
input:first-of-type { ~~~~~~~~~ }
* 마지막 요소 찾기
input:last-of-type { ~~~~~~~~ }
* 다섯번째 요소 찾기
input:nth-of-type(5) { ~~~~~~~~ }
* 뒤에서 두 번째 요소 찿기
input:nth-last-of-type(2) { ~~~~~~~~~~ }
* 비활성화된 요소 찾기
input:disabled { ~~~~~~~~~~ }
* 요소 여러개를 동시에 찾기 ( , 사용 )
h3, li { ~~~~~~~~~ }
* 자식 요소 찾기
li > strong { ~~~~~~~~~ }
* 자손 요소 찾기
ul strong { ~~~~~~~~~ }
* 클래스로 찾기
.warning { ~~~~~~~~~~ }
body > div > div.waring { ~~~~~~~~~ }
* 아이디로 찾기
#list span { ~~~~~~~~~~ }
* 바로 다음 요소를 찾을 때
div > div ~ div { ~~~~~~~~~~~~ }
* 형제들 중에서 찾기
div > div + ul { ~~~~~~~~~~ }
