Data Scientist 옌

매일 발전하는 IT문제해결사

국비지원교육 (22.01-22.07)/강의노트

22-04-06(수) 048일차 [HTML, CSS] 웹에서 데이터를 가져오기, CSS margin과 float 조절

옌炎 2022. 5. 24. 13:07
728x90

수업내용

1교시 (09:30-10:20)

  • 어제 배운 것 리뷰
    • mem.html ← 활동끄기
      • action=“/KosMember~~” → action=”#~”
    • CSS attributes
    • box-model
  • mem_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 폼</title>

<!-- 디바이스에 최적화된 크기로 출력됨 --------------------------------------->
<meta name="viweport" content="width=device-width, iitail-scale=1">

<!-- jQuery CDN 불러오기  -------------------------------------------->
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- 다음 주소록 OPEN API CDN 불러오기  ----------------------------------->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

<script type="text/javascript">
	
	$(document).ready(function(){
		alert("ready >>> : ");
		
		/*====== memForm 태그 START ==========================================*/
		// memForm 태그에 바인딩 된 데이터 jsp 로 보내기 
		$("#memInsertBtn").click(function(){
			alert("mzone_btn >>> : ");
			console.log("mzone_btn >>> : ");
			
			
			//############################################# 자바스크립트 버전 START
			/*
				자바스크립트 버전 
				
				id 값 : 엘리먼드가 하나인 엘리먼트에 id 사용한 것  
					var v1 = document.getElementById('id_name').value;
				
				
				name 값 : 
					var v2 = document.form_name.input_name.value;
				
			
				name 값 : 엘리먼트가 여러개 인 엘리먼트 name 사용할 것 
					var v3 = document.getElementsByName('mgender');
				
			*/		
			
			// <input type="text" name="mname"
			var mname = document.memForm.mname;
			alert("mname >>> : " + mname);
			console.log("mname >>> : " + mname);
			
			var mname_value = mname.value;
			alert("mname_value >>> : " + mname_value);
			console.log("mname_value >>> : " + mname_value);
			
			// <input type="radio" name="mgender" value="01" checked="checked" />여자
			// <input type="radio" name="mgender" value="02" />남자
			var mgender = document.memForm.mgender;
			alert("mgerder >>> : " + mgender);
			console.log("mgender >>> : " + mgender);
			
			var mgender_length = mgender.length;
			alert("mgender_length >>> : " + mgender_length);
			console.log("mgender_length >>> : " + mgender_length);
			
			var mgender0_checked = mgender[0].checked;
			alert("mgender0_checked >>>> " + mgender0_checked);
			console.log("mgender0_checked >>>> " + mgender0_checked);
			
			var mgender0_value = mgender[0].value;
			alert("mgender0_value >>>> " + mgender0_value);
			console.log("mgender0_value >>>> " + mgender0_value);
			
			var mgender1_checked = mgender[1].checked;
			alert("mgender1_checked >>>> " + mgender1_checked);
			console.log("mgender1_checked >>>> " + mgender1_checked);
			
			var mgender1_checked = mgender[1].value;
			alert("mgender1_checked >>>> " + mgender1_checked);
			console.log("mgender1_checked >>>> " + mgender1_checked);
			
			// 성별
			var mgender_check = document.getElementsByName('mgender');
		 	alert("mgender_check >>> : "+ mgender_check);
		 	alert("mgender_check.length >>> : " + mgender_check.length);
			for (var i=0; i < mgender_check.length; i++){
				if(mgender_check[i].checked == true){
					console.log("mgender_check["+i+"].value >>> : " + mgender_check[i].value);
				}
			}
			
			
			// <input type="checkbox" name="mhobby" value="01" />독서		      
			// <input type="checkbox" name="mhobby" value="02" />운동
			// <input type="checkbox" name="mhobby" value="03" />음악감상
			// <input type="checkbox" name="mhobby" value="04" />여행
			var mhobby = document.memForm.mhobby;
			alert("mhobby >>>> " + mhobby);
			console.log("mhobby >>>> " + mhobby);
			
			var mhobby0_checked = mhobby[0].checked;
			alert("mhobby0_checked >>>> " + mhobby0_checked);
			console.log("mhobby0_checked >>>> " + mhobby0_checked);
			
			var mhobby0_value = mhobby[0].value;
			alert("mhobby0_value >>>> " + mhobby0_value);
			console.log("mhobby0_value >>>> " + mhobby0_value);
			
			var mhobby1_checked = mhobby[1].checked;
			alert("mhobby1_checked >>>> " + mhobby1_checked);
			console.log("mhobby1_checked >>>> " + mhobby1_checked);
			
			var mhobby1_value = mhobby[1].value;
			alert("mhobby1_value >>>> " + mhobby1_value);
			console.log("mhobby1_value >>>> " + mhobby1_value);
			
			var mhobby2_checked = mhobby[2].checked;
			alert("mhobby2_checked >>>> " + mhobby2_checked);
			console.log("mhobby2_checked >>>> " + mhobby2_checked);
			
			var mhobby2_value = mhobby[2].value;
			alert("mhobby2_value >>>> " + mhobby2_value);
			console.log("mhobby2_value >>>> " + mhobby2_value);
			
			var mhobby3_checked = mhobby[3].checked;
			alert("mhobby3_checked >>>> " + mhobby3_checked);
			console.log("mhobby3_checked >>>> " + mhobby3_checked);
			
			var mhobby3_value = mhobby[3].value;
			alert("mhobby3_value >>>> " + mhobby3_value);
			console.log("mhobby3_value >>>> " + mhobby3_value);
			
			
			// 취미			
			var mhobby_check = document.getElementsByName('mhobby');
			for (var i=0; i < mhobby_check.length; i++){
				if(mhobby_check[i].checked == true){
					console.log("mhobby_check["+i+"].value >>> : " + mhobby_check[i].value);
				}
			}
  			
				
			//############################################# jQuery 버전 START
			
			/*
			jQuery 버전
			
			id 값 : 
				var v1 = $('#id_name').val();
		
			name 값 : 
				var v2_0 = $('input[name=input_name]').val();
				var v2_1 = $('input:radio[name=mgender]:checked').val();
				var v2_2 = $('select[name=mtel]').val();
				var v2_3 = $('input:checkbox[name=mhobby]');
				var v2_4 = $('textarea[name=minfo]').val());	
		
			class 값 : 
				var v3 = $('.class_name').val();			
			*/	
			
			
			$("#memForm")
			.attr({
					"action":"#",
				    "method":"GET",
				    "enctype":"application/x-www-form-urlencoded"
			       })
			.submit();	
			
		}); 
	});
	
