캡슐화(Encapsulation)

      -   멤버 변수에 private 접근 지정자를 붙이고 멤버변수에 접근할 수 있는 메소드를 구현한다. => setter / getter
           class 내 변수를 private으로 설정하고 set, get method를 이용해 접근할 수 있게 해야한다.

setXXX : 반환타입은 void, 매개변수를 받아들인다. (멤버변수)
getXXX : 반환타입을 지정해야 하며, 매개변수는 받지 않는다. 
나중에 JSP에 가게 되면 setter getter가 없으면 프로그램이 시작되지 않는 기능이 있다.
개발자들 사이의 규칙이다.

package day11;

public class Cafe {

	public static void main(String[] args) {
		CoffeeMachine cm = new CoffeeMachine();
		
		cm.setCoffee(3);
		
		int a = cm.getCoffee();
		System.out.println(a);
	}

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

package day11;

public class CoffeeMachine {
	private int coffee;
	private short sugar;
	private long cream;
	
	
	//setXXX : 반환타입은 void, 매개변수를 받아들인다. (멤버변수)
	public void setCoffee(int c) {
		coffee = c;
	}
	
	//getXXX : 반환타입을 지정해야 하며, 매개변수는 받지 않는다.
	public int getCoffee() {
		return coffee;
	}
	
}

UML
class를 만들고 할 때 다음과 같은 프로그램(StarUML)을 이용해 설계를하고 진행한다.

diagram으로 설계 후 java code로 생성 버튼을 누르면 자동으로 뼈대를 생성해준다.
capsule -로 만든다.

명령줄 인수
java를 실행할 때 args를 통해서 명령줄 인수를 할 수 있다.

package day11;

public class ArgsTest {
	
