반응형
*CSS
-
정렬
-
문자열:
-
수평정렬 : text-align : left|center|right
-
수직정렬 : vertical-align: top|middle|bottom
-
객체(테이블, div)
-
(객체는 정렬이 없어 가운데로 어떻게 보내지?->margin으로 하게 됨. vertical-align이 없음!
-
margin : 0px auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>alignment 정렬</title>
<style type="text/css">
/* text-align: left,center,right로 수평정렬 */
#div_text{width:600px; height:100px; border:1px solid #333; text-align: right;
vertical-align: bottom;}/* text행의높이가 아니기 때문에 vertical을 주나 마나, td안에서는 티가난다. */
#left{text-align: letf}
#center{text-align: center}
#right{text-align: right}
/* vertical-align: 행의높이가 존재하는 tag에서 사용한다. */
#top{vertical-align: top}
#middle{vertical-align: middle}
#bottom{vertical-align: bottom}
/* 혼자test */
#a{vertical-align: top; text-align: left;}
#b{vertical-align: middle; text-align: right;}
#c{vertical-align: bottom; text-align: center;}
/* 문자열이 아닌 tag를 가운데 정렬할 때에는 margin으로 한다. */
/* table{text-align: center} */
table,div{margin:0px auto;}
</style>
</head>
<body>
<div id="div_text">
<strong>문자열 수평 정렬</strong><br/>
fsfs<br/>
fsf<br/>
</div>
<hr/>
<table border="1" cellspacing="0">
<tr height="100px">
<td id="left"; width="80px">왼쪽</td><!-- 기본이 왼쪽 주나마나 -->
<td id="center"; width="80px">가운데</td>
<td id="right"; width="80px">오른쪽</td>
</tr>
<tr height="100px">
<td id="top"; width="80px">위</td>
<td id="middle"; width="80px">가운데</td>
<td id="bottom"; width="80px">아래</td>
</tr>
<tr height="100px">
<td id="a"; width="80px">위왼</td>
<td id="b"; width="80px">가운데오</td>
<td id="c"; width="80px">아래센</td>
</tr>
</table>
</body>
</html>
-
이미지
-
background : 바닥색(RGB)^url('이미지url')^ 반복여부(repeat-x(x좌표반복)|repeat-y(y좌표반복)|no-repeat(반복x);
-
반복여부를 생략하면 바둑판형식을 기본으로 그려진다.
-
background-image : url('이미지URL'); //이미지 하나만 딱 들어가짐.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 사용</title>
<style type="text/css">
/* 이미지는 모든 태그의 바닥에 설정할 수 있다. 어디든 다 깔 수 있다.
repeat-x : x좌표로 이미지를 반복 시킬 때,
repeat-y : y좌표로 이미지를 반복 시킬 때,
no-repeat : 반복하지 않음.
*/
body{background: #FFFFFF url(../common/images/line.png) repeat-x;}
div{width : 600px; height:300px; background:#FFFFFF url('../common/images/daum.png') repeat-y}/* div만큼만 깔림. */
form,table {background : #FFFFFF url("../common/images/sist_logo.jpg") }
</style>
</head>
<body>
<div></div>
<form><!-- 서버로 데이터를 전송하는 일을 하는 태그(input,select,textarea) -->
<label>이름</label><input type="text"/> <br/>
<label>나이</label><input type="text"/> <br/>
<label>주소</label><input type="text"/> <br/>
</form>
<table border="1">
<tr height="30">
<td width="100">Java SE</td>
<td width="100">Oracle DBMS</td>
<td width="100">JDBC</td>
</tr>
<tr height="30">
<td width="100">HTML</td>
<td width="100">CSS</td>
<td width="100">JavaScript</td>
</tr>
<tr height="30">
<td width="100">Java EE(Servlet/JSP)</td>
<td width="100">AJAX</td>
<td width="100">Framework</td>
</tr>
</table>
</body>
</html>
-
넓이
-
넓이가 정해지면 안쪽 데이터가 넓이 이상 넘어가면 줄이 변경된다.
-
width: 넓이px|cm|em;
-
높이
-
height : 높이px|cm|em;
-
바닥색
-
background-color : RGB;
-
테두리 선(border)-4방향을 다 줄 수 있다.
-
border : 테두리선 두께px^ 선종류^ 선색(RGB); -모든방향의 선 설정
-
선종류
-
solid-실선
-
dotted-점선 (짧은선으로 이루어진 - - - - )
-
dashed-점선 (좀더 긴 선으로 이루어진 ㅡ ㅡ ㅡ ㅡ)
-
double-이중선,테두리선 두께가 3px이상부터 보인다.
-
특정방향선 변경
-
border-letf: 선두께px^ 선종류^ 선색;
-
border-right: 선두께px^ 선종류^ 선색;
-
border-top: 선두께px^ 선종류^ 선색;
-
border-bottom: 선두께px^ 선종류^ 선색;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 사용</title>
<style type="text/css">
/* 이미지는 모든 태그의 바닥에 설정할 수 있다. 어디든 다 깔 수 있다.
repeat-x : x좌표로 이미지를 반복 시킬 때,
repeat-y : y좌표로 이미지를 반복 시킬 때,
no-repeat : 반복하지 않음.
*/
body{background: #FFFFFF url(../common/images/line.png) repeat-x;}
div{width : 600px; height:300px; background:#FFFFFF url('../common/images/daum.png') repeat-y}/* div만큼만 깔림. */
form,table {background : #FFFFFF url("../common/images/sist_logo.jpg") }
</style>
</head>
<body>
<div></div>
<form><!-- 서버로 데이터를 전송하는 일을 하는 태그(input,select,textarea) -->
<label>이름</label><input type="text"/> <br/>
<label>나이</label><input type="text"/> <br/>
<label>주소</label><input type="text"/> <br/>
</form>
<table border="1">
<tr height="30">
<td width="100">Java SE</td>
<td width="100">Oracle DBMS</td>
<td width="100">JDBC</td>
</tr>
<tr height="30">
<td width="100">HTML</td>
<td width="100">CSS</td>
<td width="100">JavaScript</td>
</tr>
<tr height="30">
<td width="100">Java EE(Servlet/JSP)</td>
<td width="100">AJAX</td>
<td width="100">Framework</td>
</tr>
</table>
</body>
</html>
<<어제한 숙제 이쁘게 만들기(재정돈)>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#joinTitle{font-weight: bold; font-size: 20px;}
.tdalign{text-align: center}
table{margin: 0px auto}
tr{height:25px}
</style>
</head>
<body>
<!-- <pre>
오늘은 수요일입니다ㅏㅏㅏㅏㅏㅏㅏㅏㅏ
내일은
목요일
</pre>-적는대로 출력 띄어쓰기도 줄넘기기도, 맞추기가 너무 어려워 쓰지않는다 -->
<form action="">
<table>
<tr>
<td class="tdalign" colspan="2"><span id="joinTitle">회원가입</span></td>
</tr>
<tr>
<td>아이디</td>
<td>
<input type="text" class="inputBox" readonly="readonly" style="width:100px">
<button type="button" class="btn">중복확인</button>
</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" class="inputBox" style="width:120px"></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="password" class="inputBox" style="width:120px"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" class="inputBox" style="width:120px"></td>
</tr>
<tr>
<td>주민번호</td>
<td><input type="text" class="inputBox" style="width:60px" maxlength="6"><label> - </label>
<input type="password" class="inputBox" style="width:70px" maxlength="7"></td>
</tr>
<tr>
<td>성별</td>
<td><input type="radio" value="남자" name="gender" checked="checked" >남자<input type="radio" value="여자" name="gender">여자</td>
</tr>
<tr>
<td>생년월일</td >
<td>
<select name="year" class="inputBox">
<option value="2019" selected="selected">2019</option>
<option value="2018" >2018</option>
<option value="2017" >2017</option>
</select>
<label>년</label>
<select class="inputBox">
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<label>월</label>
<select class="inputBox">
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<label>일</label>
</td>
</tr>
<tr>
<td>나이</td>
<td><input type="text" class="inputBox" style="width:30px"></td>
</tr>
<tr>
<td>관심언어</td>
<td>
<input type="checkbox" value="Java" name="interestlang">Java
<input type="checkbox" value="C/C++" name="interestlang">C/C++
<input type="checkbox" value="Python" name="interestlang">Python
<input type="checkbox" value="VB" name="interestlang">VB
<input type="checkbox" value="JSP" name="interestlang">JSP
<input type="checkbox" value="Servlet" name="interestlang">Servlet
<input type="checkbox" value="ASP" name="interestlang">ASP
<input type="checkbox" value="php" name="interestlang">php
</td>
</tr>
<tr>
<td>결혼여부</td>
<td><input type="radio" value="미혼" name="marrige" checked="checked" >미혼<input type="radio" value="기혼" name="marrige">기혼</td>
</tr>
<tr>
<td>결혼기념일</td>
<td><input type="text" maxlength="4" class="inputBox" style="width:40px">년
<input type="text" maxlength="2" class="inputBox" style="width:20px">월
<input type="text" maxlength="2" class="inputBox" style="width:20px">일</td>
</tr>
<tr>
<td>우편번호</td>
<td><input type="text" readonly="readonly" class="inputBox" style="width:30px"><label> - </label>
<input type="text" readonly="readonly" class="inputBox" style="width:30px">
<button type="button" class="btn">우편번호검색</button></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" readonly="readonly" class="inputBox" style="width:200px"></td>
</tr>
<tr >
<td>상세주소</td>
<td><input type="text" class="inputBox" style="width:200px"></td>
</tr>
<tr valign="middle">
<td>가입인사</td>
<td><textarea rows="5" cols="50" class="inputBox" style="width:250px; height:100px"></textarea></td>
</tr>
<tr>
<td colspan="2" class="tdalign"><button type="submit" class="btn">가입</button> <button type="reset" class="btn">초기화</button></td>
</tr>
</table>
</form>
</body>
</html>
@charset "UTF-8"; /*main_v190130.css*/
body, div, ul, ol, li, form, fieldset, legend, select, button, th, td,
textarea, p, input {
margin: 0px;
padding: 0px
}
fieldset, img {
border: 0px
}
ul, ol, li {
list-style: none
} /* 일반글자들이 왼쪽으로? */
body, th, td, input, select, textarea, button {
font-size: 13px;
line-height: 1.5; /* 폰트사이즈의 1.5배? */
font-family: '맑은 고딕', dotum, '돋움', sans-serif;
color: #3F3F3F;
}
a {
color: #3F3F3F;
text-decoration: none
}
a:hover {
color: #128EFD;
text-decoration: underline
}
.inputBox {
border: 1px solid #EDEDED;
background-color: #FFFFFF;
height: 20px
}
.btn {
border: 1px solid #EDEDED;
background-color: #FFFFFF;
color: #1C1C1C;
height: 22px;
padding: 3px;
cursor: pointer;
}
*Design
-
float : table,div를 배치(left,right)할 때 사용 <<무조건 왼쪽 아니면 오른쪽>>
-
설정된 속성이 하위로 전달되는 경우가 발생한다. <<버그같은 존재>>
-
#id{float:left} ~~~>아래로 흘러
-
설정 속성을 하위로 전달 하지 않으려면 clear:both 를 기술한다.(쓰지않으면 흘러가 아래 디자인이 깨진다)
-
position
-
모든 태그에 사용할 수 있다.
-
원하는 위치로 배치할때 사용
-
좌표 사용 <<수동배치......>>
-
absolute, relative, fixed
-
top: Y좌표, left: X좌표 등의 좌표를 사용하는 속성과 같이 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float으로 배치 하기</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{width:600px; height:700px; margin:0px auto}
#header{background-color: #DCE4EF; height:100px}
#kim{border: 1px solid #333; background-color: #53BEFF; width:298px; height:498px; float:left}/* border를 주면302,502 의 크기가 된다*/
#choi{border: 1px solid #333; background-color: #99FF8D; width:298px; height:498px; float:right}
/* clear:both;를 사용하면 바로 위의 float속성이 아래로 내려오는 것을 막을 수 있다. */
#footer{clear:both; background-color: #5A79AA; height:100px; width:600px}
</style>
</head>
<body>
<!--
작성자 : owner
작성일 : 2019. 1. 30.
내용 : float으로 배치 하기
-->
<div id="wrap">
<div id="header">header</div>
<div id="kim">김</div>
<div id="choi">최</div>
<div id="footer">footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position으로 absilute,fixed배치</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#abs_1{position: absolute; top:100px; left: 100px; width:300px; height:100px; background-color: #FF0000}
/* absolute가 relative안에 들어있을 때에만 좌표에 영향을 받는다. */
#abs_2{position: absolute; top:0px; left: 0px; width:300px; height:100px; background-color: #FF0000}
#abs_3{position: absolute; top:0px; left: 0px; width:300px; height:100px; background-color: #0000FF}
/* fixed 배치! 스크롤바를 내려도 고정~! */
#fix_1{position:fixed; top:100px; left:600px;}
#fix_2{position:fixed; top:300px; left:500px;}
</style>
</head>
<body>
<!--
작성자 : owner
작성일 : 2019. 1. 30.
내용 : position으로 absilute,fixed배치
-->
<div>A</div>
<div>B</div>
<div style="height:600px">C</div>
<div id="abs_1">absolute</div>
<div style="position:relative">
D
<div id="abs_2">D absolute</div>
<div id="fix_2"><img src="../common/images/daum.png"/></div>
</div>
<div id="abs_3">Test</div><!-- relative안에 없어서 0.0부터 시작 -->
<div id="fix_1"><img src="../common/images/sist_logo.jpg"/></div>
</body>
</html>
-
relative
-
absolute의 시작좌표를 변경 할 때 사용.
-
absolute : 절대 좌표
-
(웹브라우저의 좌측 상단의 구석에서부터 시작)
-
스크롤바를 움직여도 좌표가 변경되지 않는다.
-
relative에 의해서 시작좌표가 변경된다.
-
fixed: 고정좌표
-
스크롤바를 움직이면 좌표를 수정하여 재설정한다.
-
웹툰바에 리모콘이 대표적
-
relative에 영향을 받지 않는다.
<<수동배치예시>>
.(이쯤이 시작이면)
□이쯤 그려지는것
<div style="position:absolute; top:100px; left:50px;" ></div>
<div></div>
<div></div>
<div style="relative">
<div style="posistion; absolute; top :100px; left:10px"></div>
</div>
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 72일차-JavaScript (0) | 2019.02.02 |
|---|---|
| 71일차-CSS,JavaScript (0) | 2019.02.01 |
| 69일차-CSS (0) | 2019.01.30 |
| 68일차-HTML Form Control (0) | 2019.01.29 |
| 67일차-HTML_div tag (0) | 2019.01.27 |