231107 WEB - HTML4(input 속성), CSS1(CSS란?)

autofocus

자동적으로 커서가 가 있도록 함. 문서를 불러오면 폼에서 마우스 포인트 보이기

<label>이름 </label><input type="text" name="name" autofocus><br>

 

placeholder

placeholder=" " : 텍스트 상자에 설명을 하고자 할 때. 설명글

<li><label>아이디 </label><input type="text" name="text" placeholder="4자 ~ 10자 사이, 공백 없이">

그림 1. 아무것도 사용안함

 

그림 2. value 사용

 

그림 3. placeholder 사용

 

readonly

수정 못하고 읽기만 가능하게 끔

※disable 은 서버에 전달하지 않음. 사용하지 않는 것이 좋음.

그림 4. readonly 적용

 

required

필수 조건을 제어

 

그림 5. 필수 조건 제어 required

 

실습1

ex3.html에 아이디 상자에 자동 포커스, 설명글 "4자~10자 사이, 공백 없음", 이메일 필수 조건, 비밀번호 필수조건 및 "문자와 숫자, 특수 기호 포함" 설명글, 비밀번호 확인 필수 조건을 해보자

<fieldset>
<legend>사용자 정보</legend>
<ul>
<li><label>아이디 </label><input type="text" name="text" autofocus required placeholder="4자 ~ 10자 사이, 공백없이"></li>
<li><label>이메일 </label><input type="email" name="email" required></li>
<li><label>비밀번호 </label><input type="password" name="pw1" required placeholder="문자와 숫자, 특수 기호 포함"></li>
<li><label>비밀번호 확인 </label><input type="password" name="pw2" required></li>
</ul>
</fieldset>

 

그림 6. 실습1 결과

 

 

<textarea>value 값</textarea>태그

여러 줄 텍스트 상자

ex1)

<fieldset>
<legend>선택 사항5</legend>
<label>여러 줄 텍스트 상자</label>

<textarea>value 값</textarea>
</fieldset>

 

그림 7. textarea 태그

 

ex2)

<textarea name="intro" rows="20" cols="30">value 값</textarea>

 

그림 8. textarea 태그 속성

 

<select></select>

목록 상자 

 

ex1)

<select name="sel">
<option value="value1">목록 1</option>
<option value="value2">목록 2</option>
<option value="value3">목록 3</option>
</select>

 

그림 9. select 태그

첫 번째 목록이 선택되어 있음

 

ex2)

size를 넣으면 화면에 보이는 목록 개수 크기만큼 커짐.

<select name="sel" size="3">
<option value="value1">목록 1</option>
<option value="value2">목록 2</option>
<option value="value3">목록 3</option>
</select>

 

그림 10. select 태그 속성 1

size를 4로 바꾸면 아래 그림과 같다

그림 11. select 태그 속성 2

목록에서 여러 개를 선택하고 싶다면 multiple

그림 12. select 태그 속성 3

 

 

ex3)

radio checkbox는 checked, select는 selected를 사용

 

<select name="sel" size="4" multiple>
<option value="value1">목록 1</option>
<option value="value2" selected>목록 2</option>
<option value="value3">목록 3</option>

 

그림 13. select 태그 속성 4

size와 multiple은 사용 빈도가 많이 낮음

 

ex5)

<select name="sel">
<option value="value1">목록 1</option>
<option value="value2">목록 2</option>
<option value="value3">목록 3</option>
</select>

 

그림 14. ex5 결과

 

ex6)

<select name="sel">
<option value="value1">목록 1</option>
<option value="value2">목록 2</option>
<option value="value3" selected>목록 3</option>
</select>

 

그림 15. ex6 결과

 

데이터 목록 상자(텍스트상자+목록상자)

<label>데이터 목록 상자(텍스트상자+목록상자)</label>

<input type="text" list="dlist">
<datalist id="dlist">
<option value="value1">목록1</option>
<option value="value2">목록2</option>
<option value="value3">목록3</option>
</datalist>

 

그림 16. 데이터 목록 상자 1

 

value값이 선택되고 서버에 전달

 

<label>데이터 목록 상자(텍스트상자+목록상자)</label>

<input type="text" list="dlist">
<datalist id="dlist">
<option value="package">선물 포장</option>
<option value="no_package">선물 포장 안함</option>
</datalist>

 

그림 17. 데이터 목록 상자 2-1

그림 17. 데이터 목록 상자 2-2

 

실습2

그림 18에서 비밀번호 확인 아래에 목록 상자와 텍스트 상자를 넣어보자

그림 18. 실습 전

 

<fieldset>
<legend>사용자 정보</legend>
<ul>
<li><label>아이디 </label><input type="text" name="text" autofocus required placeholder="4자 ~ 10자 사이, 공백없이"></li>
<li><label>이메일 </label><input type="email" name="email" required></li>
<li><label>비밀번호 </label><input type="password" name="pw1" required placeholder="문자와 숫자, 특수 기호 포함"></li>
<li><label>비밀번호 확인 </label><input type="password" name="pw2" required></li>
<li><label>가입경로 <select name="path">

<option value="path1">블로그</option>

<option value="path2">검색</option>

<option value="path3">SNS</option>

