알고리즘 바로가기 
보안 포스트 바로가기 
JAVA 바로가기 
리눅스 서버 바로가기 
크기 단위
px : 화소 하나의 크기에 대응되는 단위(고정값)
em: 부모요소 크기에 따른 배수 단위
rem: html 태크의 폰트 크기에 따라 결정
.div1{
font-size: 20px;}
.div2{
font-size: 20px;
font-size: 2em;}동일 속성을 지정할 경우, 나중에 선언한 것으로 적용된다.
em은 부모 사이즈의 배율로 적용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
.div1{
font-size: 20px;}
.div2{
font-size: 20px;
font-size: 2em;}
.div3{
font-size: 2em;}
</style>
</head>
<body>
<div class="div1">
안녕??
<div class="div2">안녕하세요
<div class="div3">안녕하세요</div>
</div>
</div>
</body>
</html>
div3 는 div1의 2배인 div2의 2배, 즉 4배 크기가 적용된다.
【 반응 선택자 】
사용자의 반응으로 생성되는 특정한 상태를 선택
:active: 마우스로 클릭한 때를 선택
:hover 마우스 올린 때를 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<style>
/*.Legend_01{
font-size : 30px;
}
.Legend_01:hover{
color: blue;
font-family : koverwatch;
}*/
fieldset:hover>.Legend_01{
color: blue;
font-family : koverwatch;
font-size: 2em;
}
</style>
<body>
<fieldset>
<legend class="Legend_01"> 회원가입 </legend>
ID : <input type ="text"> <br>
PW : <input type="password"> <br>
<input type = "submit" value="회원가입">
</fieldset>
</body>
</html>상속관계를 나타냄
fieldset:hover 되었을때의 .legend_01에게 상속시키니
그 설정이 해당 상태에서 적용됨
*{color:red;} 가중치 0
p{color:red;} 가중치 1
.txt{color:red;} 가중치 10
#main{color:red;} 전부 가능. 가중치 100
가중치가 높은 것은 더 낮은 스타일에 영향을 받지 않음.
즉
#box p span 은 100+1+1
#box .my_color span 은 100+10+1 로 이쪽이 적용된다.
【 DIV 체계 】
화면의 큰 영역을 분할하여 표기할 때 주로 사용
header ,body, footer 식으로 표기.
【 display 속성 】
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>display : inline</h1>
<input type = "text">
<i>i태그</i>
<u>u태그</u>
<sup>위첨자</sup>
<a>a태그</a>
<h1>display : block</h1>
<div> div</div>
<p>p</p>
</body>
</html>
display가 block 인경우, 공간을 미리 배정한다.
inline일 경우, 컨텐츠의 양만큼 공간을 차지한다.
a{
display: block;
}물론 다음과 같이 inline 태그를 block으로 수정가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<style>
a{
display: block;
width: 100px;
height: 100px;
}
i{
width: 100px;
height: 100px;
display: inline-block;}
p{
display : none;}
</style>
<body>
<h1>display : inline</h1>
<input type = "text">
<i>i태그</i>
<u>u태그</u>
<sup>위첨자</sup>
<a>a태그</a>
<h1>display : block</h1>
<div> div</div>
<p>p</p>
</body>
</html>inline-block; 은 inline을 block으로 바꿔주며
none은 아예 보이지 않게 한다.
모든 요소는 사각형으로 구성된다.
【 BOX 모델 구조 】
margin [ 바깥 여백 ]
border [ 경계선 ]
padding [ 안쪽여백 ]
content [ 내용 ]
div에 margin 20px 를 적용한 결과로 확인할 수 있다.
또한 body태그는 margin을 기본적으로 가지고 있다.
margin 을 20 100 으로 준 결과이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
div{
width : 300px;
height: 300px;
background-color : navy;
/* 전체 적용 */
margin: 20px;
/*top,bottom / left, right */
margin : 20px 100px;
/* top, [left,right], bottom*/
margin : 20px 100px 100px;
/* top, right, bottom, left */
margin : 20px 100px 100px 50px;
/* margin-top, margin-bottom, margin-left, margin-right 는 각각의 영역에 적용*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
box-sizing
{ 요소의 크기를 화면에 표시하는 방식}
content-box
border-box
border 속성
[선 두께]
[선 스타일]
solid, dotted, dashed, double, groove, ridge, inset, outset 등
[선 색깔]
border: 선 두께px, 선 스타일 ,선 색깔로 표현
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
div{
width : 200px;
height : 200px;}
.div1{
background-color: pink;
border : 15px dashed teal;} /* 선 굵기, 선 종류, 선 색깔 */
.div2{
background-color:gray;
border-radius: 100px 200px 30px 100px;} /*좌측 상단, 우측상단, 우측하단, 좌측하단 순서대로 */
</style>
</head>
<body>
<div class ="div1"></div>
<div class ="div2"></div>
</body>
</html>
