'쌍용강북교육센터/9월' 카테고리의 글 목록 (4 Page)

쌍용강북교육센터/9월

0923_CSS : flex 속성 2021.09.23
0923_CSS : columns 다단 2021.09.23
0923_CSS : clip 2021.09.23
0923_CSS : Z-index 2021.09.23
0923_CSS : 포지셔닝 position 2021.09.23
0916~0917_CSS : Cascading Style Sheets(CSS) 2021.09.22
0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제 2021.09.15
0914_HTML : table 태그 사용 이력서 만들기 숙제 2021.09.14 2

0923_CSS : flex 속성

호쏘2 2021. 9. 23. 22:47

2021. 9. 23. 22:47

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.flex-container {
	width: 350px;
	padding: 10px;
	margin: 30px;
	border: 3px dotted gray;
}

.flex {
	display: flex;
}

.inline-flex {
	display: inline-flex;
}

.box {
	width: 80px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 5px;
	border: 1px solid blue;
}

</style>
</head>
<body>

<h3>flex</h3>

<p>플렉스 레이아웃을 적용하지 않은 경우</p>
<div class="flex-container">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>display:flex, 수직으로 쌓는다.</p>
<div class="flex-container flex">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<div class="flex-container flex">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>display:inline-flex, 수평으로 쌓는다.</p>
<div class="flex-container inline-flex">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<div class="flex-container inline-flex">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

</body>
</html>

flex-direction

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.flex-container {
	width: 350px;
	padding: 10px;
	margin: 30px;
	border: 3px dotted gray;
	
	display: flex;
}

.row { flex-direction: row; }
.row-reverse { flex-direction: row-reverse; }
.column { flex-direction: column; }
.column-reverse { flex-direction: column-reverse; }

.box {
	width: 80px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 5px;
	border: 1px solid blue;
}

</style>
</head>
<body>

<h3>flex-direction : 아이템 주측 방향 설정</h3>

<p>기본값</p>
<div class="flex-container">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>flex-direction:row</p>
<div class="flex-container row">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>
<p>flex-direction:row-reverse</p>
<div class="flex-container row-reverse">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

<p>flex-direction:column</p>
<div class="flex-container column">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>

<p>flex-direction:column-reverse</p>
<div class="flex-container column-reverse">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<hr>

</body>
</html>

flex-wrap

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.flex-container {
	width: 200px;
	padding: 10px;
	margin: 20px;
	border: 3px dotted gray;
	
	display: flex;
}

.nowrap { flex-wrap: nowrap; }
.wrap { flex-wrap: wrap; }

.box {
	width: 60px;
	height: 100%;
	padding: 10px;
	text-align: center;
	
	border: 1px solid blue;
}

</style>
</head>
<body>

<h3>flex-wrap:강제로 한줄로 배치할 것인지, 영역을 벗어나지 않고 여러 줄로 배치할 것인지 지정</h3>

<p>기본값</p>
<div class="flex-container">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
</div>
<div class="flex-container">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
	<div class="box">D</div>
	<div class="box">E</div>
	<div class="box">F</div>
	<div class="box">G</div>
	<div class="box">H</div>
	<div class="box">I</div>
</div>
<hr>

<p>nowrap</p>
<div class="flex-container nowrap">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
	<div class="box">D</div>
	<div class="box">E</div>
	<div class="box">F</div>
	<div class="box">G</div>
	<div class="box">H</div>
	<div class="box">I</div>
</div>
<div class="flex-container nowrap">
	<div class="box">ITEM A</div>
	<div class="box">ITEM B</div>
	<div class="box">ITEM C</div>
	<div class="box">ITEM D</div>
	<div class="box">ITEM E</div>
	<div class="box">ITEM F</div>
</div>
<hr>

<p>wrap</p>
<div class="flex-container wrap">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="box">C</div>
	<div class="box">D</div>
	<div class="box">E</div>
	<div class="box">F</div>
	<div class="box">G</div>
	<div class="box">H</div>
	<div class="box">I</div>
</div>
<div class="flex-container wrap">
	<div class="box">ITEM A</div>
	<div class="box">ITEM B</div>
	<div class="box">ITEM C</div>
	<div class="box">ITEM D</div>
	<div class="box">ITEM E</div>
	<div class="box">ITEM F</div>
</div>
<hr>

</body>
</html>

display:flex를 이용한 수직 수평 가운데 정렬

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.parent {
	width: 500px; height: 350px;
	border: 1px solid blue;
	
	display: flex;
	align-items: center; /* 수직 가운데. display: flex 에서 가능 */
	justify-content: center; /* 주축 정렬. display: flex 에서 가능 */
}
.box {
	width: 350px;
	border: 1px solid orange;
	background: yellow;
}

h3 { text-align: center; }

</style>
</head>
<body>

<div class="parent">
	<div class="box">
		<h3>display:flex를 이용한 수직 수평 가운데 정렬</h3>
	</div>
</div>

</body>
</html>

justify-content: space-between

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

<style type="text/css">
header {
	height: 55px; padding: 1rem; color: white; background: darkblue;
	font-weight: bold;
	
	display: flex;
	justify-content: space-between; /* 첫번째는 왼쪽 두번째는 오른쪽 배치*/
	align-items: center;
}

nav > span {
	cursor: pointer;
	padding: 10px;
}

main {
	min-height: 1100px;
}

footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

</style>
</head>
<body>

<header>
	<h1>스터디</h1>
	<nav>
		<span>메뉴-1</span>
		<span>메뉴-2</span>
		<span>메뉴-3</span>
	</nav>
