CSS 정리 02
30 Jan 2019
Reading time ~4 minutes
CSS 정리 02 - attribute(2)
CSS 속성 - 정렬
- 수평정렬 text-align
- left, right, center 가능
text-align:left;
- 수직정렬 vertical-align
- top, middle, bottom 가능
- 행의 높이가 존재할때만 적용됨
vertical-align:top;
- 객체(테이블, div)
- 정렬이 없어서 margin을 이용한다.
margin:0px auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정렬</title>
<style type="text/css">
#div_text {
width:600px;
height:200px;
border:1px solid #333;
text-align:center;
}
</style>
</head>
<body>
<div id="div_text">
<strong>문자열 수평 정렬</strong>
<br/>
안뇽!
</div>
</body>
</html>
- vertical-align은 padding(행의 높이)이 존재하는 tag에서 사용
- div같은 경우 vertical-align을 적용해도 padding이 없기 때문에 적용이 안됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정렬</title>
<style type="text/css">
#left { text-align: left }
#center { text-align: center }
#right { text-align: right }
#top { vertical-align: top }
#middle { vertical-align: middle }
#bottom { vertical-align: bottom }
</style>
</head>
<body>
<table border="1">
<tr height="100">
<td id="left" width="80">왼쪽</td>
<td id="center" width="80">가운데</td>
<td id="right" width="80">오른쪽</td>
</tr>
<tr height="100">
<td id="top" width="80">위</td>
<td id="middle" width="80">가운데</td>
<td id="bottom" width="80">아래</td>
</tr>
</table>
</body>
</html>
- table의 td태그의 경우 padding이 존재하므로 vertical-align이 적용된다.
- 객체 태그를 가운데로 정렬할 땐 margin으로 한다.
table { margin:0px auto }
CSS 속성 - 이미지
- 이미지는 모든 태그 바닥에 설정할 수 있다.
- background
- 한번에 배경관련 여러 속성을 입력할 때 쓰는 속성
- 반복여부를 생략하면 바둑판형식이 기본
- 반복여부
- repeat-x : x좌표 반복
- repeat-y : y좌표 반복
- no-repeat : 반복X
background:바닥색 url('이미지URL') 반복여부
- url로 이미지만 넣고싶으면 background-url을 쓰면 됨
background-image : url('이미지URL')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 사용</title>
<style type="text/css">
body { background: #FFFFFF url(../common/line.png) repeat-x;}
</style>
</head>
<body>
</body>
</html>
- 모든 태그에 이미지를 배경으로 설정할 수 있다.
<style type="text/css">
form,table { background: #FFFFFF url("../common/sist_logo.jpg");}
</style>
</head>
<body>
<div></div>
<form>
<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"></td>
<td width="100"></td>
<td width="100"></td>
</tr>
<tr height="30">
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
</tr>
<tr height="30">
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
</tr>
</table>
</body>
CSS 속성 - 넓이, 높이, 배경색, 테두리
- 넓이
- 안쪽 데이터가 넓이 이상 넘어가면 줄이 변경된다.
- width가 설정되어있지 않으면 브라우저 크기에 따라 데이터가 이동한다.
- width가 설정되면 브라우저의 크기가 변경되더라도 안에 데이터가 이동하지 않는다.
width: 00px
- 높이
height: 00px
- 바닥 색
background-color:RGB
- 테두리
- 테두리면을 명시하지 않으면 모든 면에 설정된다.
- 테두리를 없앨 땐 두께를 0px을 주면 된다.
- 선종류 4가지
- solid : 실선
- dotted : 점선
- dashed : 긴 점선
- double : 이중선
- 이중선은 두께가 3px부터 나타남
border: 테두리선두께px 선종류 선색;
- 테두리 특정 방향선을 변경가능
- border-left, border-right, border-top, border-bottom
border-left: 선두께px 선종류 선색;
border-right: 선두께px 선종류 선색;
border-top: 선두께px 선종류 선색;
border-bottom: 선두께px 선종류 선색;
<style type="text/css">
div { background-color: #FFCC66 }
.width { width: 500px }
.height { margin-top:10px; height: 40px }
.background { margin-top:10px; background-color: #339966 }
.border { margin-top:10px; border: 3px dotted #6699FF }
</style>
</head>
<body>
<div class="width">넓이</div>
<div class="height">높이</div>
<div class="background">바닥색</div>
<div class="border">테두리선</div>
</body>
</html>
- CSS에서 ipnut태그의 크기를 변경할 땐 input의 size속성 말고 css width, height를 지정해주면 된다.
input { background-color: #FF0000; width:100px; height:60px }
#left { margin-top:10px; border-left:3px solid #FF0000 }
#top { margin-top:10px; border-top:3px solid #00FF00 }
#bottom { margin-top:10px; border-bottom:3px solid #0000FF }
#right { margin-top:10px; border-right:3px solid #FF00FF }
- 테이블에 border를 주면 테두리만 나오게 된다.
/* css */
table { border:2px solid #333 }
<table>
<tr>
<th>번호</th>
<th>이름</th>
<th>좋아하는 것들</th>
</tr>
<tr>
<td>1</td>
<td>공선의</td>
<td>돈</td>
</tr>
<tr>
<td>2</td>
<td>이재현</td>
<td>게임</td>
</tr>
<tr>
<td>3</td>
<td>김정윤</td>
<td>철권</td>
</tr>
</table>
/* css */
table { border:2px solid #333 }
th { border:1px solid red }
td { border:1px solid blue }
- HTML에서 셀간 간격을 조절하던 cellspacing은 CSS엔 없음
- border-spacing을 사용하여 조절
- table의 border와 th, td의 border는 각각의 테두리를 갖는다.
/* css */
table { border:0px solid #333; border-spacing:0px;}
CSS 속성 - cursor
- 마우스 커서 올렸을때 커서모양으로 바꾸기
- cursor 속성값으로 crosshair, pointer, progress, move 등을 줄 수 있다.
cursor:pointer;
CSS 속성 - Design(float, position)
- float 속성
- table, div 태그를 왼쪽 또는 오른쪽으로 배치할 때 사용
- 설정된 속성이 하위로 전달되는 경우가 발생
- 설정 속성을 하위로 전달하지 않으려면 “clear:both”를 사용한다.
- float의 속성이 아래 속성으로 내려오는 경우가 발생하기 때문에 “clear:both”를 사용해서 막아준다.
<style type="text/css">
#kim { background-color: #CC6666; width:300px; float:left}
#choi { background-color: #6699FF; width:300px; float:right; clear:both; }
</style>
</head>
<body>
<div id="kim">김정윤</div>
<div id="choi">최지우</div>
</body>
<style type="text/css">
#wrap { width:600px; margin:0px auto;}
#header { background-color: #333333; height:100px }
#kim { border:1px solid #333; background-color: #CC6666; width:298px; float:left; height:200px }
#choi { border:1px solid #333; background-color: #6699FF; width:298px; float:right; height:200px }
#footer { clear:both; background-color: #99CC66; width:600px; height:100px; float:left;}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="kim">김정윤</div>
<div id="choi">최지우</div>
<div id="footer"></div>
</div>
</body>
</html>
- position 속성
- 원하는 위치로 배치할 때 사용
- 좌표를 사용
- 모든 태그에 사용할 수 있다.
- position 속성 값 세가지
- absoulte, relative, fixed
- top : y좌표, left : x좌표 등의 좌표를 사용하는 속성과 같이 사용
- relative
- absolute의 시작좌표를 변경할 때 사용
- absoulte
- 절대 좌표
- 웹브라우저 좌상단의 구석에서부터 좌표가 시작
- absolute가 relative안에 들어있을 때에만 좌표에 영향을 받는다.
- relative에 의해서 시작좌표가 변경됨
- absolute가 relative안에 들어있을 때에만 좌표에 영향을 받는다.
- 스크롤바를 움직여도 좌표가 변경되지 않는다.
- 웹브라우저 좌상단의 구석에서부터 좌표가 시작
- 절대 좌표
- fixed
- 고정 좌표
- 스크롤바를 움직이면 좌표를 수정하여 재설정한다.
- relative에 영향을 받지 않는다.
- 스크롤바를 움직이면 좌표를 수정하여 재설정한다.
- 고정 좌표
- 원하는 위치로 배치할 때 사용
<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:#FF00FF
}
#abs_3 {
position:absolute;
top:0px; left:0px;
width:300px; height:100px;
background-color:#00FFFF
}
</style>
</head>
<body>
<div>A</div>
<div>B</div>
<div>C</div>
<div id="abs_1">absolute</div>
<div style="position:relative;">
<div id="abs_2">D absolute</div>
</div>
<div id="abs_3">Test</div>
</body>
</html>
- fixed를 사용하면 설정한 좌표에서 스크롤바를 이동해도 계속 그 자리에 위치한다.
- fixed는 relative의 영향을 안받는다.
/* css */
#fix_2 {
position:fixed;
top:100px; left:400px;
width:200px;
}
<div style="position:relative;">
<div id="abs_2">D absolute</div>
<div id="fix_2"><img src="../common/images/img1_1.png"/></div>
</div>
