#css (1) - Login
<body>
<h3>웹프로그래밍을 하기 위한 입력양식</h3>
<!--
method : Data 전송(get 방식(사이트 접속), post 방식(회원가입, 로그인, 수정폼..))
action : Data 전송해주는 페이지
text : 문자전송(default)
password : 암호 입력할때 표시 안나게 함
button : input type, value : 버튼 속 값
name : 입력받은 Data값을 구분하는 인자로 사용(변수)
size : 문자길이
-->
<form method="post" action="register.jsp" autocomplete = "off">
아이디:<input type = "text" name = "name" size = "10"><br>
암호:<input type = "password" name = "pw" size = "10"><br>
이메일:<input type = "text" name = "email" size = "10"><br>
<p>
<!--
radio : 둘 중 하나의 값을 선택(성별, 결제선택(현금, 카드, 계좌이체...)
checked : 선택을 하나만 할 수 있는 논리형 속성
checkbox : 선택을 여러개 할 수 있는 속성(설문조사)
select : 정해져 있는 값 중 하나만 선택 할 수 있는 태그(목록)
-->
<input type="radio" name="gender" cheked = "cheked">남자
<input type="radio" name="gender">여자<br>
<p>
취미 : <input type="checkbox" name="chk">바둑
<input type="checkbox" name="movie">영화감상
<input type="checkbox" name="baseball">야구<br>
<p>
<!--
selected : select의 option 목록 중 화면에 출력될때 가장 먼저 출력되게함
-->
취업희망 : <select name="job">
<option>웹프로그래머</option>
<option selected>빅데이터(파이썬)</option>
<option>DB전문가</option>
<option>보안전문가</option>
</select><br>
<p>
<!--
textarea : 여러줄의 텍스트를 입력 할 수 있는 창
rows : 행 수
cols : 열 수
-->
경력사항<br>
<textarea name="career" rows="8" cols="40"></textarea><br>
<p>
<!--
submit : Data를 전송하는 버튼
reset : 전에 입력한 값을 지우고 처음부터 다시입력
alert : 버튼을 누를시 경고성문자열 출력
-->
<input type="submit" value = "제출안해" onclick = "alert('????')"><br>
<input type="button" value="보내기" onclick="alert('가입 페이지 준비중 입니다.')"><br>
<input type="reset"><br>
</form>
</body>
#css (2) - id
<head>
<meta charset="UTF-8">
<title>5. CSS의 id선택자.html</title>
<style>
/*
id선택자 : 전체문서에서 유일한 값을 부여해서 스타일을 적용 시키는 방법
형식 : 태그명#id값(임의의 작성글자)
특징 : 1. 태그명을 생략해도 스타일 적용이 가능하다. = 중복 X
2. 중의적으로 자바스크립트 언어에서도 사용이됨 = 특정태그를 가리키는 예약어
*/
div#x{font-family:impact; /* div만 적게 되면 이 문서에 있는 div 전체가 해당이 됨
div 옆에 #x 를 붙이게 되면 div중에 id값이 x인것만 해당이 됨*/
/* div대신 h1을 적어도됨 */
font-size:25pt;
font-weight:bold;
font-style:oblique;
background-color:orange;
}
#y{color:blue;text-indent:100px;} /*text-indent : 들여쓰기*/
</style>
</head>
<body>
<h2>id값은 원칙적으로 유일한 값이기 때문에 중복을 허용하지 않는다.</h2>
<h1>h1태그</h1> <!-- 스타일이 적용 안된 기본값(default) -->
<h1 id = "y">h1태그(id=y)</h1>
<div id = "y">div태그(id=y)</div>
<div>div태그</div>
<div id = "x">div태그(id=x)</div>
</body>
#css (3) - class
<head>
<meta charset="UTF-8">
<title>6. CSS의 클래스선택자.html</title>
<style>
/*
class 선택자 : 서로 같은 태그를 구분해서 스타일을 적용 시킴
형식 : 태그명.클래스명(임의의 작성글자)
태그명을 생략하면 모든 태그에 적용됨(.클래스명)
font-style : 글꼴 모양(italic)
text-decoration : 글쫄장식(underline(글자 아래 선), overline(글자 위 선), line-through(중간에 선긋기))
text-align : text 수평정렬(left, right, center)
vertical-align : text 수직정렬(top, middle, bottom)
*/
div.a{font-family:impact; /*div.a(class a)가 붙으면 div태그중 class a인 태그를 찾아서 적용*/
font-weight:bold;
color:brown;
}
div.b{font-style:italic;font-family:돋움체;font-size:99pt;}
.c{text-align:center;color:blue;text-decoration:underline;}
</style>
</head>
<body>
<!--
div : 자체적인 기능은 없으나 영역을 설정 혹은 동일한 태그를 사용하기위한 태그
-->
<div class = "a">div태그</div>
<div class = "b">div태그2</div>
<div>div태그3</div>
<hr>
<h2>서로 다른 여러개의 태그에 공통의 스타일을 적용시킬 수 있다.</h2>
<a class = "c" href = "https://www.naver.com">a태그(class=c)</a><br>
<i class = "c">i태그(class=c)</i><br>
<div class = "c">div태그(class=c)</div>
<span class="c">span태그(class=c></span>
</body>
#css (4) - div & span
<head>
<meta charset="UTF-8">
<title>7. div, span 태그의 차이점.html</title>
<style>
div {background-color:red;
width:200px;
height:50px;
display:inline;
}
span {background-color:blue;
width:200px;
height:50px;
display:block;
}
</style>
</head>
<body>
<!--
div : 1. 줄 바꿈이 자동으로 일어나는 태그(block 태그)
2. 영역을 설정할때 주로 사용(메인 페이지) = width, height
3. 한 라인을 최대로 확대해서 사용(block 태그의 특성중 하나)
span : 1. 줄 바꿈이 자동으로 일어나지 않는 태그(inline 태그)
2. width, height 사용 잘 안함 (jQuery, 화면상에 에러메세지 출력시)
3. 글자가 있는 부분까지만 최소한으로 축소해서 사용(inline 태그의 특성중 하나)
display : 화면에 보여주는 속성(block, inline, inline-block(block + inline))
-->
<h1>div태그와 span태그의 차이점</h1>
<div>div태그 연습입니다.</div>
<div>div태그 연습2입니다.</div>
<div>div태그 연습3입니다.</div>
<span>span태그 연습입니다.</span>
<span>span태그 연습2입니다.</span>
<span>span태그 연습3입니다.</span>
</body>
'국비학원 > 공부' 카테고리의 다른 글
| 6일차 jsp(미니 프로젝트) (0) | 2023.04.28 |
|---|---|
| 5일차 jsp(Array) ~ DOM (0) | 2023.04.28 |
| 4일차 jsp(2) (0) | 2023.04.24 |
| 3일차 css(2) ~ javascript(jsp) (0) | 2023.04.23 |
| 1일차 html ~ table (0) | 2023.04.20 |