본문 바로가기
컴퓨터 프로그래밍/수업

2020.05.20_1

깝돌이 2020. 5. 20. 12:41

table th{
}

띄어 썼다는 것은 table 밑에 자식인 th라는 의미입니다. 

HTML은 계층구조가 확실합니다. 

th는 table의 후손입니다. 직계는 아닙니다. 

 

/*tr의 직계 자식인 td를 선택자로 지정*/
tr td{
}

이걸 직계로 표현하면, 

tr >td{

}

 

hover 효과 

마우스 entered와 마우스 leaved가 머지된 이벤트입니다. 

보통은 한가지 이벤트인데, 두가지 이벤트가 머지된 것입니다. 

hover = enter+leave

ex)

- 특정한 이미지를 선택했을 때 커지고 작아지고 하는데 쓰입니다. 

- 기사 글씨가 작은데, 마우스를 가져다 대면 커지는데 쓰입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table에hover효과주기</title>
<style type="text/css">
	table{
		width: 60%;
		border-top: 1px solid red;
		border-bottom: 1px solid red;
	}
	table th{
		background: red;
		color: #fff;
		border-bottom: 1px solid red;
	}
	/*tr의 직계 자식인 td를 선택자로 지정
	border의 하단을 2px점선 분홍색으로 가운데 정렬스타일...*/
	tr>td{
		border-bottom: 2px dotted pink;
		text-align: center;
	}
	/*table의 자식인 tr을 선택자로 지정*/
	table tr:hover{
	background-color: pink;
	}
	
	
</style>
</head>
<body>
	<h2 align="center">Table에 Hover 효과</h2>
	<table align = "center">
		<tr>
			<th>이름</th><th>주소</th><th>직업</th>
		</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>
</body>
</html>

 

form 태그

<!--
모든 입력 폼을 하나로 묶는 역할을 하는 태그
form태그입니다.
이 안에 다양한 입력 태그가 있습니다. 

속성: 
1) 필수: action = "서버안에 있는 페이지"
2) 옵셔널: Method
-->

 

<label>NAME</label>&nbsp; &nbsp;<input type = "text" name ="name" placeholder="이름입력"><br/><br/>

placeholder는 박스안에 힌트를 주는 것입니다. 

 

<label>ID</label><input type = "text" name ="id"  value = "encore" readonly="readonly"><br/><br/>

value를 넣으면 이 값을 넘기겠다는 말입니다. 그 뒤에 readonly를 넣어주면 수정할 수 없게 합니다. 그래서 이값을 보내게 됩니다. 

 

Gender<input type = "radio" name = "gender" value = "M">남성
  <input type = "radio" name = "gender" value = "F">여성

남성 여성은 화면에 보여지는 값이고, 실제 서버로 보내지는 값은 value의 값입니다.

 

Age<input type = "number" name ="age" required = "required">

required 는 필수 입력 사항에 대해서 지정 할 수 있기 때문에 어마어마하게 중요합니다. 

 

정리

input type = 

           text 1) input type = 
text
password
radio
checkbox
file
date
submit
button
reset
number
tel

2) select
option


3) textarea
row =  cols =

 

<!--
모든 입력 폼을 하나로 묶는 역할을 하는 태그
form태그입니다.
이 안에 다양한 입력 태그가 있습니다. 