</script>

<style type="text/css">
	/*====== div START ==========================================*/
	div {
			margin: 50px 0px 0px 100px;
		}	
	/*====== div END ==========================================*/		
</style>

</head>
<body>
<div>
<h3>회원 가입</h3>
<hr>
<form name="memForm" id="memForm">
<table border="1">
<tr>
	<td colspan="2">회원 가입</td>	
</tr>
<tr>
	<td>회원번호</td>
	<td><input type="text" name="mnum"  id="mnum" readonly /></td>
</tr>
<tr>
	<td>이름</td>
	<td><input type="text" name="mname" id="mname" /></td>
</tr>
<tr>
	<td>아이디</td>
	<td>	
		<input type="text" name="mid" mid="mid" placeholder="아이디체크" />
		<input type="button" name="midCheck" id="midCheck" value="아이디중복확인" />
	</td>
</tr>
<tr>
	<td>패스워드</td>
	<td>
		<input type="text" name="mpw" id="mpw" style="width:100px"/><br>
		<input type="text" name="mpw_r" id="mpw_r" placeholder="비밀번호확인" style="width:100px"/>
		<input type="button"  name="mpwCheck" id="mpwCheck" value="비밀번호확인">
	</td>
</tr>
<tr>
	<td>핸드폰</td>
	<td>
		<select name="mhp" id="mhp" style="width:50px;">
        	<option value="010">010</option>
        	<option value="011">011</option>
        	<option value="016">016</option>
        	<option value="017">017</option>		        	
         </select>
         - <input type="text" name="mhp1" id="mhp1" maxlength="4" style="width:50px;"/>
         - <input type="text" name="mhp2" id="mhp2" maxlength="4" style="width:50px;"/>
	</td>
</tr>
<tr>
	<td>이메일</td>
	<td>		
		<input type="text" name="memail"  id="memail" style="width:100px"/>
		@ <input type="text" name="memail1" id="memail1" style="width:100px" placeholder="직접입력" />
		<select name="memail2" id="memail2">
        	 <option value="1" selected>직접입력</option>
       		 <option value="naver.com">naver.com</option>	       	   
      		 <option value="gmail.com">gmail.com</option>
      		 <option value="daum.net">daum.net</option>	       	   
         </select>
	</td>
