columns 속성

- 요소의 다단 레이아웃 열수 및 열 너비를 설정

 

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box1 {
	columns: 3; /* 단 */
	margin: 30px;
}

.box2 {
	columns: 200px; /* 단의 최소 크기 */
	margin: 30px;
}

.box3 {
	columns: 200px 5; /* 단의 최소 크기 및 단의 최대 개수 */
	margin: 30px;
}

</style>


</head>
<body>

<h3>columns : 다단</h3>

<h3>3단</h3>
<div class="box1">
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>
<hr>

<h3>단의 최소 크기 지정</h3>
<div class="box2">
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>
<hr>

<h3>단의 최소 크기 및 최대 단수 지정</h3>
<div class="box3">
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>
<hr>

</body>
</html>

 

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0923_CSS : display:flex를 사용하지 않고 메뉴 상단 고정  (0) 2021.09.23
0923_CSS : flex 속성  (0) 2021.09.23
0923_CSS : clip  (0) 2021.09.23
0923_CSS : Z-index  (0) 2021.09.23
0923_CSS : 포지셔닝 position  (0) 2021.09.23

Clip 속성

- 요소의 어느 부분이 보이는지를 정의한다.

- position: absolute 또는 position: fixed 요소에만 적용된다.

 

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 300px; height: 200px; padding: 10px; margin: 30px;
	border: 2px dotted gray;
}

.img {
	position: absolute;
	top: 80px; left: 420px;
	clip: rect(20px, 220px, 220px, 20px); /* top, right, bottom, left */
}
</style>
</head>
<body>

<div class="box"><img src="../img/img2.png" width= "300" height="200"></div>
<div class="box"><img src="../img/img2.png" class="img"></div>



</body>
</html>
저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0923_CSS : flex 속성  (0) 2021.09.23
0923_CSS : columns 다단  (0) 2021.09.23
0923_CSS : Z-index  (0) 2021.09.23
0923_CSS : 포지셔닝 position  (0) 2021.09.23
0916~0917_CSS : Cascading Style Sheets(CSS)  (0) 2021.09.22

Z-index 속성

- position 속성이 설정된 요소 중 static이 아닌 요소와 그 자손 요소의 Z축 순서를 지정한다. 즉, Z축 순서를 지정하기 위해서는 position 속성을 설정 한 후 Z-index 속성을 지정해야한다.

- 더  Z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.

- Z-index를 명시하지 않으면 문서에 가장 먼저 삽입된 요소가 Z-index:1 값을 가지며, 그 후 요소는 점점 커진다.

 

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	border: 3px dotted gray;
}

.absolute-box {
	width: 100px;
	height: 100px;
	position: absolute;
}

.yellow {
	background: yellow;
	z-index: 1000;
}

.orange {
	background: orange;
	left: 100px;
	top: 100px;
	z-index: 100;
}

.green {
	background: green;
	left: 150px;
	top: 150px;
	z-index: 500;
}

.blue {
	background: blue;
	left: 180px;
	top: 100px;
	z-index: 10;
}


</style>


</head>
<body>

<h3> z-index : position 속성이 static이 아닌 요소와 그 자손의 z축 순서 지정</h3>

<div class="box yellow">static:z-index 적용안됨</div>
<div class="absolute-box orange"></div>
<div class="absolute-box green"></div>
<div class="absolute-box blue"></div>


</body>
</html>

 

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0923_CSS : columns 다단  (0) 2021.09.23
0923_CSS : clip  (0) 2021.09.23
0923_CSS : 포지셔닝 position  (0) 2021.09.23
0916~0917_CSS : Cascading Style Sheets(CSS)  (0) 2021.09.22
0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제  (0) 2021.09.15

CSS 포지셔닝?

- CSS를 이용해서 HTML 엘리먼트 들의 위치를 제어하는 방법을 의미한다.

 

position: static

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px; height: 150px; margin: 30px;
	border: 3px dotted gray;
	background: orange;
}

.default-box {
	background: #333; color: #eee; font-weight: bold; 
	text-align: center; line-height: 150px;
}