</header>

<main>
	<h3>고정되지 않는 메뉴</h3>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
</main>

<footer>
	<p>footer 영역</p>
</footer>

</body>
</html>

위 코드에서 메뉴영역이 스크롤을 내려도 위에 고정되어있게 하려면 position: fixed; 를 준다.

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

<style type="text/css">
header {
	position: fixed; /* 자리를 차지 하지 않음. 공중에 떠있음. */
	top: 0; left: 0; right: 0;
	
	height: 55px; padding: 1rem; color: white; background: darkblue;
	font-weight: bold;
	
	display: flex;
	justify-content: space-between; /* 첫번째는 왼쪽 두번째는 오른쪽 배치*/
	align-items: center;
}

nav > span {
	cursor: pointer;
	padding: 10px;
}

main {
	min-height: 1100px;
	padding-top: 60px;
}

footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

</style>
</head>
<body>

<header>
	<h1>스터디</h1>
	<nav>
		<span>메뉴-1</span>
		<span>메뉴-2</span>
		<span>메뉴-3</span>
	</nav>
</header>

<main>
	<h3>메뉴를 상단에 고정</h3>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
</main>

<footer>
	<p>footer 영역</p>
</footer>

</body>
</html>

저작자표시 동일조건

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

0923_CSS : Grid Layout (0)	2021.09.23
0923_CSS : display:flex를 사용하지 않고 메뉴 상단 고정 (0)	2021.09.23
0923_CSS : columns 다단 (0)	2021.09.23
0923_CSS : clip (0)	2021.09.23
0923_CSS : Z-index (0)	2021.09.23

0923_CSS : columns 다단

호쏘2 2021. 9. 23. 22:34

2021. 9. 23. 22:34

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

0923_CSS : clip

호쏘2 2021. 9. 23. 22:31

2021. 9. 23. 22:31

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

0923_CSS : Z-index

호쏘2 2021. 9. 23. 22:18

2021. 9. 23. 22:18

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

0923_CSS : 포지셔닝 position

호쏘2 2021. 9. 23. 22:12

2021. 9. 23. 22:12

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

0916~0917_CSS : Cascading Style Sheets(CSS)

호쏘2 2021. 9. 22. 21:33

2021. 9. 22. 21:33

CSS ?

HTML 문서 내에 서체의 종류, 크기, 색, 여백 등을 지정하여 사용자의 web browser 환경에 상관없이 일정한 화면을 보여주는 기능이다.

기능 확장성 : HTML의 기능을 확장 한다. 태그에 다양한 기능 추가 및 HTML에서 지원하지 않는 다양한 스타일등을 사용할 수 있다.

양식의 모듈화 : 흐름이 같은 문서 양식으로 전체를 구성할 수 있다.

간편성 : 문서의 형식을 손쉽게 다양하게 구성할 수 있다.

일관성 및 유지 보수의 편리성 : 사용 환경의 영향을 받지 않으며, 일관성 있는 문서들을 만들 수 있다. 그리고 유지 보수의 편리성이 있다.

CSS 형식

선택자 {속성:value | keyword; 속성: value | keyword;}

- CSS 구문은 선택자(selector)와 선언으로 구성되며, 선언은 속성(property)과 값(value)으로 구성된다.

- CSS의 기본 형식은 '선택자{속성:값;}'의 형식으로 표현되며 여러 속성을 사용할 경우 세미콜론(;)으로 구분한다.

- 대소문자를 구별하지 않는다.

- inline style을 제외한 모든 style property 와 value, keyword는 중괄호({})속에 들어간다.

CSS 지정 방법

인라인 스타일(inline style)

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

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

내부 스타일 시트(embedded style sheet)

- 스타일 시트의 기본적인 사용 방법으로 html의 <head>~</head>사이에 삽입하여 <style type="text/css">~<style>사이에 정의하며, 같은 스타일을 중복해서 지정 했을 때는 나중에 지정한 것이 적용된다.

외부 스타일 시트(linked style sheet)

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

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

imported style sheet

- 이 방식은 결과적으로 linked style sheet와 같고 위치는 embedded 방식과 마찬 가지로 style block 속에 들어간다.

- 형식 @import url("파일명"); 또는 @import"파일명";

상속과 캐스캐이딩(Cascading Order)

명시도 - 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.

적용 순서

(1) !important

(2) 인라인 스타일

(3) 아이디 선택자

(4) 클래스/어트리뷰트/가상 선택자

(5) 태그 선택자

(6) 전체 선택자

(7) 상위 요소에 의해 상속된 속성

선언순서 - 선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.

저작자표시 동일조건

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

0923_CSS : Z-index (0)	2021.09.23
0923_CSS : 포지셔닝 position (0)	2021.09.23
0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제 (0)	2021.09.15
0914_HTML : table 태그 사용 이력서 만들기 숙제 (2)	2021.09.14
0913_HTML : 레이아웃 관련 태그(2) div 태그 (0)	2021.09.14

0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제

호쏘2 2021. 9. 15. 23:46

2021. 9. 15. 23:46

위의 폼과 같게 만드시오.

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

0914_HTML : table 태그 사용 이력서 만들기 숙제

호쏘2 2021. 9. 14. 23:01

2021. 9. 14. 23:01

인터넷에 존재하는 이력서 폼을 똑같이 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

PREV 이전 1 2 3 4 5 6 7 NEXT 다음

개발새발, 써놓기