</tr>
<tr>
	<td>성별</td>
	<td> 
		<input type="radio" name="mgender" value="01" checked="checked" />여자
		<input type="radio" name="mgender" value="02" /> 남자
	</td>
</tr>
<tr>
	<td>취미</td>
	<td> 
		<input type="checkbox" name="mhobby" value="01" />독서		      
		<input type="checkbox" name="mhobby" value="02" />운동
		<input type="checkbox" name="mhobby" value="03" />음악감상
		<input type="checkbox" name="mhobby" value="04" />여행
	</td>
</tr>
<tr>
	<td>주소</td>
 	<td>
 		<input type="text" name="mzone" id="mzone" placeholder="우편번호" style="width:70px" maxlength="6" >
 		<input type="button" name="mzone_btn" id="mzone_btn" value="우편번호 찾기"><br>	 	
 		<input type="text" name="mroad" id="mroad" placeholder="도로명주소" style="width:250px"><br>	 	
 		<input type="text" name="mroaddetail" id="mroaddetail" placeholder="도로명주소 상세주소" style="width:250px"><br>	 	
 		<input type="text" name="mjibun" id="mjibun" placeholder="지번주소" style="width:250px">
 	</td>
</tr>
<tr>
	<td>소개글</td>
	<td>
		<textarea name="mmsg" id="mmsg" rows="5" cols="50"></textarea>
	</td>
</tr>
<tr>
	<td colspan="2"> 		
		<input type="hidden" id="ISUD_TYPE" name="ISUD_TYPE" value="I">		
		<input type="button" value="jsp_보내기" id="memInsertBtn" />	
		<input type="reset" value="취소" />
	</td>				
</tr>
</table>				 		        		     
</form>	
</div>		
</body>
</html>

2교시 (10:30-11:20)

  • css_02_boxmodel.html ← 주석 수정된 부분 확인
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>박스모델</title>
	<!--
	
		1. CSS : Cascading Style Sheet 캐스케이딩 스타일 시트
		-----------------------------------------------
		우선 순위가 있어서 위에서 아래도 적용이 된다.
		
		2. block level element 블록 레벨 요소
		   inline level element 인라인 레벨 요소
		   
		-------------------------------------------------------------
		3. CSS 박스 모델 요소 box model element
		-------------------------------------------------------------
		여백 (margin) 	: 박스의 맨 바깥 영역, 테두리 바깥 공간으로 아래위 인접한 태그와 만나는 공간
		테두리 (border)	: 패딩 외부의 외곽선으로 직선이나 점선 혹은 이미지로 입힐 수 있다.
		패딩 (padding)	: 콘텐츠를 직접 둘러 싸고 있는 내부 여백
		콘텐츠(width, height) : HTML 태그의 텍스트나 이미지 부분

		-------------------------------------------------------------
		4. 박스 모델은 텓리 마진 패딩 등 상하좌우 4개 방향을 지정할 수 있다.
		$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
		맨 위쪽부터 시작해서 시계방향으로 지정한다.
		top - right - bottom - left
		$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
		-------------------------------------------------------------

			1. 각각 다 지정해주는 방법, 순서는 상우하좌, 시계방향
				margin: [margin-top] [margin-right] [margin-bottom] [margin-left];
	
			2. 상하의 마진이 같고, 좌우 마진이 같을 때
				margin: [margin-top=margin-bottom] [margin-left=margin-right];
	
			3. 좌우는 같은데, 상하가 다를 때
				margin: [margin-top] [margin-left = margin-right] [margin-bottom];
	
			4. 상우하좌 동일하게
				margin: [margin-top = margin-bottom = margin-left = margin-right];
	
			5. 0 상하 여백을 주지 않음, auto 좌우 여백을 자동으로
				margin:0 auto;

		5. box-size : 박스 모델의 너비와 높이 지정
		   border-box : 테두리까지 포함해서 너비값을 지정
		   content-box : 콘텐츠 영역만 너비 값을 지정, default 값
		
		
		float : 정렬을 하기 위한 속성, 이미지는 객체를 오른쪽 왼쪽에 띄움
		none: 띄우지 않음(기본값)
		left: 완쪽에 띄움
		right: 오른쪽에 띄움
	-->
	<style type="text/css">
		body { background: ghostwhite; }
		span { background: deepskyblue; }
		img {
			border: 2px solid red;
			padding: 20px;
		}
		div.box {
			background: yellow;
			border-style: solid;
			border-color: peru;
			border-width: 30px;
			width: 250px;
			height: 100px;
			margin: 40px;
			padding: 20px;
		}
		div.box1 {
			background: red;
			border-style: solid;
			border-color: blue;
			border-width: 5px;
			width: 250px;
			height: 100px;
			margin: 5px;
			padding: 5px;
		}
	</style>