속성: 
1) 필수: action = "서버안에 있는 페이지"
2) 옵셔널: Method
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
<h2 align="center">Register Input From</h2>
<div id = "wrap">
	<form action = "#">
	<label>NAME</label>&nbsp; &nbsp;<input type = "text" name ="name" placeholder="이름입력"><br/><br/>
	<label>ID</label><input type = "text" name ="id"  value = "encore" readonly="readonly"><br/><br/>
	<label>PASSWORD</label><input type = "password" name ="password"><br/><br/>
	
	<input type="file" name = "usefile"><br/><br/>
	BirthDate<input type="date" name = "birthdate" id = "birthdate"><br/><br/>
	
	Gender<input type = "radio" name = "gender" value = "M">남성
		  <input type = "radio" name = "gender" value = "F">여성<br/><br/>
		  
	Age<input type = "number" name ="age" required = "required"><br/><br/>
	
	<strong>다음 중 오늘 드시고 싶은 점심 메뉴들를 선택하세요.</strong><br/><br/>
	<select multiple = "multiple">
		<option>김밥
		<option>돈까스
		<option value="명란">알밥 <!-- 이거 선택했을때 value 값을 보내고 싶을때는 value를 쓴다. -->
		<option>모밀굯수
	</select><br/><br/>
	
	
	
	<!-- Multiple한 choice:Checkbox -->
	<strong>다음 중 집에서 길러봤던 애완동물들을 선택하세요.</strong><br/><br/>
	<input type ="checkbox" name ="pet" value = "개">개
	<input type ="checkbox" name ="pet" value = "고양이">고양이
	<input type ="checkbox" name ="pet" value = "햄스터">햄스터
	<input type ="checkbox" name ="pet" value = "금붕어">금붕어
	<input type ="checkbox" name ="pet" value = "앵무세">앵무세
	<br/><br/>
	Introduction<br/>
	<textarea rows="5" cols="40">
	hi.....
	</textarea>
	
	<hr>
	<br/><br/>
	
	<input type = "submit" value ="Sending">
	<input type = "reset" value = "Clear">
	<input type = "button" value = "Button">
</div>
</form>
</body>
</html>

 

 

table

table{
border-collapse: collapse;
}

경계가 두개 생겼는데, 하나로 합치는 걸 저렇게 하면 됩니다.

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

<style>
#wrap{
	text-align: center;
	margin-top: 10%;
	margin-left: 30%;
}
table{
	border-collapse: collapse;
}


</style>
</head>
<body>
<div id = "wrap">
	<table width = "40%" border = "2">
		<tr>
			<th colspan =2><h1>header</h1></th>
		</tr>
		<tr>
			<td colspan =2><h1>nav</h1></th>
		</tr>
		<tr>
			<td><h1>section</h1></td><td rowspan =2><h1>aside</h1></td>
		</tr>
		<tr>
			<td><h1>article</h1></td>
		</tr>
		<tr>
			<td colspan =2><h1>footer</h1></td>
		</tr>
	</table>
</div>
</body>
</html>

 

media를 사용합니다. 

1) image

- placeholdit

:지금 이미지가 없지만, 이미지의 위치를 잡을때 임의로 사용할 수 있는 사이트

2) audio

3) video

- 유투브에서 소스코드보기 복사해서 붙여 넣으면 알아서 iframe이 됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>placeholdit</title>
</head>
<body>

<h1>placehold.it 사이트 이용하기</h1>
<img alt="" src="http://placehold.it/300x200">
<img alt="" src="http://placehold.it/250x100">
<img alt="" src="http://placehold.it/100x100">
<hr>
<h1>Audio tag 사용하기</h1>
<!-- 
	media tag에는 음악 재생도구를 반드시 나타나도록 해줘야합니다. 
 	controls 속성을 해줘야함.
 	autoplay = "autoplay" 기능은 크롬에서는 안됩니다..
 -->
<audio src="media/Kalimba.mp3" controls="controls" autoplay="autoplay"></audio>
<hr>

<iframe width="644" height="362" src="https://www.youtube.com/embed/Q38h5XD4RKE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



</body>
</html>

<!-- 디바이스에 따라서 다르게 하게끔.... -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 디바이스에 따라서 다르게 하게끔.... -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
</head>
<body>
	<h1>placehold.it 사이트 이용하기</h1>
	<img alt="" src="http://placehold.it/300x200">
	<img alt="" src="http://placehold.it/250x100">
	<img alt="" src="http://placehold.it/100x100">
	<hr>
	<h1>Audio tag 사용하기</h1>
	<audio src="media/Kalimba.mp3" controls="controls" autoplay="autoplay"></audio>
	<hr>
	
	<iframe width="644" height="362" src="https://www.youtube.com/embed/Q38h5XD4RKE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

로컬 스토리지가 어마어마하게 중요.

구글 개발자 도구 - application- storage-local storage 

