본문 바로가기
개발자/백엔드 웹 개발자 과정(국비)

HTML(3),css(1)_2022-12-26

by 초응 2022. 12. 26.

[시멘틱 태그 -의미를 표현하는 표를 만들 때]
<thead> : 제목
<tbody> : 본문에 대한 내용
<tfoot> : 꼬리말

thead > tfoot > tbody순으로 번역하기 때문에
의미를 부여하고 있는 테이블을 만들 때 위 순서로 작성.
(구조를 만들때는 X)

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <table border = "1" width ="400">
	<thead>
		<tr>
			<th>강사 이름</th>
			<th>과목</th>
			<th>강의실</th>
			<th>수강료</th>
		</tr>
	</thead>
	<tfoot>
		<tr>

			<td colspan = "4">위 상기 내용은 변경될 수 있습니다.</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td rowspan = "2">홍길동</td>
			<td>Java</td>
			<td rowspan = "2">A Class</td>
			<td>700,000</td>
		</tr>
		<tr>
			<td>JSP</td>
			<td rowspan = "2">800,000</td>
		</tr>
		<tr>
			<td>둘리</td>
			<td>Oracle</td>
			<td>B Class</td>
		</tr>
	</body>

  </table>
 </body>
</html>

GUI 입력받기 - form를 통해서 입력받음.
<form>

*입력양식을 위한 태그 : <form>~</form>

 1. name = "이름"  (폼을 구별하기 위해 이름을 지정한다.)
2. action =  "URL주소" 전달하고자 하는 목적지 지정

ㄴaction 속성값을 생략한 경우에는 현재 자신의 페이지로 전송한다.
3. method = get(기본값)|post

ㄴ get방식 : 소량 데이터(255자), 전송데이터가 주소 입력줄을 통해 공개된다. 파일은 넘기기 어렵다.

ㄴpost방식 : 서버에 직접 전달, 보안 가능하다.(버퍼를 이용해 전송하는 방식(데이터를 숨겨 전송))
4. enctype = application (업로드)/x-www.urlencoded(기본값) : 전송되는 데이터 타입을 지정한다.

ㄴ 자료실 구축시에는 enctype="multipart/form-data"을 사용해야 함.

 

<input type = "text"> : 한 줄 입력 상자.

1. name = "이름" : 입력상자의 이름 구별

2. size = "숫자"  : 입력상자 넓이

3. maxlength = "숫자" : 입력가능한 최대 길이

4 value = "값" : 브라우저 실행 시에 자동으로 삽입되는 문자열을 지정하거나 서버 측으로 전송할 값 지정.