</head>
<body>
	<img src="/KosMember/img/img_css/boxModel.png">
	<div class="box">
		<span>
			div(Division) box<br>
			div는 웹페이지에서 논리적 구분을 정의하는 태그이다.
		</span>
	</div>
	<div class="box1">
		<span>
				top right bottom left
		</span>
	</div>
</body>
</html>
  • 데이터를 받아 오는 방법 1: 웹 페이지에서 이미지 가져오기
    • 실행 후 F12 > 이미지 소스 우 클릭 > copy >copy element <img src="/KosMember/img/img_css/boxModel.png">
  • 웹
    • 웹 브라우저에서 웹 서버에게 데이터를 요청하면
    • 웹 서버에서 요청한 데이터를 처리해서
    • 처리한 결과를 html 웹 문서에 잡아서 클라이언트에게 웹 문서 파일을 전송한다.
    • 클라이언트 컴퓨터에서는 응답받은 파일을 읽어서 웹 브라우저에 렌더링해서 보여준다.

3교시 (11:30-12:20)

웹

  • 데이터를 받아 오는 방법 2: URL_Test.java
package a.b.c.test;

import java.net.URL;
import java.net.MalformedURLException;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.BufferedWriter;
import java.io.OutputStreamWriter;
import java.io.FileOutputStream;
import java.io.FileWriter;

public class URL_Test {
	
	public static void main(String args[]) {

		// String url = "https://www.naver.com";
		String url = "http://localhost:8088/KosMember/kos_css/css_02_boxmodel.html";
		
		try {
			URL u = new URL(url);
			System.out.println("u >>> : " + u);
			System.out.println("u >>> : " + u.openStream());
			BufferedReader br = new BufferedReader(new InputStreamReader(u.openStream(), "UTF-8"));
			// UTF-8, EUC-KR, ISO-8859-1
			System.out.println("br >>> : " + br);
			String inLine = "";
			
			BufferedWriter bw = new BufferedWriter(new FileWriter("css_02_boxmodel.html"));
			while ((inLine=br.readLine()) != null) {
				System.out.println(inLine);
				bw.write(inLine);
			}
			bw.flush();
			br.close();
			bw.close();
		} catch (Exception m) {
			System.out.println("m >>> : " + m);
		}
	}
}
  • 데이터를 받아 오는 방법 3: curl
    • https://curl.se/download.html
    • curl 7.82.0 for Windows 64bit 다운로드 받고 압축 해제
    • bin 안의 curl.exe 실행
    • cmd 창에서 아래 명령어 입력하면 파일 내용을 보여줌
    • C:\\Users\\username>curl <http://localhost:8088/KosMember/kos_css/css_02_boxmodel.html>

4교시 (12:30-13:20)

  • css_02_box-sizing.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<!--
		-------------------------------------------------
		box-sizing  박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다.
		-------------------------------------------------
		기본값 : content-box
		상속 : No
		애니메이션 : No
		버전 : CSS Level 3
		
		box-sizing: content-box | border-box | initial | inherit
		content-box : 콘텐츠 영역을 기준으로 크기를 정합니다.
		border-box : 테두리를 기준으로 크기를 정합니다.
		initial : 기본값으로 설정합니다.
		inherit : 부모 요소의 속성값을 상속받습니다. 
	 -->
	 <style>
	 	div {
	 		margin-botton:20px;
	 	}
	 	.box1 {
	 		width:200px;
	 		height:100px;
	 		padding:20px;
	 		border:10px solid #ccc;
	 	}
	 	.box2 {
	 		box-sizing: border-box;
	 		witrh:200px;
	 		heigjt:100px;
	 		padding:20px;
	 		border:10px solid #00f;
	 	}
	 </style>
</head>

<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

창의 크기에 따라 파란 박스가 창 크기에 맞추어 변화함

  • css_02_box-width.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		div {
			border:2px solid #000;
			margin-bottom: 20px;
		}
		.box1 {
			width:400px;
			height: 100px;
		}
		.box2 {
			width:50%;
			height:100px;
		}
	</style>
