[CSS] 테이블 관련 스타일 속성 / 박스모델 변형 관련 스타일 속성

테이블 관련 스타일 속성

테이블에 있는 외곽선이 중첩될 경우, 병합시키기 위해서 border-collapse 속성을 사용한다.

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
	<h1>테이블 관련 스타일 속성</h1>
	<hr>
	<table>
		<tr>
			<!-- 셀(Cell)의 폭은 태그내용에 의해 자동으로 설정된다. -->
			<th>번호</th><th>이름</th><th>주소</th>
		</tr>
		<tr>
			<td class="num">1000</td><td class="name">홍길동</td><td class="address">서울시 강남구 역삼동 79-11 역삼타워</td>
		</tr>
		<tr>
			<td class="num">2000</td><td class="name">임꺽정</td><td class="address">부산시 사하구</td>
		</tr>
		<tr>
			<td class="num">3000</td><td class="name">전우치</td><td class="address">광주시 광산구</td>
		</tr>
		<tr>
			<td class="num">4000</td><td class="name">일지매</td><td class="address">수원시 팔달구</td>
		</tr>
		<tr>
			<td class="num">5000</td><td class="name">장길산</td><td class="address">인천시 월미구</td>
		</tr>
	</table>
</body>
</html>

css

<style type="text/css">
table {
	border: 1px solid black; /* 테이블에 외곽선 생성 -> border는 자식에게 상속되지 X */
}

th,td { /* 외곽선은 tr에는 그려지지 않음. 셀을 표현하는 th,td에 외곽선을 그려야 함 */
	border: 1px solid black; 
}
</style>

이처럼 테이블에 있는 외곽선이 중첩될 경우, 외곽선을 병합시키기 위해 border-collapse 속성을 사용한다.

border-collapse

: 박스모델의 외곽선 중첩 관련 스타일 속성
→ 속성값 : seperate(중첩된 외곽선 구분 - 기본값), collapse(중첩된 외곽선 병합)

<style type="text/css">
table {
	border: 1px solid black; 
	border-collapse: collapse;
}

th,td { 
	border: 1px solid black; 
}
</style>

셀(Cell)의 폭은 태그내용에 의해 자동으로 설정되는데, 이처럼 태그내용에 따라 셀의 폭이 변동되면 출력할 때 문제가 생길 수 있다.
이때 width 속성을 이용해 모든 셀의 폭을 일정하게 만들어 주는 것이 가능하다.

th, td {
	border: 1px solid black;
	width: 200px;
}

셀(Cell)마다 폭을 다르게 설정하는 것이 가장 보편적이다.

<style type="text/css">
table {
	border: 1px solid black; 
	border-collapse: collapse;
}

th, td {
	border: 1px solid black;
	height: 30px;
}

td { text-align: center; }

/* 셀(Cell)마다 폭을 다르게 설정 */
.num { width: 100px; } 
.name { width: 150px; } 
.address { 
	width: 250px; 
	text-align: left;
	padding-left: 5px; 
}  
</style>

박스모델 변형 관련 스타일 속성

transform

: 박스모델 변형 관련 스타일 속성
→ 속성값으로 변형 관련 함수를 사용한다 : translate(),scale(),rotate(),skew()

html 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="translate" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translatex" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translatey" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translatez" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="translate3d" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

css

<style type="text/css">
#original {
	margin: 20px;
} 

img {
	border: 1px solid black;
}

.image {
	float: left;
	margin: 20px;
	background: rgba(0,0,255,0.3);
}
</style>

translate() 함수

translate(x,y) : 박스모델을 가로(X)와 세로 방향(Y)으로 이동시키는 함수 - 단위 : px
translate(x) : 박스모델을 가로방향(X)으로 이동시키는 함수 - 단위 : px
translate(y) : 박스모델을 세로방향(Y)으로 이동시키는 함수 - 단위 : px
translate(z) : 박스모델을 원근방향(Z)으로 이동시키는 함수 - 단위 : px
translate(x,y,z) : 박스모델을 입체적으로 이동시키는 함수 - 단위 : px

perspective: Z 영역 관련 스타일 속성
   → 속성값 : Z 영역에 대한 깊이를 px 단위로 설정
  transform-style: 박스모형 변형에 대한 차원 관련 스타일 속성
   → 속성값 : flat(2차원 - 기본값), preserve-3d(3차원)

css 코드

<style type="text/css">
#original {
	margin: 20px;
} 

img {
	border: 1px solid black;
}

.image {
	float: left;
	margin: 20px;
	background: rgba(0,0,255,0.3);
	
	/* perspective :  Z 영역에 대한 관련 스타일 속성 */
	perspective: 200px; 
	transform-style: preserve-3d;
}

/*박스모델을 가로(X)와 세로 방향(Y)으로 이동*/  
#translate img {
	transform: translate(20px, 20px); 
}

/* 박스모델을 가로(X) 방향으로 이동 */
#translatex img {
	transform: translatex(20px);  
}

/* 박스모델을 세로(Y) 방향으로 이동 */
#translatey img {
	transform: translatey(-20px);   
}  

/* 박스모델을 원근 방향(Z)으로 이동 */
#translatez img {
	transform: translatez(-20px);   
} 

/* 박스모델을 입체적으로 이동  */
#translate3d img {
	transform: translate3d(-20px, -20px, -20px);    
} 

</style>

scale함수