session 스토리지보다 더 좋은 스토리지 보안상 굉장히 잘 되어있음. 영구적인 저장소

장바구니는 디비에 저장하는게 아니라 여기에 저장하는 것입니다. 

구글맵 등 이렇것도 연관되어 있습니다. 

 

 

 

 

CSS로 넘어 갑니다. 

사이트와 책 소개

- 한빛 미디어: 모던웹을 위한 HTML5+CSS3바이블 3판

- w3schools.com

 

- html 기술을 이용해서 화면에 보여질 문서의 구조를 만들었다면, 

- CSS 문서의 구조를 통일성 있게(스타일리쉬하게)만드는 작업을 담당

: CSS 선언부가 반드시 필요-> title 태그 아래에서하는 것이 보편적입니다. 

 

html에 css 부분을 따로 뺍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*색깔은 오렌지, 글씨 스타일 알아서...글씨는 조금 굵게 25pt*/
	h2{
	color: orange;
	font-style: oblique;
	font: bold;
	font-size: 25pt; 
	}
/*p 태그를 선택자로 지정..... 글씨색깔; font -size: 25pt; 궁서체*/
	p{
	color: purple;
	font-size: 25pt;
	font-family:cursive;
	}
	
	
</style>
</head>
<body>
	<h2>CSS3를 이요한 Style Sheet 이용하기</h2>
	<p>Nullam venenatis arcu eu lacinia condimentum. Aliquam nisi ligula, pulvinar a tortor et, faucibus blandit odio. Nulla lobortis urna finibus, euismod nibh porta, imperdiet purus. Nunc sed rhoncus diam. Cras consectetur gravida risus, ornare pellentesque neque elementum quis. Morbi lacinia felis tellus, vitae tempus ipsum porttitor non. Nulla aliquet viverra augue quis dignissim.</p>
	<p>Duis congue neque sed velit pellentesque, finibus aliquet lectus malesuada. Mauris lorem diam, hendrerit sit amet malesuada aliquam, mattis nec quam. Suspendisse quis ex in nisi tristique sollicitudin id eget ex. In lacus ex, volutpat non cursus nec, pretium vel ipsum. Donec et laoreet magna. Pellentesque fermentum dui et nisl rhoncus, vel mollis mi sodales. Maecenas fringilla feugiat ipsum ut venenatis.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu sollicitudin ipsum. Pellentesque non velit nec tortor aliquam sollicitudin et a quam. Praesent ac magna nec sem sodales laoreet sit amet a augue. Pellentesque metus massa, placerat ac convallis sit amet, cursus vitae augue.</p>
</body>
</html>

외부로 모듈화 해줍니다.

@charset "UTF-8";
/*색깔은 오렌지, 글씨 스타일 알아서...글씨는 조금 굵게 25pt*/
	h2{
	color: orange;
	font-style: oblique;
	font: bold;
	font-size: 25pt; 
	}
/*p 태그를 선택자로 지정..... 글씨색깔; font -size: 25pt; 궁서체*/
	p{
	color: purple;
	font-size: 25pt;
	font-family:cursive;
	}

그리고, 연결해줍니다. 

1. 첫번째 연결 방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  css02_css.css파일로 모듈롸 시켰습니다. 여기서 외부 파일의 내용을 참조 합니다 -->	
<link rel="stylesheet" type = "text/css" href ="css02_css.css">
</head>
<body>
	<h2>CSS3를 이요한 Style Sheet 이용하기</h2>
	<p>Nullam venenatis arcu eu lacinia condimentum. Aliquam nisi ligula, pulvinar a tortor et, faucibus blandit odio. Nulla lobortis urna finibus, euismod nibh porta, imperdiet purus. Nunc sed rhoncus diam. Cras consectetur gravida risus, ornare pellentesque neque elementum quis. Morbi lacinia felis tellus, vitae tempus ipsum porttitor non. Nulla aliquet viverra augue quis dignissim.</p>
	<p>Duis congue neque sed velit pellentesque, finibus aliquet lectus malesuada. Mauris lorem diam, hendrerit sit amet malesuada aliquam, mattis nec quam. Suspendisse quis ex in nisi tristique sollicitudin id eget ex. In lacus ex, volutpat non cursus nec, pretium vel ipsum. Donec et laoreet magna. Pellentesque fermentum dui et nisl rhoncus, vel mollis mi sodales. Maecenas fringilla feugiat ipsum ut venenatis.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu sollicitudin ipsum. Pellentesque non velit nec tortor aliquam sollicitudin et a quam. Praesent ac magna nec sem sodales laoreet sit amet a augue. Pellentesque metus massa, placerat ac convallis sit amet, cursus vitae augue.</p>
