<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
body{
font-size : 0pt;
margin 0px auto;
}
.a {
/* font-family : 글꼴을 나타냄. 여러개를 지정가능. 앞에서 부터있는 것을 적용 */
font-family : '돋움','고딕';
font-style : italic;
/*font - weight : 굵기 normal, bold, 100(얇다) ~ 900(두껍다)*/
font-weight : bold;
/* font -size : 글자크기를 표현. 종류는 pt,px,em(16px = 1em), vw(1vw = 브라우저 1%)*/
font-size : 14pt;
/*solid : 실선, dotted 점선, dashed : 조금 긴 점선, double : 겹선(두줄)*/
border-bottom-width : 2px;
border-left-width : 1px;
border-right-width : 2px;
border-top-width : 1px;
border-style : ridge;
border-color : #000000;
border-radius : 3px;
/*width, height : 내용의 너비와 높이를 지정한다. %로 크기적용 시 부모의 크기에 따라 유동으로 지정. 단, 부모의 크기가 없을 경우 0px 처리함*/
width : calc(25% - 23px);
/*min-가로,세로 : 최소크기 . 비율로 크기지정시 동작*/
/*max-가로,세로 : 최소크기 . 비율로 크기지정시 동작*/
min-width : 100px;
height : 100px;
display : inline-block;
vertical-align : top;
margin : 10px 0px;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<div class = "a">Hello</div>
<div class ="a"></div>
<div class ="a"></div>
<div class ="a"></div>
<div class ="a"></div>
<div class ="a"></div>
<div class ="a"></div>
<div class ="a"></div>
</body>
</html>#BORDER - 테두리
width : 크기(테두리 두께)
style : 형태(필수로 작성하여야한다.) -solid
color : 색상
border -방향 -옵션 : 값;
- -방향 : 생략시 모든방향
- -옵션 : 생략시 크기 형태 색상 순으로 값을 한번에 지정
border - radius : 모서리를 둥글게 바꿔준다. (원리 : 모서리를 기준으로 반지름을 설정. 원을 그리고 원과 보더가 닿기 전 까지 원을 그림
width : 가로
height : 높이
이 두개의 합은 테두리와 상관이 없다. 이유는 border에 선의 굵기를 정할 수 있기 때문이다.
#display
block :
inline-block : 크기지정이 없을 경우 inline 동작. 크기지정 시 지정 크기만큼 영역할당. 단, 정렬 시 내용물의 위치에 따라 위치조정. 원하는데로 정렬시에는 vertical-align:top;을 활용해야 한다.
#margin : 밖 여백
margin - 방향 : 값;
-방향 : 생략시 값에 방향별크기 지정가능.
margin : 값1(top) 값2(right) 값3(bottom) 값4(left)
margin : 값1(top) 값2(left,rigth) 값3(bottom) 값
margin : 값1(top,bottom) 값2(left,right)
margin : 값(모든방향 동일하게)
페이지의 모든 것을 가운데 정렬 : margin 0px auto;
body 자체가 기본적으로 margin을 가지고 있다.
#padding
내용과 border 사이에 여백 내용에서 border를 밀어내서 내용의 크기가 커진다.
padding -방향 : 값;
-방향 : 선택적. 사용법은 margin과 동일
#Line-Height
line-height는 내용이 한줄만 존재할때 적용가능
부모를 기준으로 따라간다.
#white space
태그이며 넘치는 것들에 대한 정의이다.
- nomal : 공백들을 스페이스 한칸으로. 크기보다 클 경우 자동 줄바꿈
- nowrap : 공백들을 스페이스 한칸으로 크기보다 큰 경우 넘침, <br>만나야 줄 바꿈을 실행한다.
- pre : 공백이 그대로 적요되며 크기보다 클 경우 넘치게된다.<br>또는 엔터를 만나야 줄바꿈을 실행한다.
- pre-line : 공백들을 스페이스 한칸으로 처리하되 엔터는 정상 적용된다.크기보다 클 경우 자동 줄 바꿈
- pre-wrap : 공백 그대로 적용. 크기보다 클 경우 자동 줄바꿈
overflow y를 자주 사용한다. 보통은 auto로 y에만 다는 경우가 많다.
nowrap hidden ellipsis와는 한쌍이다. 이 세개를 같이 쓰면 넘치는 부분을 ...으로 작성되어 나오게된다.
text - overflow : 글자가 넘쳤을때
text - shadow : 글자 그림자
box-shadow : 테두리 그림자
좋은 디자인이란?
사용자가 시선이 흘러가는데로 쓸 수 있어야한다.
background - image : 배경 이미지 url() 로 입력합니다.
background - repeat : 배경 이미지 반복
background - position : 배경 이미지 위치
linear-gradiant(방향,색상,색상2,색상3,색상4)
position
static은 기본값을 의미한다. 그리고 relative는 상대적인 언어로 바로 전 것과 연관된다.
#position relative
위치를 top left right bottom으로 지정하게 되면 기준 대상 기준으로 이동(없으면 내가 원래 있던 위치가 기준이다.)
추가 위치를 지정하지 않으면 static과 동일하다.
#position fixed
#position absolute
이것 또한 위치지정 없을시 relative와 동일하다.
조상을 기준으로 절대적 위치 지정이 가능하다.(position : static을 제외하고 모두 조상이 되는 것이 가능하다.)
z-index : 숫자 ; ==> 0~n까지 작을 수록 화면에 가깝다. 우선순위 부여
- 숫자가 높을 수록 위에 위치한다. 0이 화면 n이 우리 눈과 같다.
- 팝업을 만들때 자주 사용된다.
opacity : 투명도 0.0 ~1.0 (투명 ~ 불투명)
cursor : 마우스 커서 이미지 변경.(pointer를 사용하기 )
F12 : 개발자 도구
border - collapse : 테이블 테두리 설정.
스타일을 준 테이블을 독립된 객채로 인식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border-collapse: collapse; /* 자유변형 가능한 테이블로 변경해준다. 먼저 선언하는게 좋다. */
}
thead tr {
background-color: red;
height: 40px;
border-top: 1px solid #444444;
border-bottom: 1px solid #444444;
}
tbody tr{
border-bottom: 1px solid #444444;
cursor: pointer;
}
td:nth-child(even){
border-left : 1px solid #666666;
}
tbody tr:nth-child(even) {
background-color: #ffaaaa;
}
tbody tr:hover {/* 커서를 올리면 색상이 바뀌는 것 */
background-color: #aeaeae;
}
/*
숫자 : 해당 번째 대상
숫자 n : 숫자 배수
숫자 n +숫자2 : 숫자배수 +숫자2
odd : 홀수
even : 짝수
*/
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>헤더1</th>
<th>헤더2</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
</tbody>
</table>
</body>
</html>