</head>

<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

창의 크기에 따라 두번째 박스의 크기가 창의 크기의 절반으로 변화함

  • css_03_border.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<!-- 
		border: 테두리 두께 스타일 속성값 색상
		------------------------------------------------------
		4개 방향의 테두리 스타일이 같다면 순서는 상관이 없다.
		
		border-width 테두리 두께
		------------------------------------------------------
		border-width: 크기 | thin | medium | thick
		
		border-color 테두리 색상
		------------------------------------------------------
		
		border-collapse : table 요소의 테두리와 td(셀)의 테두리 사이의 간격을 지정
		------------------------------------------------------
		border-collapse: separate | collapse | initial | inherit
		separate	표의 테두리와 셀의 테두리 사이에 간격을 둔다.
					간격의 크기는 border-spacing 속성으로 지정
		collapse	표의 테두리와 셀의 테두리 사이에 간격을 없앤다. 겹치는 부분은 한 줄로 나타난다.
		initial		기본 값으로 설정한다.
		inherit		부모 요소의 속성값을 상속
		
		border-radius 둥근 테두리
		------------------------------------------------------
		border-radius : 크기 | 백분율
		크기 : 반지름 크기를 px, em 단위 수치로 표시
		백분율 : 현재 요소의 크기를 %(비율)로 지정
	 -->
	 <style type="text/css">
	 	p.dotted {
	 		border-style: dotted;
	 		border-width: 10px;
	 		border-color: red;
	 	}
	 	p.dashed {
	 		border-style: dashed;
	 		border-width: thick thin;
	 	}
	 	p.solid {
	 		border-style: solid;
	 		border-width: thick thin thin;
	 	}
	 	p.double {
	 		border-style: double;
	 		border-width: 10px 5px 5px 10px;
	 	}
	 	p.groove {
	 		border-style: groove;
	 		border-width: 10px;
	 		border-color: yellow;
	 	}
	 	p.ridge {
	 		border-style: ridge;
	 		border-width: 10px;
	 		border-color: yellow;
	 	}
	 	p.inset {
	 		border-style: inset;
	 		border-width: 10px;
	 		border-color: yellow;
	 	}
	 	p.outset {
	 		border-style: outset;
	 		border-width: 10px;
	 		border-color: yellow;
	 	}
	 	
	 	p.none {border-style: none;}
	 	
	 	p.hidden {border-style: hidden;}
	 	
	 	p.mix {border-style: dotted dashed solid double;}
	 	
	 	#round {border-radius: 25px;}
	 	
	 	#circle {border-radius: 80%;}
	 	div {
	 		width:200px;
	 		height:150px;
	 	}
	 	
	 	#round1 {
	 		border:2px solid blue;
	 		border-top-left-radius:20px; /* 왼쪽 위 꼭짓점만 둥글게 */
	 		border-top-right-radius:20px; /* 오른쪽 위 꼭짓점만 둥글게 */
	 	}
	 </style>
</head>

<body>
	<h2>The border-style 속성</h2>
	<p class="dotted">A dotted border. 테두리를 점선으로 표시</p>
	<p class="dashed">A dashed border. 테두리를 짧은 직선으로 표시</p>
	<p class="solid">A solid border. 테두리를 실선으로 표시</p>
	<p class="double">A double border. 테두리를 이중선으로 표시, 두 선 사이의 간격이 border-width</p>
	<p class="groove">A groove border. 테두리를 홈이 파인 듯 입체 느낌</p>
	<p class="ridge">A ridge border. 테두리를 창에서 튀어나온 것처럼 표시</p>
	<p class="inset">An inset border. 표에서 border-collapse:separate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시</p>
	<p class="outset">An outset border. 표에서 border-collapse:separate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시</p>
	<p class="none">No border. 테두리가 없음, 기본값</p>
	<p class="hidden">A hidden border. 테두리를 감춤, 표에서 border-collapse일 경우 디른 테두리도 표시하지 않음</p>
	<p class="mix">A mixed border.</p>
	
	<img src="/KosMember/img/img_css/cat.jpg">
	<img id="round" src="/KosMember/img/img_css/cat.jpg"><br>
	
	<img src="/KosMember/img/img_css/photo.jpg">
	<img id="circle" src="/KosMember/img/img_css/photo.jpg"><br>
	
	<div id="round1"></div>
</body>
</html>