	//명렬줄 인수
	public static void main(String[] args) {
		String animal = args[0];
		
		System.out.println(animal);
		if(animal.equals("강아지")) {
			System.out.println("멍멍");
		}else if(animal.equals("호랑이")) {
			System.out.println("어흥");
		}
	}
}

//boolean equals(Object anObject)
// 문자열의 내용이 같으면 true를 반환 다르면 false를 반환 한다.(문장ㄹ 내용비교를 함)
//boolean equalsIgnoreCase(String anotherString)
//대소문자 구분 안 하고 비교

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

img css float
: 인라인 요소. 스타일시트를 이용해서 이미지 옆에 텍스트를 배치해봅시다. 이 때 사용하는 속성은 float입니다. float은 하나의 라인에 이미지와 텍스트가 함꼐 있을 때. 이미지 왼쪽이나 오른쪽에 배치하고, 나머지 글씨들이 이미지 주변으로 흐르도록 하는 속성. 이미지 뿐 아니라 모든 Block요소에 대해 float 속성을 사용할 수 있으며, 속성값으로는 none, left, right를 줄 수 있다.

float을 해제하고자 할 떄 사용하는 속성은 clear이다. 속성값으로 left, right, both, none을 줄 수 있다. float:left를 취소하려면 clear:left, float:right를 취소하려면 clear:right,clear:both는 left,rigth를 취소 할 수 있다.
 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>ex31이미지관련스타일.html</title>
  <style>
  img{
	width : 100px;
	height: 100px;
	border-radius :50%;
	float : left;
  }
  </style>
 </head>
 <body>
  <img src="images/little.png">: 인라인 요소. 스타일시트를 이용해서 이미지 옆에 텍스트를 배치해봅시다. 이 때 사용하는 속성은 float입니다. float은 하나의 라인에 이미지와 텍스트가 함꼐 있을 때. 이미지 왼쪽이나 오른쪽에 배치하고, 나머지 글씨들이 이미지 주변으로 흐르도록 하는 속성. 이미지 뿐 아니라 모든 Block요소에 대해 float 속성을 사용할 수 있으며, 속성값으로는 none, left, right를 줄 수 있다.
  <hr color="blue">
  <hr color="red" style="clear:left">  <!--블럭요소-->
  <img src="images/button.png">float을 해제하고자 할 떄 사용하는 속성은 clear이다. 속성값으로 left, right, both, none을 줄 수 있다. float:left를 취소하려면 clear:left, float:right를 취소하려면 clear:right,clear:both는 left,rigth를 취소 할 수 있다.
 </body>
</html>


div position

position 위치 지정 방식 : CSS3 레이아웃에서 매우 중요하고 자주 사용되는 개념 

absolute         절대 위치 
상위 부모 엘리먼트를 기준으로 위치 지정 상위 박스 위치가 바뀌면 따라서 위치 이동됨 다른 박스와 독립적이며 다른 박스와 중첩 가능 

fixed             고정 위치             
웹 브라우저 창을 기준으로 위치 지정 페이지 안의 다른 박스와 독립적이며 중첩 가능 

static              정적 위치 
웹 문서에 나열된 엘리먼트 순으로 위치 지정(표준 방식) 다른 박스와의 앞뒤 순서관계를 유지하며 중첩 불가능 표시 후 이동 불가 

relative           상대 위치
엘리먼트 자신의 원래 정적 위치를 기준으로 상대적인 위치 지정 다른 박스와 독립적

z-index:
값이 클수록 레이어 계층에서 위에 존재한다.

시맨틱 태그

HTML5 : 웹 페이지 구성 방식의 변화도 포함  문서에 정보의 의미도 함께 고려하도록 함 

태그를 세분화하여 각 태그에 의미를 부여함으로써 페이지를 의미 단위로 분할
 시맨틱 태그(semantic tag)
-태그만으로 문서를 쉽게 이해할 수 있도록 의미를 부여한 새로운 태그
-어떤 표현이나 행위를 지시하기 보다는 웹 문서의 내용이 담고 있는 의미를 명확히 전 달할 목적으로  만들어진 태그 
다음에 오는 것 전부 div 이지만 태그이름만 다르게 한 것이다.

<header>, <nav>, <aside>, <section>, <article>, <footer>

header : 문서의 로고, 검색폼, 목차 등이 모여 있는 곳
nav : 네비게이션 바
article : 주된 컨텐츠가 들어감
aside : 사이드 영역
footer : Copyright

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>ex34layout</title>
  <link rel="stylesheet" type="text/css" href="layout.css">
 </head>
 <body>
 <!--헤더 -->
 <div id="wrap">
  <header>
	<img src="images/logo.png"></img>
  </header>
  <div class="clear">
  </div>
  <nav>
	<ul>
	<li><a href="index.jsp">HOME</a></li>
	<li><a href="join.jsp">SignUp</a></li>
	<li><a href="login.jsp">Signin</a></li>
	</ul>
  </nav>
  <div class="clear">
  </div>
  <article>
  <hgroup>
  <h1>HTML5와 CSS3.0을 이용한 웹사이트</h1>
  <h2>여기는 article태그 안입니다.</h2>
  </hgroup>
	<p>
	HTML과 CSS등을 이용해서 웹페이지를 구성
	</p>
	<section>
	<h2>SECTION 부분</h2>
	시맨틱 태그는 다음과 같습니다.<br>
	header, nav, article, aside, section, footer
	</section>
	<section>
		<h2>SECTION 부분</h2>
	시맨틱 태그는 다음과 같습니다.<br>
	header, nav, article, aside, section, footer
	</section>
	<div class="clear"></div>
		<section>
		<h2>SECTION 부분</h2>
	시맨틱 태그는 다음과 같습니다.<br>
	header, nav, article, aside, section, footer
	</section>
		<section>
		<h2>SECTION 부분</h2>
	시맨틱 태그는 다음과 같습니다.<br>
	header, nav, article, aside, section, footer
	</section>
  </article>
  <aside>  
  <nav>
  <ul>
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu4</a></li>
  </ul>
  </nav>
  </aside>
	<div class="clear"></div>
	<footer>Copyright</footer>
	</div>
 </body>
</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
@CHARSET "UTF-8";
/*layout.css*/

body{
	font-family : verdana, "dotum";
	color: navy;
	font-size: 15px;
}
#wrap{
	width: 640px;
	margin: 0 auto; /*바깥 여백 상하: 0 좌우:자동 */
}
.clear{
	clear : both;
	/*불필요하게 교차된 박스를 분리해주는 역할을 함*/
}
header{
	padding: 20px;
	width: 600px;
	margin-top : 10px;
	border: 1px solid rgba(202,202,100,1);
	border-radius: 5px; /*모서리 라운드 처리*/
}
/*네비게이션 영역에 대한 스타일 다른 페이지로 이동할 수 있는 링크가 모여있음*/
nav{
	width: 630px;
	background-color:rgba(225,232,247,0.5);
	padding: 5px;
	margin: 5px 0;
	border-radius: 5px;
	height: 30px;
}
nav ul{
	list-style:none; /*목록 스타일을 제거*/
	margin:0;
	padding:0;
}
nav ul li{
	float: left; /*메뉴가 좌->우 배치되도록*/
	padding: 0 5px 0 0;/*오른쪽 안쪽여백 5px*/
}

