천재교육 풀스택 과정 1기 Day4
border : 테두리 (표 테두리)
border-collapse: collapse; : /*중복된 테두리 합치기*/
padding: 여백
text-align: 정렬
tr:nth-child(even) /* 짝수 <tr>에 적용된다.*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 응용</title>
</head>
<link rel="stylesheet" href="./css/css_sample.css">
<body>
<h3>1학기 성적</h3>
<hr>
<table>
<thead>
<tr>
<th>이름</th>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tfoot>
<tr>
<th>합</th>
<th>310</th>
<th>249</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>황기태</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>이재문</td>
<td>95</td>
<td>99</td>
</tr>
<tr>
<td>이병은</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>김남윤</td>
<td>50</td>
<td>40</td>
</tr>
</tbody>
</table>
</body>
</html>
@charset "UTF-8";
table {
border-collapse: collapse;
}
td, th {
text-align: left;
padding: 5px;
height: 15px;
width: 100px;
}
thead, tfoot{
background-color: darkgray;
color: yellow;
}
tbody tr:nth-child(even){
background-color: aliceblue;
}
tbody tr:hover {
background-color: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 스타일 추가</title>
</head>
<link rel="stylesheet" href="./css/css_sample2.css">
<body>
<h3>CONTACT US</h3>
<hr>
<form>
<label>
<span>Name:</span><input type="text" placeholder="Elvis"><br>
</label>
<label>
<span>Email:</span><input type="text" placeholder="elvis@graceland.com"><br>
</label>
<label>
<span>Comment:</span><input type="text" placeholder="메세지를 남겨주세요."><br>
</label>
<label>
<input type="submit" value="submit">
</label>
</form>
</body>
</html>@charset "UTF-8";
input[type=text] {
color: red;
}
input:hover, textarea:hover {
background: skyblue;
}
input[type=text]:focus, input[type=email]:focus {
font-size: 120%;
}
label {
display: block;
padding: 10px;
}
label span {
display: inline-block;
width: 90px;
text-align: right;
padding: 10px;
}
colspan: 표 가로셀 합치기
rowspan: 표 세로셀 합치기
css3 스타일로 태그에 동적 변화 만들기
animation - 애니메이션
transition - 전환
transform - 변환
@charset "UTF-8";
@keyframes bomb {
from {
font-size: 500%;
}
to {
font-size: 100%;
}
}
h3 {
animation-name: bomb;
animation-duration: 3s;
animation-iteration-count: infinite;
}1. @keyframes (animation-name)에 애니메이션 적용 css를 작성한다.
2. 애니메이션 스타일 시트를 작성한다.
ㄴ animation-name, animation-duration(애니메이션 작동 시간), animation-iteration-count(애니메이션 반복 횟수)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 응용</title>
</head>
<link rel="stylesheet" href="./css/css_sample5.css">
<body>
<h3>다양한 Transform</h3>
<br>
<p>아래는 회전(rotate), 기울임(skew), 이동(translate), 확대/축소(scale)가 적용된 사례이다. 또한 마우스를 올리면 추가적 변환이 일어난다.</p>
<hr>
<div id="rotate"> rotate 20 deg</div>
<div id="skew"> skew(0,-20)deg</div>
<div id="translate"> translateY(100px)</div>
<div id="scale"> scale(3,1)</div>
</body>
</html>@charset "UTF-8";
div {
display: inline-block;
background-color: olivedrab;
color: white;
padding: 5px
}
#rotate {
transform: rotate(20deg);
}
#skew{
transform: skew(0deg, -20deg);
}
#translate {
transform: translateY(100px);
}
#scale {
transform: scale(3,1);
}
#rotate:hover {
transform: rotate(80deg);
}
#skew:hover{
transform: skew(0deg, -60deg);
}
#translate:hover {
transform: translate(50px, 100px);
}
#scale:hover {
transform: scale(4,2);
}
1. 데이터: 자료(data), 1,2,3,..., A, B, C,..., 한글, 영문 소문자나 대문자로 존재
2. 변수: a = 100; 정수형 데이터 100을 변수 a에 저장합니다.
3. 메모리: 주소값 = pointer (C언어) = address value -> RAM, ROM
4. 데이터혀이 정수형 (4byte), 실수형(8byte), 문자(lcharecter), 문자열(String)...
- bit: 0 or 1
- byte: lcharacter = 한 개의 문자
- word: 문자열 => 홍길동 -> '의미' 있는 문자이거나 문자열
- field: 6개의 항목, 국어, 영어, 수학, 총점, 평균, 석차,...
-record: 성적 처리(국어, 영어,..., 평균, 석차, n(17) 개의 래코드 존재
- file: 성적 처리 파일
- db(데이터베이스): mongodb, mariadb, redis, mysql,...
5. 연산자: 산술연산자, 관계연산자, 논리연산자
- 산술연산자: +, -, *, /
- 관계연산자(비교연산자): ==, <, >, <=, >=, !=
- 논리연산자: &&, ||, !
6. 함수(function): 자주 반복되는 기능(동작, 행)을 구현하는 것.
Decimal
2진수 (진법, 컴퓨터) : 00000000 00000001 00000010 00000011...
10진수 (사람): 0 1 2 3 4 5 6 7 8 9 10...20...30...
16진수 (컴퓨터가 사람에게 표시해 주기 위해 사용됨): 0000~9, A(10), B, C, D, E, F(15),..., FFFF
ex) 56(10)를 2, 8, 16진수로 변환해 보자.
1. 2진수로 변환: (0 == false -> 연산에 참여하지 않음, 1 == true -> 연산에 참여)
| 128 | 64 | 32 | 16 | 8 | 4 | 2 | 1 |
| 0 | 0 | 1 | 1 | 1 | 0 | 0 | 0 |
=32+16+8 = 56
2. 16(2^4 개념으로 4자리씩 묶음) 진수로 변환:
| 0011 | 1000 |
| 3 | 8 |
=> 0011 == 1+ 2 = 3
=> 1000 == 8
=> 38(16)
3. 8(2^3 개념으로 3자리씩 묶음) 진수로 변환:
| 000 | 111 | 000 |
| 0 | 7 | 0 |
=>070(8)
※사람의 계산 원리이고 컴퓨터는 이런 방법으로 계산하지 않는다.