My Notes

표(Table) 스타일

• border-collapse 속성 : 표 테두리

• vertical-align 속성 : 세로 정렬

table {
	border: 1px solid orange;
	width: 500px;
	margin: 0 auto;
	border-collapse: collapse;	/* 표 테두리 한 줄 */
}
th {
	border: 1px solid orange;
	background-color: #FFCC66;
	color: white;
	padding: 5px;
}
td {
	border: 1px solid orange;
	height: 100px;
	text-align: center;		/* 가로 정렬 : 중앙 */
	vertical-align: top;		/* 세로 정렬 : 위 */
}
tr.bg td {
	color: #000;
	background-color:#EAF2D3;
	vertical-align: bottom;
}
caption {
	color: #FF6600;
	font-size: 11pt;
	font-weight: bold;
	margin-bottom: 5px;
}

변형(Transform) 스타일

• transform 속성 : 요소의 다양한 변형을 정의

• rotate(각도) : 회전
  ⭐ 각도는 degree 또는 radian 단위를 사용

.myphoto {
	position: absolute;
	left: 50px;
	top: 70px;
	transform: rotate(15deg);
}

• scale(sx, sy) : 확대, sy값을 생략하면 sx값과 같다고 간주
  • scaleX(sx) : 가로로 sx만큼 확대 = scale(sx,1)
  • scaleY(sy) : 세로로 sy만큼 확대 = scale(1,sy)

.myphoto {
	position: absolute;
	left: 150px;
	top: 120px;
	transform: scale(1.5,1.5);
}

• skew(x각도, y각도) : 왜곡, y각도값을 생략하면 y축에 대한 각도를 0으로 간주
  • skewX(각도) : x축을 따라 주어진 각도만큼 왜곡
  • skewY(각도) : y축을 따라 주어진 각도만큼 왜곡

.myphoto {
	position: absolute;
	left: 50px;
	top: 70px;
	transform: skew(10deg, 10deg);
}

• translate(tx, ty) : 이동, ty값이 주어지지 않으면 0으로 간주
  • translateX(tx) : tx값만큼 x축 방향으로 이동
  • translateY(ty) : ty값만큼 y축 방향으로 이동

.myphoto{
	transform: translate(200px,100px);
 }

미디어 쿼리(Media Query)

• 반응형 웹 : 디스플레이의 종류와 크기에 따라 다르게 표현하는 웹 페이지

• 미디어 쿼리 : 디바이스의 종류와 넓이에 따라 다른 스타일을 적용
  ⭐ 형식 : @media 종류 and (조건)

/* 767px 이하 */
@media screen and (max-width:767px) {
	h1 {color: red;}
	ul {list-style: none;}
}
/* 768px ~ 991px */
@media screen and (min-width:768px) and (max-width:991px) {
	h1 {color: blue;}
	ul {list-style: none;}
	ul li {display: inline; background-color: skyblue;}
}
/* 992px 이상 */
@media screen and (min-width:992px) {
	h1 {color: green;}
	ul {list-style: none;}
	ul li {background-color: green; color: white; display: inline;}
}