.static-box {
	position: static;
	background: #333; color: #eee; font-weight: bold; 
	text-align: center; line-height: 150px;
}

</style>


</head>
<body>

<h3>position:static - 기본, 일반적인 문서 흐름에 따라 배치 </h3>

<div class="box"> <div class="default-box">default</div></div>
<div class="box"> <div class="static-box">static</div></div>
<div class="box" style="padding: 10px;"> <div class="default-box">default</div></div>


</body>
</html>

 

position:relative

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px; height: 150px; margin: 30px;
	border: 3px dotted gray;
	background: orange;
}

.default-box {
	background: #333; color: #eee; font-weight: bold; 
	text-align: center; line-height: 150px;
}

.relative-box {
	position: relative;
	left: 5px;
	top: 5px;
	background: green; color: #eee; font-weight: bold; 
	text-align: center; line-height: 150px;
}

</style>


</head>
<body>

<h3>porision:relative - 일반적인 문서 흐름에 따라 배치하며, 위치를 지정할 수 있다.  </h3>

<div class="box"> <div class="relative-box">relative</div></div>
<div class="box"> <div class="default-box">default</div></div>


</body>
</html>

position 오타 ㅎㅎ...

 

position:absolute

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px; height: 150px; margin: 30px;
	border: 3px dotted gray;
	background: orange;
}

.default-box {
	background: #333; color: #eee; font-weight: bold; 
	text-align: center; line-height: 150px;
}

.absolute-box {
	position: absolute;
	width: 150px;
	height: 150px;
	left: 50px;
	top: 50px;
	background: green; color: #eee; font-weight: bold; 
	text-align: center; line-height: 150px;
}

</style>


</head>
<body>

<h3>position:absolute - 일반적인 문서 흐름에 따르지 않으며, 페이지 레이아웃 공간도 배정하지 않음.  </h3>

<div class="box"> <div class="absolute-box">parent:div</div></div>
<div class="absolute-box">parent:body</div>


</body>
</html>

 

position:fixed

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 100%; height: 2500px;
	background: yellow;
}

.fixed-box {
	position: fixed;
	width: 150px;
	height: 150px;
	left: 100px;
	top: 100px;
	background: green; color: #eee; font-weight: bold; 
	text-align: center; line-height: 150px;
}

</style>


</head>
<body>

<h3>position:fixed - 일반적인 문서 흐름에 따르지 않으며, 페이지 레이아웃 공간도 배정하지 않음.  </h3>

<div class="box">
 요소가 문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간을 배정하지 않는다.<br>
 부모 요소와 관계없이 viewport를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동 시킨다.<br>
 스크롤이 되더라도 화면에 사라 지지않고 항상 같은 곳에 위치한다.
</div>

<div class="fixed-box">fixed-box</div>


</body>
</html>

 

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0923_CSS : clip  (0) 2021.09.23
0923_CSS : Z-index  (0) 2021.09.23
0916~0917_CSS : Cascading Style Sheets(CSS)  (0) 2021.09.22
0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제  (0) 2021.09.15
0914_HTML : table 태그 사용 이력서 만들기 숙제  (2) 2021.09.14

위의 폼과 같게 만드시오.

1. table 태그를 사용하여 만들 것 >>

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 테이블 태그를 사용해서 회원가입 폼 만들기*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	font-weight: 500;
}

button {
	color: #333;
	border: 1px solid #333;
	background-color: #fff;
	padding: 2px 10px;
	border-radius: 4px;
	font-weight: 500;
	vertical-align: middle;
}

button:hover, button:active, button:focus {
	background-color: #e6e6e6;
	border-color: #adadad;
	color: #333;
}

.memberForm {
	width: 600px;
	min-height: 450px;
	margin: 30px auto;
}

.title {
	padding: 30px 0 15px;
	text-align: left;
}