ㄴ입력양식 이름(name) = 값(value

 

 

<input type = "password"> : 패스워드 입력상자 (키를 입력했을 경우 그대로 보이지 않고 *처리해서 보임

1. name = "이름" : 입력상자의 이름 구별

2. size = "숫자"  : 입력상자 넓이

3. maxlength = "숫자" : 입력가능한 최대 길이

4 value = "값" : 브라우저 실행 시에 자동으로 삽입되는 문자열을 지정하거나 서버 측으로 전송할 값 지정.

ㄴ입력양식 이름(name) = 값(value)

 

<input type = "radio"> :라디오 단추 (옵션단추) (같은 그룹 안에서 반드시 하나의 항목만 선택할 수 있음)

1. name = "이름" : 라디오 단추의 이름을 지정하여 같은 그룹으로 만들 경우에는 이름 일치해야 함.

2. value = " 값"  : 같은 그룹에서 각각의 항목을 구별하는 속성이며 서버 측에 전송되는 값 지정.

3. cheked  : 브라우저 실행 시에 기본적인 선택항목으로 지정

 

<input type = "checkbox"> :체크 상자(같은 그룹 내에서 항목 선택 제한 없음)

1. name = "이름" : 라디오 단추의 이름을 지정하여 같은 그룹으로 만들 경우에는 이름 일치해야 함.

2. value = " 값"  : 같은 그룹에서 각각의 항목을 구별하는 속성이며 서버 측에 전송되는 값 지정.

3. cheked  : 브라우저 실행 시에 기본적인 선택항목으로 지정

 

<select>

<option value = "값" > 항목 1

<option value = "값"> 항목 2

</select>

 

<select> 

1.  name ="이름" (목록상자의 이름 지정)

2. multiple : 다중항목 선택 활성

3.size = "숫자" (브라우저 실행 시에 보이는 리스트 개수)

 

<option>

1. value = "값" (서버 측으로 전송될 목록상자에서 선택된 항목의 값을 지정.

2.selected = "브라우저 실행 시에 기본적인 선택항목 지정.

ㄴ option태그에서 selected 속성을 사용하지 않으면 자동으로 첫 번째 항목이 선택됨.

 

<textarea> 초기문자열 </textarea>: 여러 줄 텍스트 상자

1. name ="이름" :입력 상자의 이름

2. cols = "칸수"/ rows="줄 수" : 입력상자의 크기 지정(가로, 세로)

3. readonly : 읽기 전용 속성.

 

<input type = "file"> (왼쪽: 텍스트 상자, 오른쪽 :찾아보기 버튼)

-찾아보기 버튼을 틀릭하면 파일 열기 대화상자가 열림.

- 파일을 선택하고 열기를 클릭하면 선택파일의 절대 경로가 텍스트 상자에 표시됨

1. name = "이름" : 파일 업로드 양식의 이름

2. size = "숫자" : 왼쪽 텍스트 상자의 너비

 

<input type = "submit"> : 전송버튼

<input type = "reset"> : 초기화버튼

<input type = "button"> : 일반 버튼

공통 속성

1. name = "이름"  :  버튼의 이름지정.

2. value = "문자열" : 버튼 위에 표시되는 문자열 (value 속성 값의 길이에 따라 버튼의 너비가 달라짐.)

 

<input type = "image" src = "이미지 파일"> : 일반 이미지와 다르게 이미지를 클릭하면 전송기능이 실행됨.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>

  <h1>사용자 개인정보 입력하기</h1>
	<form name = "fm" action ="http://naver.com" method = "post">
	<fieldset>
		<legend>필수 정보</legend>
	  <label>이름 : <input type = "text" name = "name"/></label><br>
	  아이디 : <input type = "text" name = "id" size = "45" maxlength = "6" value = "hong"/><br/>
	  <label for ="userpwd">비밀번호 :</label> <input type ="password" name = "pwd" id = "userpwd"> 
	  	</fieldset><br/>
	  성별 : <input type = "radio" name = "se" value ="남자">남자
			<input type = "radio" name = "se" value = "여자" checked>여자
			<input type = "radio" name = "se" value = "트랜스">트랜스 <br/>
		취미 : <input type = "checkbox" name ="cbs" value = "공부">공부
			<input type = "checkbox" name "cbs" value = "독서">독서
			<input type = "checkbox" name "cbs" value = "게임">게임
			<input type = "checkbox" name "cbs" value = "운동">운동
			<input type = "checkbox" name "cbs" value = "잠자기">잠자기 <br/>
		직업 :
		<select name = "job" size = "4" multiple >
			<option value = "학생">학생</option>
			<option value = "회사원">회사원</option>
			<option value = "군인" selected = "selected">군인</option>
			<option value = "프리랜서">프리랜서</option>
			<option value = "공무원">공무원</option>
			<option value = "자영업">자영업</option>
		</select><br>
		자기소개 <br>
		<textarea name = "mypr" rows = "8" cols ="35">Hello</textarea><br>
		사진 올리기 : <input type = "file" name = "myphoto"><br/>

		<input type = "submit" value ="데이터 전송하기">
		<input type = "reset" value = "모든 데이터 초기화">
		<input type =  "button" value = "더미버튼">
	</form>
 </body>
</html>

기본적인 데이터의 영역을 잡아서 구분하자. <fieldset>

[CSS]
-HTML은 콘텐츠와 디자인을 구분.
-style :  head 태그 안에 넣음.
[css 기본 문법]
선택자 {
속성 : 속성값;
속성 n : 속성값 n;
}
[css 선언방식 3가지]
1. 태그 선택자 - 태그명 지정해서 ( 모든 태그명에게 적용됨)
2. 클래스 선택자 - 내가 적용할 클래스를 정해놓고 지정하는 기법 (재활용을 하기 위한 목적으로 만들어짐)
3. 아이디 선택자- 특정 대상 하나만을 위해서 만든 선택자.(하나의 페이지에서 하나의 값만 사용가능)

[css 적용방식 3가지]
1. 인라인 적용방식 - body에 직접 입력하는 방식.추천하지 않음.
2. 임베디드 적용방식 - 해당 페이지에서만 적용하는 방식 (전반적인 정보를 head태그 안에서 제시.)
3. 익스터널 적용방식  - 반복적으로 사용하는 css를 따로 저장하여 필요할 때마다 불러오는 행위.

css는 시멘틱태그 제외하고 속성 적용됨.
대속성 : 대표가 되는 속성. 하나의 단어로 이루어져 있고
새속성 : 대속성 이름에 -가 들어감.  

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
 <style>
h1{

text-align: center;
font-size :40px;
}
table{
 border-top: 3px double darkblue;
  border-bottom: 3px double darkblue;
width:370px;
border-spacing:0px;
margin:0px auto ;

 }
.cell1{
background-color: skyblue;
font-size : 15px;
border-right : 2px dotted darkblue;
border-bottom : 2px dotted darkblue;
}
.cell2{
background-color: skyblue;
font-size : 15px;
border-right : 2px dotted darkblue;
}
.cell3{
font-size : 15px;
border-bottom : 2px dotted darkblue;
}
.cell4{
font-size : 15px;
}

.box{
border : 1px solid gray;
font-size : 15px;
background:skyblue;
color :darkblue;
}
</style>
</head>
 <body>
<h1>회 원 가 입</h1>
<table>
	<tr>
	<td class = "cell1">*아이디</td>
	<td class = "cell3"><input type = "text" name = "id" value = "test" class="box"/></td>
	</tr>
	<tr>
	<td class = "cell1">*비밀번호</td>
	<td class = "cell3"><input type = "password" name = "pwd" id ="userpwd" class="box"/></td>
	</tr>	
	<tr>
	<td class = "cell2">*연락처</td>
	<td class = "cell4"><input type = "text" name = "tel" class="box"></td>
	</tr>
</table>
 </body>
</html>

'개발자 > 백엔드 웹 개발자 과정(국비)' 카테고리의 다른 글

[CSS]2022/12/26~27  (0) 2022.12.27
자바스크립트(1)_2022-12-27  (0) 2022.12.27
HTML<2>_2022-12-23  (0) 2022.12.23
221222_HTML(1)  (0) 2022.12.22
2022년 12월 19일 _ 29회차 (JDBC)  (0) 2022.12.19

관련글

티스토리툴바