5교시 (14:30-15:20)

  • google.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style type="text/css">
		div {
			box-sizing: border-box;
			width: 600px;
			height: 50px;
			margin: 250px;
			border: 1px solid red;
			
			border-radius:25px;
		}
		.msearch {
			box-sizing: border-box;
			width: 500px;
			height: 40px;
			margin: 4px 45px;
		}
	</style>
</head>

<body>
	<div>
		<input class="msearch" type="text" name="msearch" id="msearch">
	</div>
</body>
</html>

  • Context(KosMember)의 WEB-INF 폴더
    • web information. 정식 명칭. 바꿀 수 없음. 보안되고 있어 클라이언트 요청을 할 수 없음.
    • 스프링에서 경로를 찾기 어렵게 하기 위하여 JSP 파일을 여기에 두도록 되어 있음

6교시 (15:30-16:20)

  • css_04_margin_1.html ← 각 박스를 눌러보면서 마진 확인
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델 - 마진</title>
	<style>
		div {
			width:200px;
			height:100px;
			display:inline-block;
			border:1px solid #222;
		}
		#margin1 {
			margin:50px;
		}
		#margin2 {
			margin:30px 50px;
		}
		#margin3 {
			margin:30px 20px 50px
		}
		#margin4 {
			margin:30px 50px 30px 50px;
		}
		#margin5 {
			margin-right:20px;
		}
	</style>
</head>

<body>
	<div id="margin1">margin1</div>
	<div id="margin2">margin2</div>
	<div id="margin3">margin3</div>
	<div id="margin4">margin4</div>
	<div id="margin5">margin5</div>
</body>
</html>

  • css_04_margin-overlap.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>박스모델 - 마진 중첩</title>
	<style>
		* {
			box-sizing:border-box;
		}
		/*
		img {
			width:200px;
			height:100px;
			margin:30px;
			padding:30px;
		}
		*/
		div {
			width:200px; /* 너비 */
			height:100px; /* 높이 */
			margin:30px; /* 마진 */
			padding:30px; /* 패딩 */
		}
		#box1 {
			background:rgb(0, 77, 243);
		}
		#box2 {
			background:rgb(255, 72, 0);
		}
		#box3 {
			background:rgb(18, 219, 0);
		}
	</style>
</head>

<body>
	<img src="/KosMember/img/img_css/boxModel_1.png">
	<div id="box1">div1</div>
	<div id="box2">div2</div>
	<div id="box3">div3</div>
</body>
</html>

  • css_04_margin_3.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>상품 소개 페이지</title>
	<style>
		body {
			background-color:#222;
		}
		#container {
			background-color:#fff;
			width:600px;
			margin:20px auto;
			padding: 20px;
		}
		table, th, td {
			border: 1px solid #ccc;
			border-collapse: collapse;
		}
		th, td {
			padding: 10px 20px;
		}
	</style>
</head>
<body>
    <div id="container">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
      <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
      <hr>
      <h2>레드향 샐러드 레시피</h2>
      <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
      <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
      <ol>
        <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
        <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
        <li>드레싱 재료를 믹서에 갈아줍니다.</li>
        <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
      </ol>
      <hr>
      <h2>상품 구성</h2>
      <table>
        <caption>선물용과 가정용 상품 구성</caption>
        <colgroup>
          <col style="background-color:#eee;">
          <col>
          <col span="2" style="width:150px">
        </colgroup>
        <thead>
          <tr>
            <th>용도</th>
            <th>중량</th>
            <th>갯수</th>
            <th>가격</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">선물용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>35,000원</td>
          </tr>
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>52,000원</td>
          </tr>
          <tr>
            <td rowspan="2">가정용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>30,000원</td>
          </tr>   
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>47,000원</td>
          </tr>
        </tbody>        
      </table>
    </div>  
</body>
</html>

  • product-result.css
@charset "UTF-8";

table, th, td {
	border: 1px solid #ccc;
	border-collapse: collapse;
}
th, td {
	padding: 10px 20px;
}
#container {
	width:600px; /* 컨테이너의 너비 */
	border:none; /* 테두리 없앰 */
	margin: 0 autol /* 화면 중앙에 배치 */
}
div {
	border:1px dotted #222 /* 테두리 */
	padding: 20px; /* 패딩 */
	margin:20px; /* 마진 */
}
#description {
	border-top-left-radius:30px /* 왼쪽 위 모서리 라운딩 */
	border-top-right-radius:30px /* 오른쪽 위 모서리 라운딩 */
}
#package {
	border-bottom-left-radius:30px; /* 왼쪽 아래 모서리 라운딩 */
	border-bottom-right-radius:30px; /* 오른쪽 아래 모서리 라운딩 */
}
  • css_04_margin_4.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>상품 소개 페이지</title>
	<link rel="stylesheet" href="/KosMember/css/product-result.css">