.form {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.form th, .form td {
	padding: 10px 10px;
}

.form tr {
	border-bottom: 1px solid #ccc;
}

.form tr:first-child {
	border-top: 2px solid #4641D9;
}

.form tr:last-child {
	border-bottom: 2px solid #4641D9;
}

.contents {
	padding: 10px;
	width: 120px;
	height: 25px;
	background-color: #e6e6e6;
}

.footer {
	text-align: center;
	padding: 5px 2px;
	margin: 0px auto;
}


</style>
</head>
<body>

	<form>
		<div class="memberForm">
			<h3 class="title">| 회원 가입</h3>
			<table class="form">
				<tr>
					<td class="contents">아 이 디</td>
					<td><input type="text" name="userId"></td>
				</tr>
				<tr>
					<td class="contents">패스워드</td>
					<td><input type="password" name="userPwd"></td>
				</tr>
				<tr>
					<td class="contents">패스워드 확인</td>
					<td><input type="password" name="userPwd1"></td>
				</tr>
				<tr>
					<td class="contents">이　　름</td>
					<td><input type="text" name="userName"></td>
				</tr>
				<tr>
					<td class="contents">생년월일</td>
					<td><input type="date" name="birth"></td>
				</tr>
				<tr>
					<td class="contents">이 메 일</td>
					<td><select name="selectEmail">
							<option value="">선 택</option>
							<option value="gmail">gamil.com</option>
							<option value="naver">naver.com</option>
							<option value="daum">daum.net</option>
							<option value="기타">기타</option>
					</select> <input type="text" name="email1" style="width: 100px">
						@ <input type="text" name="email2" style="width: 100px"></td>
				</tr>
				<tr>
					<td class="contents">전화번호</td>
					<td><select name="tel1">
							<option value="">선 택</option>
							<option value="010">010</option>
							<option value="011">011</option>
							<option value="018">018</option>
							<option value="070">070</option>
					</select> <input type="text" name="tel2"  style="width: 70px"> - <input type="text"
						name="tel3"  style="width: 70px"></td>
				</tr>
				<tr>
					<td class="contents">우편번호</td>
					<td><input type="number" name="zip"> <button type="button">우편번호검색</button></td>
				</tr>
				<tr style="border-bottom: 0px;">
					<td class="contents" >주　　소</td>
					<td><input type="text" name="addr1" style="width: 350px; padding: 2px;"></td>
				</tr>
				<tr>
					<td class="contents"></td>
					<td colspan="2"><input type="text" name="addr2" style="width: 350px; padding: 2px;"></td>
				</tr>
				<tr>
					<td class="contents">직　　업</td>
					<td><input type="text" name="job"></td>
				</tr>
			</table>
			<div class="footer">
			<p>
				<button type="submit" name="sendBtn">회원가입</button>
				<button type="reset">다시입력</button>
				<button type="button">가입취소</button>
			</p>
			</div>
		</div>
	</form>

</body>
</html>

 

2. ul, li 태그를 사용하여 만들 것 >>

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* ul, li태그를 사용해서 회원가입 폼 만들기*/

* {
	padding: 0; margin: 0;
	box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	font-weight: 500;
}

button {
	color: #333;
	border: 1px solid #333;
	background-color: #fff;
	padding: 2px 10px;
	border-radius: 4px;
	font-weight: 500;
	vertical-align: middle;
}

button:hover, button:active, button:focus {
	background-color: #e6e6e6;
	border-color: #adadad;
	color: #333;
}

.memberForm {
	width: 600px;
	min-height: 450px;
	margin: 30px auto;
}

.title {
	width: 100%;
	padding: 30px 0 15px;
	text-align: left;
}

.form ul {
	list-style: none;
	clear: both;
	height: 35px;
}

.form li {
	float: left;
	height: 45px;
	line-height: 45px;
	text-align: left;
	padding: 0 10px;
}

.form ul:first-child li {
	border-top:2px solid #4641D9;
}

.form ul:last-child li {
	border-top:1px solid #ccc; 
	border-bottom:2px solid #4641D9;
	
}

.form ul li {
	border-bottom:1px solid #ccc; 
}

.form .content {width: 120px; background-color: #e6e6e6;}
.form .contents {width: 480px; }

.footer {
	text-align: center;
	margin: 0px auto;
}

.footer .footer-paging {
	padding: 15px;
}


</style>
</head>
<body>

<div class="memberForm">
	<div>
		<h3 class="title">| 회원 가입</h3>
	</div>
	<div class="form">
		<ul>
			<li class="content">아 이 디</li>
			<li class="contents"><input type="text" name="userId"></li>
		</ul>
		<ul>
			<li class="content">패스워드</li>
			<li class="contents"><input type="password" name="userPwd"></li>
		</ul>
		<ul>
			<li class="content">패스워드 확인</li>
			<li class="contents"><input type="password" name="userPwd1"></li>
		</ul>
		<ul>
			<li class="content">이　　름</li>
			<li class="contents"><input type="text" name="userName"></li>
		</ul>
		<ul>
			<li class="content">생년월일</li>
			<li class="contents"><input type="date" name="birth"></li>
		</ul>
		<ul>
			<li class="content">이 메 일</li>
			<li class="contents"><select name="selectEmail">
							<option value="">선 택</option>
							<option value="gmail">gamil.com</option>
							<option value="naver">naver.com</option>
							<option value="daum">daum.net</option>
							<option value="기타">기타</option>
					</select> <input type="text" name="email1" style="width: 100px">
						@ <input type="text" name="email2" style="width: 100px"></li>
		</ul>
		<ul>
			<li class="content">전화번호</li>
			<li class="contents"><select name="tel1">
							<option value="">선 택</option>
							<option value="010">010</option>
							<option value="011">011</option>
							<option value="018">018</option>
							<option value="070">070</option>
					</select> <input type="text" name="tel2" style="width: 70px"> - <input type="text"
						name="tel3"  style="width: 70px"></li>
		</ul>
		<ul>
			<li class="content">우편번호</li>
			<li class="contents"><input type="number" name="zip"> <button type="button">우편번호검색</button></li>
		</ul>
		<ul>
			<li class="content" style="border-bottom: 0;">주　　소</li>
			<li class="contents" style="border-bottom: 0;"><input type="text" name="addr1" style="width: 350px; padding: 2px;"></li>
		</ul>
		<ul>
			<li class="content"></li>
			<li class="contents"><input type="text" name="addr2" style="width: 350px; padding: 2px;"></li>
		</ul>
		<ul>
			<li class="content">직　　업</li>
			<li class="contents"><input type="text" name="job"></li>
		</ul>
	</div>
	<div class="footer">
		<div class="footer-paging">
			<p>
				<button type="submit" name="sendBtn">회원가입</button>
				<button type="reset">다시입력</button>
				<button type="button">가입취소</button>
			</p>
		</div>
	</div>
</div>


</body>
</html>

 

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0923_CSS : 포지셔닝 position  (0) 2021.09.23
0916~0917_CSS : Cascading Style Sheets(CSS)  (0) 2021.09.22
0914_HTML : table 태그 사용 이력서 만들기 숙제  (2) 2021.09.14
0913_HTML : 레이아웃 관련 태그(2) div 태그  (0) 2021.09.14
0913_HTML : 레이아웃 관련 태그 (1)  (1) 2021.09.14

인터넷에 존재하는 이력서 폼을 똑같이 HTML로 만들기

 

나는 아래 이력서 양식과 똑같이 만드려고 한다.

http://www.sampledocu.com/resume/408

 

워드 상세 이력서 양식 (호적관계포함) - DOC

서식 확장자 안내 DOC : MS오피스 워드문서 프로그램 또는 MS워드뷰어 / 네이버 구글 오피스 문서 편집기 서식 이용안내 기본인적사항과 학력사항,경력사항,가족관계,자격증을 입력할수 있는 워드

sampledocu.com

 

숙제 제출 코드 >>

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	margin: 0; padding: 0;
}

body {
	font-size: 12px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

.resume {
	margin: 20px auto;
	width: 600px;
}

.title {
	padding: 10px;
	text-align: center;
	padding-bottom: 0;
}

.table {
	margin: 0px auto;
}

.info .td, .info .tr {
	text-align: center;
}

.contents {
	text-align: left;
	padding: 10px 0px;
}

.name, .gender, .age {
	width: 80px;
	text-align: center;
	background: #ccc;
}
</style>

</head>
<body>

<div class="resume" >
	<h2 class="title">이&nbsp;&nbsp;력&nbsp;&nbsp;서</h2>
	<table style="width: 200px; border-top: 2px solid #000; margin: 5px auto;">
		<tr >
			<td></td>
		</tr>
	</table>
	
	<table class="info" style="width: 115px; height: 140px; border: 2px solid #000; float: left;">
		<caption class="contents"><b>1.기본정보</b></caption>
			<tr>
				<td align="center">&lt;사진&gt;</td>
			<tr>
	</table>
	<table border="2" style="border-collapse: collapse; height: 170px; width: 480px; float: right;">
	<caption class="contents">　</caption>
		<tr>
			<td class="name">성 명</td>
			<td></td>
			<td class="gender">성 별</td>
			<td style="width: 50px;"></td>
			<td class="age">나 이</td>
			<td style="width: 50px;"></td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">주민등록번호</td>
			<td colspan="5"></td>
		</tr>
		<tr>
			<td style=" height:40px; width: 80px; text-align: center; background: #ccc;">주소</td>
			<td colspan="5" valign="bottom">(우편번호:　　　　　)</td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">전화번호</td>
			<td></td>
			<td style="	width: 80px; text-align: center; background: #ccc;">휴대폰</td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">홈페이지주소</td>
			<td colspan="5"></td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">이메일</td>
			<td colspan="5"></td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">호주성명</td>
			<td></td>
			<td style="	width: 80px; text-align: center; background: #ccc;">호주와의 관계</td>
			<td colspan="4"></td>
		</tr>
	</table>
	
	<table border="2" style="margin-top: 5px; border-collapse:collapse; float: right; width: 120px;">
		<tr>
			<td style=" height: 21px; text-align: center; background: #ccc;">호적관계</td>
		</tr>
	</table>

	<table border="2" style="width: 600px; height: 100px; clear: both; border-collapse: collapse;">
	<caption class="contents"><b>2.학력사항</b></caption>
		<tr>
			<td style="text-align: center; background: #ccc;">년/월/일</td>
			<td style="width: 350px; text-align: center; background: #ccc;">학 교 명</td>
			<td style="text-align: center; background: #ccc;">전공과목 및 학과</td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>	
	</table>
	<table border="2" style="width: 600px; height: 80px; clear: both; border-collapse: collapse;">
	<caption class="contents"><b>3.경력사항</b></caption>
		<tr>
			<td style="width: 125px;text-align: center; background: #ccc;">회사명</td>
			<td style="width: 350px;text-align: center; background: #ccc;">직위 및 업무내용</td>
			<td style="text-align: center; background: #ccc;">업무기간</td>
		</tr>
		<tr> 
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
	</table>
		<table border="2" style="width: 600px; height: 130px;clear: both; border-collapse: collapse;">
	<caption class="contents"><b>4.자격증</b></caption>
		<tr>
			<td style="width: 125px;text-align: center; background: #ccc;">취득년월일</td>
			<td style="width: 350px;text-align: center; background: #ccc;">자 격 증</td>
			<td style="text-align: center; background: #ccc;">발령청</td>
		</tr>
		<tr> 
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<table border="2" style="width: 600px; height: 120px; clear: both; border-collapse: collapse;">
	<caption class="contents"><b>5.가족관계</b></caption>
		<tr>
			<td style="width: 100px;text-align: center; background: #ccc;">성 명</td>
			<td style="width: 80px;text-align: center; background: #ccc;">관 계</td>
			<td style="text-align: center; background: #ccc;">생년월일</td>
			<td style="width: 80px;text-align: center; background: #ccc;">동거여부</td>
			<td style="width: 100px;text-align: center; background: #ccc;">기타</td>
		</tr>
		<tr> 
			<td>　</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>			
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>

</body>
</html>

잘 나오기는 하는데 코드에 잘못된 부분이 있는지 자꾸 느낌표가 떠있다. 

뭐가 잘못된건지 모르겠다 짜증 ㅠㅠ

위랑 같게 해도 느낌표가 자꾸 나오고 화딱지난당

 

Style을 head 에 태그나 class명으로 주고 싶은데 잘 안돼서 자꾸 인라인으로 style을 주게된다ㅠㅠ..

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0916~0917_CSS : Cascading Style Sheets(CSS)  (0) 2021.09.22
0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제  (0) 2021.09.15
0913_HTML : 레이아웃 관련 태그(2) div 태그  (0) 2021.09.14
0913_HTML : 레이아웃 관련 태그 (1)  (1) 2021.09.14
0913_HTML : 기본 태그(5) formatting 관련 태그  (0) 2021.09.14

<style> ~ </style>

- 스타일 정보 태그(Style Information)로 HTML문서 내에 스타일 시트를 선언하는 데 사용

 

<div> ~ </div>

- 블럭 태그(Division)

- <div> 요소는 그 자체로 어떤 의미를 갖지는 않으며, 몇가지 요소를 한 덩어리로 묶어서 스타일을 주거나 스크립트를 연결하는데 사용

- <div> 태그는 블럭 레벨 태그로 줄 바꿈이 일어난다.

 

ex10 >>

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>div 태그</h3>
<div>
<p> 대표적인 블록태그</p>
<p> 요소들을 묶어서 처리할 때 사용 </p>
</div>
<hr>

<div style="background: red">A</div>
<!--  내용이 없거나 height가 없으면 표시되지 않는다. -->
<div></div>
<div style="background: green">B</div>
<div style="background: blue">C</div>
<hr>

<div style="border: 1px solid red;">A</div>
<!-- 내용이 없거나 height가 없으면 선은 위(top) 한선만 나온다. -->
<div style="border: 1px solid greed;"></div>
<div style="border: 1px solid black;">B</div>
<div style="border: 1px solid blue;">C</div>
<hr>

<!-- padding : 안쪽 여백 -->
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 20px;">padding-안쪽여백</div>
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 10px 5px 10px 5px;">위 오른쪽 아래 왼쪽여백</div>
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 10px 15px 10px">위 오른쪽/왼쪽 아래 왼쪽여백</div>
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 10px 15px;">위/아래 오른쪽/왼쪽 여백</div>>
<hr>

<!-- margin: 바깥쪽 여백 -->
<div style="background: red; width: 200px; height: 50px;"></div>
<div style="background: blue; width: 200px; height: 50px; margin: 20px;"></div>
<div style="background: green; width: 200px; height: 50px;"></div>
<!-- 위아래는 여백이 20이고, 왼쪽 오른쪽은 auto이므로 수평 가운데 정렬 -->
<div style="background: blue; width: 200px; height: 50px; margin: 20px auto;"></div>
<hr>

</body>

ex11 >>

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* { /* 모든 태그 */
	margin: 0;
	padding: 0;
}

</style>

</head>
<body>

<h3>div 태그</h3>

<!-- border, margin, padding도 기본적으로 width, height에 포함된다. -->
<div style="background: yellow; width: 300px; height: 118px;">
	<div style="border: 3px solid green; height: 30px;">A</div>
	<div style="border: 3px solid red; margin: 5px; width: 284px; height: 30px;">B</div>
	<div style="border: 3px solid #333; height: 30px">C</div>
</div>
<hr>

<p>
  다음 div의 width는 270px이고 height는 170px이다.
</p>
<div style="width:200px; height: 100px; margin: 10px; padding: 20px; border: 5px solid #ccc;"></div>




</body>
</html>

ex12 >>

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
	margin: 0; padding: 0;
}

h3 {
	margin: 20px auto;
}
</style>
</head>
<body>

<h3>div 예제</h3>

<p>
  style - float 속성 : 해당 요소를 감싸고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하도록 설정<br>
  style - clear 속성 : 설정된 float 속성을 해제
</p>

<div style="border: 3px solid blue; width: 399px; height: 50px;">
	<div style="width: 200px; background: yellow; float: left;">A</div>
	<div style="width: 100px; background: red; float: left;">B</div>
	<div style="width: 50px; background: green; float: right;">C</div>
	<div style="width: 50px; background: tomato; float: right;">D</div>
</div>
<hr>

<div>
	<div style="background: red; height: 30px; width: 100px; float: left;"></div>
	<div style="background: green; height: 30px; width: 100px; float: left;"></div>
</div>
<div style="background: black; height: 30px; width: 200px; clear: both;"></div>
<!-- 위에 있던 float 속성을 없앰 -->


<div>
	<div style="background: red; height: 30px; width: 100px; float: left;"></div>
	<div style="background: green; height: 30px; width: 100px; float: left;"></div>
</div>
<div style="clear: both"></div>

<div style="margin: 30px auto; width: 200px;">
	<div style="background: red; height: 30px; width: 100px; float: left;"></div>
	<div style="background: green; height: 30px; width: 100px; float: left;"></div>
</div>

</body>
</html>
저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제  (0) 2021.09.15
0914_HTML : table 태그 사용 이력서 만들기 숙제  (2) 2021.09.14
0913_HTML : 레이아웃 관련 태그 (1)  (1) 2021.09.14
0913_HTML : 기본 태그(5) formatting 관련 태그  (0) 2021.09.14
0913_HTML: 기본 태그(4) 공통속성  (0) 2021.09.14

CSS 지정 형식

inline Style

- inline Style 은 HTML tag 속에 style 속성을 사용하여 직접 지정한다.

예 : <div style="color=red;">HTML</div>

 

embedded style sheet 방식

- 스타일 시트의 기본적인 사용 방법으로 html의 <head> ~ </head>사이에 삽입한다.

 

ex08 >>

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
/* embedded style sheet */

/* 태그 선택자 우선순위 3*/
div {
	color: blue; 
	font-weight: bold;
}

/* id 선택자 우선순위 1 [가장 높은 우선순위는 inline]*/
#java { background: yellow; }

/* class 선택자 우선순위 2*/
.web { color: tomato; }

</style>
</head>
<body>

<h3>간단한 css 예</h3>

<div>과목-프로그래밍</div>
<p id="java">자바</p>
<p style="font-size: 20px;">스프링</p>
<hr>

<div>과목-웹프로그래밍</div>
<p class="web">HTML</p>
<p class="web">CSS</p>
<p class="web">Javascript</p>
<hr>

</body>
</html>

 

linked style sheet 방식

- <head> ~ </head> 사이에 link element 를 사용하여 css file(확장자가 .css인 파일)을 연결 시켜서 사용하는 방식이다.

- 형식 : <link rel="stylesheet" href="파일명" type="text/css">

 

 

ex09 >>

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 외부 css 파일을 포함시키기 -->
<link rel="stylesheet" href="test.css" type="text/css">

</head>
<body>

<h3>css - linked style sheet</h3>

<div>과목-프로그래밍</div>
<p>자바</p>
<p>스프링</p>
<p>C/C++</p>
<hr>

<div>과목-웹프로그래밍</div>
<p class="web">HTML</p>
<p class="web">CSS</p>
<p class="web">Javascript</p>


</body>
</html>
@charset "UTF-8";

/* 외부 css 파일 */

div {
	font-size: 17px;
	font-weight: 700;
}

.web {
	color: tomato;
}
저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0914_HTML : table 태그 사용 이력서 만들기 숙제  (2) 2021.09.14
0913_HTML : 레이아웃 관련 태그(2) div 태그  (0) 2021.09.14
0913_HTML : 기본 태그(5) formatting 관련 태그  (0) 2021.09.14
0913_HTML: 기본 태그(4) 공통속성  (0) 2021.09.14
0913_HTML : 기본 태그(3) 블럭요소와 인라인 요소  (1) 2021.09.14

+ Recent posts

티스토리툴바