radioCheck
선택창 만들기
form
form 전송 table과 table을 감싸야한다 전송버튼도 필요
form 전송버튼
<tr>
<td align="center">
<button type="button">서버에 전송</button>
</td>
</tr>radiocheck-1가지 선택 박스 만들기
<table>
<caption><b>Radio&Check</b></caption>
<tr height="30">
<td>
<b>최종학력을 선택하시오</b>
<!-- value는 얘가 가지고 있는 값 radio라는 타입이 하나만 선택하게 해줘서 그룹을 안지어줘도 됨(보여주는 값을 가져오는 역할)-->
<!-- radio는 name이 동일해야한다(나중에) -->
<!-- checked로 초기 선택(default)해주는 것 설정 -->
<input type="radio" name="grade" value="고등학교" checked>고등학교
<input type="radio" name="grade" value="전문대학">전문대학
<input type="radio" name="grade" value="대학교">대학교
<input type="radio" name="grade" value="대학원">대학원
</td>
</tr>
</table>value, type, checked,
<input type="radio" name="grade" value="고등학교" checked>고등학교 value는 input태그가 가지고 있는 값/오른쪽에 꺽쇠 옆 화면으로 출력해주는 값을 가져오는 역할(>고등학교)
radio라는 타입이 하나만 선택하게 해줘서 그룹을 안지어줘도 됨(보여주는 값)
radio는 name이 동일해야한다
checked로 초기 선택(default)해주는 것 설정
옆으로 한 칸 띄어쓰기
checkbox - 중복 선택 박스
value와 >이름 동일해야 한다(radio와 check만)
<table>
<tr>
<td>
<b>본인이 가능한 프로그랜 언어</b>
<!-- checkbox는 중복선택가능 value와 >이름 동일해야 한다(radio와 check만) -->
<input type="checkbox" name="lang" value="C언어">C언어
<input type="checkbox" name="lang" value="JAVA">JAVA
<input type="checkbox" name="lang" value="Python">Python
<input type="checkbox" name="lang" value="ORACLE">ORACLE
</td>
</tr>
</table>이미지 첨부 박스
<table>
<tr>
<td>
<b>이미지선택</b>
<!-- 파일 첨부 -->
<input type="file">
</td>
</tr>
</table>option 선택 박스
selected - 디폴트 선택박스 창
<table>
<tr>
<td>
<b>우리반에서 가장친한친구</b>
<!-- 선택옵션 -->
<select>
<option value="성현">성현</option>
<option value="호석">호석</option>
<option value="병주">병주</option>
<option value="형준형">형준형</option>
<option value="성신" selected>성신</option>
<option value="민규형">민규형</option>
<option value="희찬">희찬</option>
</select>
</td>
</tr>
</table>색 선택 창
<table>
<tr>
<td>
<b>가장 좋아하는 색은</b>
<input type="color" value="#ccffcc">
</td>
</tr>
</table>키 몸무게 생년월일
step - ""넣은 숫자 만큼 증가
<table>
<tr>
<td>
<b>당신의 키는 몇 cm</b>
<!-- step ""넣은 숫자 만큼 증가 -->
<input type="number" name="height" min="150" max="200"
value="150" step="2">cm
</td>
</tr>
<tr>
<td>
<b>당신의 몸무게는 몇 kg</b>
<input type="number" name="weight" min="40" max="100"
value="50" step="2">kg
</td>
</tr>
<tr>
<td>
<b>당신의 생년월일?</b>
<input type="date" value="2000-01-01">
</td>
</tr>
</table>본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 2px solid gray;
width: 500px;
}
tr,th,td{
border: 1px dotted gray;
font-size: 10pt;
}
</style>
</head>
<body>
<!-- form 전송 table과 table을 감싸야한다 전송버튼도 필요 -->
<form>
<table>
<caption><b>Radio&Check</b></caption>
<tr height="30">
<td>
<b>최종학력을 선택하시오</b>
<!-- value는 얘가 가지고 있는 값 radio라는 타입이 하나만 선택하게 해줘서 그룹을 안지어줘도 됨(보여주는 값)-->
<!-- radio는 name이 동일해야한다 -->
<!-- checked로 초기 선택(default)해주는 것 설정 -->
<input type="radio" name="grade" value="고등학교" checked>고등학교
<input type="radio" name="grade" value="전문대학">전문대학
<input type="radio" name="grade" value="대학교">대학교
<input type="radio" name="grade" value="대학원">대학원
</td>
</tr>
<tr>
<td>
<b>본인이 가능한 프로그랜 언어</b>
<!-- checkbox는 중복선택가능 value와 >이름 동일해야 한다(radio와 check만) -->
<input type="checkbox" name="lang" value="C언어">C언어
<input type="checkbox" name="lang" value="JAVA">JAVA
<input type="checkbox" name="lang" value="Python">Python
<input type="checkbox" name="lang" value="ORACLE">ORACLE
</td>
</tr>
<tr>
<td>
<b>이미지선택</b>
<!-- 파일 첨부 -->
<input type="file">
</td>
</tr>
<tr>
<td>
<b>우리반에서 가장친한친구</b>
<!-- 선택옵션 -->
<select>
<option value="성현">성현</option>
<option value="호석">호석</option>
<option value="병주">병주</option>
<option value="형준형">형준형</option>
<option value="성신" selected>성신</option>
<option value="민규형">민규형</option>
<option value="희찬">희찬</option>
</select>
</td>
</tr>
<tr>
<td>
<b>가장 좋아하는 색은</b>
<input type="color" value="#ccffcc">
</td>
</tr>
<tr>
<td>
<b>당신의 키는 몇 cm</b>
<!-- step ""넣은 숫자 만큼 증가 -->
<input type="number" name="height" min="150" max="200"
value="150" step="2">cm
</td>
</tr>
<tr>
<td>
<b>당신의 몸무게는 몇 kg</b>
<input type="number" name="weight" min="40" max="100"
value="50" step="2">kg
</td>
</tr>
<tr>
<td>
<b>당신의 생년월일?</b>
<input type="date" value="2000-01-01">
</td>
</tr>
<tr>
<td align="center">
<button type="button">서버에 전송</button>
</td>
</tr>
</table>
</form>
</body>
</html>웹 크기
시멘틱태그 header 나눠둔 것
0 auto 대부분 가운데 정렬
margin: 0 auto;
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrapper{
width: 980px;
/* 0 auto 대부분 가운데 정렬 */
margin: 0 auto;
}
header{
width: 980px;
height: 120px;
background-color: cadetblue;
border-bottom: 1px solid gray;
}
.header-text{
font-size: 40px;
color: white;
text-align: center;
line-height: 120px;
}
.content{
float: left;
width: 620px;
height: 400px;
padding: 15px;
background-color: palevioletred;
}
.right-side{
float: right;
width: 300px;
height: 400px;
padding: 15px;
background-color: gray;
}
footer{
clear: both;
height: 120px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- 시멘틱태그 header 나눠둔 것 -->
<header>
<h1 class="header-text">고정_그리드레이아웃</h1>
</header>
<section class="content">
<h4>본문</h4>
</section>
<aside class="right-side">
<h4>사이드바</h4>
</aside>
<footer>
<h4>푸터</h4>
</footer>
</div>
</body>
</html>웹 크기 - 크기에 맞춰서 조절
위와 똑같지만 %로 크기 맞춰줘야 웹 크기에 맞춰서 조절됨
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 가변형 필수 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 반응형 웹 웹 사이즈가 변하면 안에 내용도 웹 사이즈에 맞추게 하는 것 -->
<!-- %로 맞춰줘야함 -->
<style>
#wrapper{
width: 98%;
/* 0 auto 대부분 가운데 정렬 */
margin: 0 auto;
}
header{
width: 100%;
height: 120px;
background-color: cadetblue;
border-bottom: 1px solid gray;
}
.header-text{
font-size: 40px;
color: white;
text-align: center;
line-height: 120px;
}
.content{
float: left;
width: 63%;
height: 400px;
padding: 1.5%;
background-color: palevioletred;
}
.right-side{
float: right;
width: 31%;
height: 400px;
padding: 1.5%;
background-color: gray;
}
footer{
clear: both;
width: 100%;
height: 120px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- 시멘틱태그 header 나눠둔 것 -->
<header>
<h1 class="header-text">고정_그리드레이아웃</h1>
</header>
<section class="content">
<h4>본문</h4>
</section>
<aside class="right-side">
<h4>사이드바</h4>
</aside>
<footer>
<h4>푸터</h4>
</footer>
</div>
</body>
</html>웹 크기 - 크기에 따라 다른 창 띄우기
background-size: cover; 전체를 채움
@media screen and (max-width:1024px)
-> max-width 크기 이하면 띄우는 창
크기를 설정해서 크기 이상 혹은 이하일 경우 다른 것을 출력하게 해줌
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어쿼리 사용해보기</title>
<style>
body{
/* background 이미지 색상 다 넣을 수 있음 */
background: url(../div_img/beauty1.jpg) no-repeat fixed;
/* cover 전체를 채움 */
background-size: cover;
}
/* 크기를 설정해서 크기 이상 혹은 이하일 경우 다른 것을 출력하게 해줌 */
@media screen and (max-width:1024px) {
body{
background: url(../div_img/beauty3.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width:768px) {
body{
background: url(../div_img/beauty4.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width:500px) {
body{
background: url(../div_img/bottle02.jpg) no-repeat fixed;
background-size: cover;
}
}
</style>
</head>
<body>
</body>
</html>
백엔드 개발자로서 성장해 나가는 성현이의 블로그~