</body>
</html>

디렉토리 관리

 

 

css/ 폴더명을 넣어 줍니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  css02_css.css파일로 모듈롸 시켰습니다. 여기서 외부 파일의 내용을 참조 합니다 -->	
<link rel="stylesheet" type = "text/css" href ="css/css02_css.css">
</head>
<body>
	<h2>CSS3를 이요한 Style Sheet 이용하기</h2>
	<p>Nullam venenatis arcu eu lacinia condimentum. Aliquam nisi ligula, pulvinar a tortor et, faucibus blandit odio. Nulla lobortis urna finibus, euismod nibh porta, imperdiet purus. Nunc sed rhoncus diam. Cras consectetur gravida risus, ornare pellentesque neque elementum quis. Morbi lacinia felis tellus, vitae tempus ipsum porttitor non. Nulla aliquet viverra augue quis dignissim.</p>
	<p>Duis congue neque sed velit pellentesque, finibus aliquet lectus malesuada. Mauris lorem diam, hendrerit sit amet malesuada aliquam, mattis nec quam. Suspendisse quis ex in nisi tristique sollicitudin id eget ex. In lacus ex, volutpat non cursus nec, pretium vel ipsum. Donec et laoreet magna. Pellentesque fermentum dui et nisl rhoncus, vel mollis mi sodales. Maecenas fringilla feugiat ipsum ut venenatis.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu sollicitudin ipsum. Pellentesque non velit nec tortor aliquam sollicitudin et a quam. Praesent ac magna nec sem sodales laoreet sit amet a augue. Pellentesque metus massa, placerat ac convallis sit amet, cursus vitae augue.</p>
</body>
</html>

2번째 연결 방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css, html 파일 분리하기2</title>
<!--  css02_css.css파일로 모듈롸 시켰습니다. 여기서 외부 파일의 내용을 참조 합니다 -->	
<style type="text/css">
	@import url("css/css02_css.css");
</style>

</head>
<body>
	<h2>CSS3를 이요한 Style Sheet 이용하기</h2>
	<p>Nullam venenatis arcu eu lacinia condimentum. Aliquam nisi ligula, pulvinar a tortor et, faucibus blandit odio. Nulla lobortis urna finibus, euismod nibh porta, imperdiet purus. Nunc sed rhoncus diam. Cras consectetur gravida risus, ornare pellentesque neque elementum quis. Morbi lacinia felis tellus, vitae tempus ipsum porttitor non. Nulla aliquet viverra augue quis dignissim.</p>
	<p>Duis congue neque sed velit pellentesque, finibus aliquet lectus malesuada. Mauris lorem diam, hendrerit sit amet malesuada aliquam, mattis nec quam. Suspendisse quis ex in nisi tristique sollicitudin id eget ex. In lacus ex, volutpat non cursus nec, pretium vel ipsum. Donec et laoreet magna. Pellentesque fermentum dui et nisl rhoncus, vel mollis mi sodales. Maecenas fringilla feugiat ipsum ut venenatis.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu sollicitudin ipsum. Pellentesque non velit nec tortor aliquam sollicitudin et a quam. Praesent ac magna nec sem sodales laoreet sit amet a augue. Pellentesque metus massa, placerat ac convallis sit amet, cursus vitae augue.</p>
</body>
</html>

두가지 연결 방법이 있는데, 차이점은 무엇일까요?

import는 <style>안에 있기 때문에 그 아래 내가 커스터 마이징을 할 수 있습니다. 