</head>

<body>
  <div id="container">
    <div id="description">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
      <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    </div>
    <div id="receipe">
      <h2>레드향 샐러드 레시피</h2>
      <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
      <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
      <ol>
        <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
        <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
        <li>드레싱 재료를 믹서에 갈아줍니다.</li>
        <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
      </ol>
    </div>   
    <div id="package">
      <h2>상품 구성</h2>
      <table>
        <caption>선물용과 가정용 상품 구성</caption>
        <colgroup>
          <col style="background-color:#eee;">
          <col>
          <col span="2" style="width:150px">
        </colgroup>
        <thead>
          <tr>
            <th>용도</th>
            <th>중량</th>
            <th>갯수</th>
            <th>가격</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">선물용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>35,000원</td>
          </tr>
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>52,000원</td>
          </tr>
          <tr>
            <td rowspan="2">가정용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>30,000원</td>
          </tr>   
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>47,000원</td>
          </tr>
        </tbody>        
      </table>      
    </div>
  </div>
</body>
</html>

7교시 (16:30-17:20)

  • css_05_layout_1.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>CSS display 속성</title>
	<!-- 
		배치 방법을 결정하는 display 속성
		----------------------------
		display 속성은 웹 문서의 내비게이션을 만들면서
		메뉴 항목을 가로로 배치할 때, 이미지를 표 형태로 배치할 때 많이 사용한다.
		
		block	인라인 레벨 요소를 블록 레벨 요소로 만듬
		inline	블록 레벨 요소를 인라인 레벨 요소로 만듬
		inline-block	인라인, 블록 레벨 요소의 속성을 모두 가짐, 마진과 패딩을 지정할 수 있음
		none	해당 요소를 화면에 표시하지 않는다.
		
		왼쪽이나 오른쪽에 배치하는 float 속성
		---------------------------
		left
		right
		none
		
		float 속성을 해제하는 clear 속성
		---------------------------
		left
		right
		none
	 -->
	 
	 <style>
	 	* {
	 		box-sizing: border-box;
	 	}
	 	nav ul li {
	 		display: inline-block;
	 		padding: 20px;
	 		margin: 0 20px;
	 		border:1px solid #222222;
	 	}
	 </style>
</head>

<body>
	<nav>
		<ul>
			<li>menu 1</li>
			<li>menu 2</li>
			<li>menu 3</li>
			<li>menu 4</li>
		</ul>
	</nav>
</body>
</html>

  • css_06_float_1.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>CSS float 속성</title>
	<style>
		img {
			float:left; /* 왼쪽에 떠 있게 */
			margin-right:40px;
		}
	</style>
</head>

<body>
	<img src="/KosMember/img/img_css/tree.png">
	<p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
   	<p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
   	<p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>

  • css_06_float_2.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>CSS float 속성</title>
	<style>
		img {
			float:right; /* 오른쪽에 떠 있게 */
			margin-left:40px;
		}
	</style>
</head>

<body>
	<img src="/KosMember/img/img_css/tree.png">
	<p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
   	<p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
   	<p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>

  • css_06_float_3.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		div {
			padding:20px;
			margin:10px;
		}
		#box1 {
			background:#ffd800;
			float: left; /* 왼쪽으로 플로팅 */
		}
		#box2 {
			backfround:#0094ff;
			float: left; /* 왼쪽으로 플로팅 */
		}
		#box3 {
			 background: #00ff21;
		}
		#box4 {
			background:#a874ff;
			clear: left; /* 플로팅 해제 */
		}
	</style>
</head>

<body>
	<div id="box1">박스1</div>
	<div id="box2">박스2</div>
	<div id="box3">박스3</div>
	<div id="box4">박스4</div>
</body>
</html>

  • 2column-result.css