<option value="path4">기타</option></select></label></li>
<li><label>메모 </label><textarea name="memo" rows="5" cols="20" placeholder="남길 말씀이 있다면 여기에"></textarea></li>
</ul>
</fieldset>

 

그림 19. 실습2 결과

 

실습3

그림 20을 만들어보자.

그림 20. 실습3

 

내가 짠 코드

<form>
<fieldset>
<h1>프런트엔드 개발자 지원서</h1>
<p>HTML, CSS, 자바스크립트의 기술을 이해하고 실무 경험이 있는 분을 찾습니다.</p>
<hr />
<h2>개인 정보</h2>
<label>
<ul>
<li>이름 <input type="text" name="name" placeholder="공백 없이 입력하세요"></li>
<li>연락처 <input type="tel" name="tel"></li>
</ul><br>
</label>
<h2>지원 분야</h2>
<label>
<input type="radio" name="name"> 웹 퍼블리싱<br>
<input type="radio" name="name"> 웹 애플리케이션 개발<br>
<input type="radio" name="name"> 개발환경 개선<br>
</label><br>
<h2>지원 동기</h2>
<label>
<textarea rows="5" cols="50" placeholder="본사 지원 동기를 간략히 써 주세요." maxlength="60"></textarea><br>
</label>
<input type="submit" name="submit" value="접수하기">
<input type="reset" name="reset" value="다시 쓰기">
</fieldset>
</form>

 

그림 21. 실습 3 결과1

 

수업 시간에 선생님께서 작성한 코드

<h1>프런트엔드 개발자 지원서</h1>
<p>HTML, CSS, 자바스크립트의 기술을 이해하고 실무 경험이 있는 분을 찾습니다.</p>
<hr />
<form action="test1.html" method="get">
<h2>개인 정보</h2>
<label>
<ul>
<li>이름 <input type="text" name="name" placeholder="공백 없이 입력하세요"></li>
<li>연락처 <input type="text" name="tel"></li>
</ul>
</label>
<h2>지원 분야</h2>
<ul>
<li><input type="radio" name="name" value="웹 퍼블리싱"> 웹 퍼블리싱</li>
<li><input type="radio" name="name" value="웹 애플리케이션 개발"> 웹 애플리케이션 개발</li>
<li><input type="radio" name="name" value="개발환경 개선"> 개발환경 개선</li>
<!--name="name" 같게 해야 하나만 선택 가능-->
</ul>
<h2>지원 동기</h2>
<textarea name="intro" rows="5" cols="50" placeholder="본사 지원 동기를 간략히 써 주세요." maxlength="60"></textarea><br>

<input type="submit" name="submit" value="접수하기">
<input type="reset" name="reset" value="다시 쓰기">

 

그림 22. 실습3 결과2

---

CSS(Cascading Style Sheet)

HTML는 웹 문서의 기본 골격이라고 하면, CSS는 웹 문서 골격 디자인 적용이라고 할 수 있다.

CSS를 스타일 시트라고도한다.

기기마다 다르게 문서를 적용할 수 있는데 이를 반응형 웹 디자인이라고 한다.

 

그림 23. 반응형 웹 디자인

 

CSS 형식은 선택자(태그){ 속성1 : 값1; 속성2 : 값2;} 된다.

 

기본적인 태그만 사용했을 때

<h1>레드향</h1>
<p>껍질이 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져있다.</p>

 

그림 24. 기본적인 태그만 사용

 

---

 

0) 브라우저 기본 스타일 

1) 인라인 스타일 : 태그 바로 넣기

ex) 

<h1>레드향</h1>
<p style="color: blue;">껍질이 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져있다.</p>

 

그림 25. 인라인 스타일

단, 이 방법은 좋은 방법이 아님.

 

2) 내부 스타일 시트 : head 태그 넣기

ex)

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
p{color: green;}

/* 모든 p 태그 글자색을 green 스타일로 적용*/

</style>
</head>

(...생략...)

 

그림 26. 내부 스타일 시트

인라인 스타일 우선순위가 가장 높기 때문에 첫 줄 빼고 색이 변경된 것을 알 수 있다.

 

3) 외부 스타일 시트 : 외부 파일 넣기

외부에 파일(.css)을 만들어서 가져다가 쓰는 방법이다. 공통적으로 스타일 적용하기 유용하다.

외부에 style.css 만들고 style.css에 스타일 태그 작성

ex)

style.css

@charset "UTF-8";
h1{color: red;}

저장 후

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style.css">
<style>
p{color: green;}
</style>
</head>

27. 외부 스타일 시트

 

대상(태그) {속성:값;}

대상지정 : 전체선택자(*), 태그선택자, id=이름 #이름, class=이름 .이름

 

전체선택자(*)

ex)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css1/test2.html</title>
<style>
*{
color: green;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질이 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져있다.</p>
</body>
</html>

 

결과)

그림 28. 전체선택자

 

태그선택자

ex1)

<style>
p{color: skyblue;}

</style>

 

 

그림 29. 태그선택자1

 

ex2)

<style>
*{color: green;}
p{color: skyblue;}
h1 {background-color: yellow;}
</style>

 

그림 30. 태그선택자2

 

위에서 아래로 스타일이 중첩되는 것을 알 수 있다.