scale(x, y) : 박스모델의 가로(X)와 세로방향(Y)으로 확대 또는 축소하는 함수 - 단위 : 배율
scale(x) : 박스모델의 가로방향(X)으로 확대 또는 축소하는 함수 - 단위 : 배율
scale(y) : 박스모델의 세로방향(Y)으로 확대 또는 축소하는 함수 - 단위 : 배율
scale(z) : 박스모델의 원근방향(Z)으로 확대 또는 축소하는 함수 - 단위 : 배율
scale(x, y, z) : 박스모델을 입체적으로 확대 또는 축소하는 함수 - 단위 : 배율

전체 소스코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#original {
	margin: 20px;
} 

img {
	border: 1px solid black;
}

.image {
	float: left;
	margin: 20px;
	background: rgba(0,0,255,0.3);
	perspective: 200px; 
	transform-style: preserve-3d;
}

/* 박스모델의 가로(X)와 세로방향(Y)으로 확대 또는 축소 */
#scale img {
	transform: scale(1.2, 1.2);  
}

/* 박스모델의 가로방향(X)으로  확대 또는 축소 */
#scalex img {
	transform: scalex(0.8);  
}

/* 박스모델의 세로방향(Y)으로  확대 또는 축소 */
#scaley img {
	transform: scaley(1.2);  
}

/* 박스모델의 원근방향(Z)으로  확대 또는 축소 */
#scalez img {
	transform: scalez(0.8);  
}

/* 박스모델을 입체적으로 확대 또는 축소 */
#scale3d img {
	transform: scale3d(1.2, 1.2, .8);   
}
</style>

</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="scale" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scalex" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scaley" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scalez" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="scale3d" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

rotate함수

rotate(각도) : 박스모델을 가로와 세로 방향으로 회전하는 함수 - 단위: deg
rotatex(각도) : 박스모델을 가로방향으로 회전하는 함수 - 단위 : deg
rotatey(각도) : 박스모델을 세로방향으로 회전하는 함수 - 단위 : deg
rotatez(각도) : 박스모델을 원근방향으로 회전하는 함수 - 단위 : deg
rotate3d(x, y, z, 각도) : 박스모델을 입체적으로 회전하는 함수 - 단위 : deg

전체 소스코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#original {
	margin: 20px;
} 

img {
	border: 1px solid black;
}

.image {
	float: left;
	margin: 20px;
	background: rgba(0,0,255,0.3);
	perspective: 200px; 
	transform-style: preserve-3d;
}

/* 박스모델을 가로와 세로 방향으로 회전 */
#rotate img {
	transform: rotate(45deg);
}

/* 박스모델을 가로방향으로 회전 */
#rotatex img {
	transform: rotatex(45deg);
}

/* 박스모델을 세로방향으로 회전 */
#rotatey img {
	transform: rotatey(45deg);
}

/* 박스모델을 원근방향으로 회전 */
#rotatez img {
	transform: rotatez(45deg);
}

/* 박스모델을 입체적으로 회전 */
#rotate3d img {
	transform: rotate3d(-1, 1, 2, 45deg);
}
</style>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="rotate" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotatex" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotatey" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotatez" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="rotate3d" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

skew 함수

skew(x, y) : 박스모델을 가로와 세로방향으로 비트는 함수 - 단위 : deg
skewx(x) : 박스모델을 가로방향으로 비트는 함수 - 단위 : deg
skewy(y) : 박스모델을 세로방향으로 비트는 함수 - 단위 : deg

전체 소스코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#original {
	margin: 20px;
} 

img {
	border: 1px solid black;
}

.image {
	float: left;
	margin: 20px;
	background: rgba(0,0,255,0.3);
}

/* 박스모델을 가로와 세로방향으로 비트는 함수 */
#skew img {
	transform: skew(30deg, 30deg);
}

/* 박스모델을 가로방향으로 비트는 함수 */
#skewx img {
	transform: skewx(30deg);
}

/* 박스모델을 세로방향으로 비트는 함수 */
#skewy img {
	transform: skewy(30deg);
}

</style>
</head>
<body>
	<h1>박스모델 변형 관련 스타일 속성</h1>
	<hr>
	<div id="original">
		<h3>원본이미지</h3>
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<hr>
	<div id="skew" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="skewx" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
	<div id="skewy" class="image">
		<img alt="펜션 이미지" src="images/1.jpg">
	</div>
</body>
</html>

저작자표시

'학원 > 복기' 카테고리의 다른 글

[CSS] 애니메이션 관련 스타일 속성 / 반응형 웹디자인 (0)	2023.06.01
[CSS] 트렌지션 효과(Transition Effect) (0)	2023.06.01
[CSS] 박스모델(BoxModel) 관련 속성 (0)	2023.05.30
[CSS] 배경 관련 스타일 속성 (0)	2023.05.30
[CSS] 글자, 공백, 문장 관련 스타일 속성 (0)	2023.05.30

개뿌

[CSS] 테이블 관련 스타일 속성 / 박스모델 변형 관련 스타일 속성

테이블 관련 스타일 속성

border-collapse

박스모델 변형 관련 스타일 속성

transform

translate() 함수

scale함수

rotate함수

skew 함수

'학원 > 복기' 카테고리의 다른 글

티스토리툴바

[CSS] 테이블 관련 스타일 속성 / 박스모델 변형 관련 스타일 속성

테이블 관련 스타일 속성

border-collapse

박스모델 변형 관련 스타일 속성

transform

translate() 함수

scale함수

rotate함수

skew 함수

'학원 > 복기' 카테고리의 다른 글

'학원/복기' Related Articles

티스토리툴바