반면에 첫번째 연결 방법은 그렇게 할 수가 없습니다. 

아래같이 할 수 있습니다. 

css에서 css를 가져올 때는 import를 하고, html에서 가져올 때는 link를 이용하는게... 좋습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css, html 파일 분리하기2</title>
<!--  css02_css.css파일로 모듈롸 시켰습니다. 여기서 외부 파일의 내용을 참조 합니다 -->	
<style type="text/css">
	@import url("css/css02_css.css");
	body{
		backgroud:grey;
	}
</style>

</head>
<body>
	<h2>CSS3를 이요한 Style Sheet 이용하기</h2>
	<p>Nullam venenatis arcu eu lacinia condimentum. Aliquam nisi ligula, pulvinar a tortor et, faucibus blandit odio. Nulla lobortis urna finibus, euismod nibh porta, imperdiet purus. Nunc sed rhoncus diam. Cras consectetur gravida risus, ornare pellentesque neque elementum quis. Morbi lacinia felis tellus, vitae tempus ipsum porttitor non. Nulla aliquet viverra augue quis dignissim.</p>
	<p>Duis congue neque sed velit pellentesque, finibus aliquet lectus malesuada. Mauris lorem diam, hendrerit sit amet malesuada aliquam, mattis nec quam. Suspendisse quis ex in nisi tristique sollicitudin id eget ex. In lacus ex, volutpat non cursus nec, pretium vel ipsum. Donec et laoreet magna. Pellentesque fermentum dui et nisl rhoncus, vel mollis mi sodales. Maecenas fringilla feugiat ipsum ut venenatis.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu sollicitudin ipsum. Pellentesque non velit nec tortor aliquam sollicitudin et a quam. Praesent ac magna nec sem sodales laoreet sit amet a augue. Pellentesque metus massa, placerat ac convallis sit amet, cursus vitae augue.</p>
</body>
</html>

세번째는 각각의 tag에서 style =을 줍니다. 이게 최우선으로 적용됩니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css, html 파일 분리하기2</title>
<!--  css02_css.css파일로 모듈롸 시켰습니다. 여기서 외부 파일의 내용을 참조 합니다 -->	
<style type="text/css">
	@import url("css/css02_css.css");
	body{
		backgroud:gray;
	}
</style>

</head>
<body>
	<h2>CSS3를 이용한 Style Sheet 이용하기</h2>
	<p style = "color: red;"> Nullam venenatis arcu eu lacinia condimentum. Aliquam nisi ligula, pulvinar a tortor et, faucibus blandit odio. Nulla lobortis urna finibus, euismod nibh porta, imperdiet purus. Nunc sed rhoncus diam. Cras consectetur gravida risus, ornare pellentesque neque elementum quis. Morbi lacinia felis tellus, vitae tempus ipsum porttitor non. Nulla aliquet viverra augue quis dignissim.</p>
	<p>Duis congue neque sed velit pellentesque, finibus aliquet lectus malesuada. Mauris lorem diam, hendrerit sit amet malesuada aliquam, mattis nec quam. Suspendisse quis ex in nisi tristique sollicitudin id eget ex. In lacus ex, volutpat non cursus nec, pretium vel ipsum. Donec et laoreet magna. Pellentesque fermentum dui et nisl rhoncus, vel mollis mi sodales. Maecenas fringilla feugiat ipsum ut venenatis.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu sollicitudin ipsum. Pellentesque non velit nec tortor aliquam sollicitudin et a quam. Praesent ac magna nec sem sodales laoreet sit amet a augue. Pellentesque metus massa, placerat ac convallis sit amet, cursus vitae augue.</p>
</body>
</html>

 

'컴퓨터 프로그래밍 > 수업' 카테고리의 다른 글

2020.05.21_2  (0) 2020.05.21
2020.05.21  (0) 2020.05.21
2020.05.20_2  (0) 2020.05.20
2020.05.19_2  (0) 2020.05.19
2020.05.19_1  (0) 2020.05.19

'컴퓨터 프로그래밍/수업' Related Articles

티스토리툴바