nav ul li a{
	text-decoration : none;
	display: block; /*링크 걸린 부분 블럭 지정하여 공간 확보*/
	padding: 1px 20px 3px 20px;
	color:rgba(50,50,50,1);
}

nav ul li a:hover{
	background-color: rgba(102,153,255,1);/*마우스 오버시 배경색*/
	color: rgba(255,255,255,1);
	border-radius: 5px;
	height:20px;
}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
article{
	border: 1px solid;
	border-radius: 5px;
	margin: 5px 0;
	padding :10px;
	width: 67%;
	height: 400px;
	float:left;
	overflow: auto;
}
article hgroup{
	padding : 8px;
}
article hgroup h1,article hgroup h2{
	margin:0;
	padding: 2px 0;
	text-align: center;
}
article hgroup h1{
	font-size: 26px;

}
article hgroup h2{
	font-size: 20px;
}
section{
	width: 150px;
	padding:10px;
	margin: 10px;
	border : 1px solid rgba(102,102,102,1);
	border-radius: 5px;
	word-wrap: break-word;
	float: left;
	/*박스 길이를 넘어선 문자열들이 다음 줄로 자리하도록*/
}
section h2{
	font-size:18px;
	padding: 5px;
	margin: 0;
	color: maroon;
}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
aside{
	border: 1px solid;
	border-radius: 5px;
	margin: 5px 0;
	padding :10px;
	width: 25%;
	height: 400px;
	float:right;
}
aside nav{
	border: none;
	background: none;
}
aside nav ul{
	list-style-type:none;
}
aside nav ul li{
	clear: both;
	padding: 0 5px;
}
aside nav ul li a{
	width:80px;
	padding: 5px 0 ;
}
aside nav ul li a:hover{
	background-color: transparent;
	color:green;
	font-weight: bold
}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
footer{
	border : 1px solid green;
	border-radius:5px;
	margin : 5px 0;
	padding : 10px 20px;
	font-size: 13px;
}

 

저작자표시

'개발자 > 국비지원 SW' 카테고리의 다른 글

국비지원 13일차 - 상속, 오버라이딩, super, 다형성, GUI(awt), SQL문(DDL, DML, DQL)  (2) 2020.04.28
국비지원 12일차 - 다형성(오버로딩), 생성자, this(), OracleSQL, SQLDeveloper  (0) 2020.04.27
국비지원 10일차 - 참조유형의 배열, for each문, OOP, 추상화  (0) 2020.04.23
국비지원 9일차 - eclipse 설치 및 사용, 배열, border style, 하이퍼링크 스타이, button  (0) 2020.04.22
국비지원 8일차 - method(가위바위보), 클래스 멤버(변수), CSS table 위치, Integer api 이용 예제  (0) 2020.04.21

+ Recent posts

티스토리툴바