@charset "UTF-8";
* {  
  margin:0;  /* 브라우저 기본 마진 리셋 */
  padding:0;  /* 브라우저 기본 패딩 리셋 */
  box-sizing: border-box;  /* 테두리까지 포함해서 박스 모델 너비로 계산 */
}
#container {
  width:1200px;   /* 내용 전체의 너비 */
  margin:20px auto;  /* 내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */
}
#header{
  width:100%;  /* 부모 요소의 너비와 똑같게 */
  height:120px;  /* 헤더의 높이 */
  background-color:#acacac;
}
#sidebar{
  width:300px;  /* 사이드바의 너비 */
  height:600px;  /* 사이드바의 높이 */
  background-color:#e9e9e9;
  float:left;  /* 왼쪽으로 플로팅 */
}
#contents {
  width:900px;  /* 본문의 너비 */
  height:600px;  /* 본문의 높이 */
  background-color:#f7f7f7;
  float:left;  /* 왼쪽으로 플로팅 */
}
#footer {
  width:100%;  /* 부모 요소의 너비와 똑같게  */
  height:100px;  /* 푸터의 높이 */
  background-color:#888888;
  clear:left;  /* 플로팅 해제 */
}
  • css_06_float_4.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>CSS 레이아웃 - 2단 레이아웃</title>
	<link rel="stylesheet" href="/KosMember/css/2column-result.css">
</head>

<body>
	<div id="container">
		<header id="header">
			<h1>사이트 제목</h1>
		</header>
		<aside id="sidebar">
			<h2>사이드바</h2>
		</aside>
		<section id="contents">
			<h2>본문</h2>
		</section>
		<footer id="footer">
			<h2>푸터</h2>
		</footer>
	</div>
</body>
</html>

  • 3column-result.css
@charset "UTF-8";
* {  
  margin:0;  /* 브라우저 기본 마진 리셋 */
  padding:0;  /* 브라우저 기본 패딩 리셋 */
  box-sizing: border-box;  /* 테두리까지 포함해서 박스 모델 너비로 계산 */
}
#container {
  width:1200px;   /* 내용 전체의 너비 */
  margin:20px auto;  /* 내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */
}
#header{
  width:100%;  /* 부모 요소의 너비와 똑같게 */
  height:120px;  /* 헤더의 높이 */
  background-color:#acacac;
}
#left-sidebar {
  width: 250px;   /* 사이드바의 너비 */
  height:600px;  /* 사이드바의 높이 */
  background-color:#e9e9e9;
  float: left;  /* 왼쪽으로 플로팅 */
}
#contents {
  width: 800px;  /* 본문의 너비 */
  height:600px;   /* 본문의 높이 */
  background-color:#f7f7f7;
  float: left;  /* 왼쪽으로 플로팅 */
}
#right-sidebar {
  width: 150px;   /* 사이드바의 너비 */
  height:600px;  /* 사이드바의 높이 */
  float: left;  /* 왼쪽으로 플로팅 */
  background-color:#e9e9e9;
}
#footer {
  width:100%;  /* 부모 요소의 너비와 똑같게  */
  height:100px;  /* 푸터의 높이 */
  background-color:#888888;
  clear:left;		/* 플로팅 해제 */
}
  • css_06_float_5.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>CSS 레이아웃 - 3단 레이아웃</title>
	<link rel="stylesheet" href="/KosMember/css/3column-result.css">
</head>
<body>
	<div id="container">
		<header id="header">
			<h1>사이트 제목</h1>
		</header>
		<aside id="left-sidebar">
			<h2>사이드바</h2>
		</aside>
		<section id="contents">
			<h2>본문</h2>
		</section>
		<aside id="right-sidebar">
			<h2>사이드바</h2>
		</aside>
		<footer id="footer">
			<h2>푸터</h2>
		</footer>
	</div>
</body>
</html>

8교시 (17:30-18:30)

  • 자습

Notes

728x90
저작자표시

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

22-04-08(금) 050일차 [HTML, CSS, JSP] 어제 했던 선택자 부분 보완 및 추가와 JSP 개요  (0) 2022.05.24
22-04-07(목) 049일차 [HTML, CSS] CSS의 position, table, selector, 부트스트랩  (0) 2022.05.24
22-04-05(화) 047일차 [CSS] CSS 인라인 스타일, 외부 스타일 시트 적용하기  (0) 2022.05.24
22-04-04(월) 046일차 [Java, Oracle, HTML] 지난 금요일에 주신 자료 그대로 타이핑하기  (0) 2022.05.24
22-04-01(금) 045일차 [Java, Oracle, HTML, JavaScript] 미니 프로젝트  (0) 2022.05.17

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

  • 현재글22-04-06(수) 048일차 [HTML, CSS] 웹에서 데이터를 가져오기, CSS margin과 float 조절

관련글

댓글

티스토리툴바