분류 전체보기 424

JAVA Eclipse 21 인스턴스 변수와 클래스 변수

인스턴스 변수 : 객체마다 갖는 고유한 변수 인스턴스를 생성할 때 만들어지며, 각각의 인스턴스마다 자신의 값을 가지고 있다 각 인스턴스마다 다른 값을 가져야 할 때 생성 인스턴스 생성 시(new 클래스명();) 메모리에 생성 class 클래스명{ 자료형 변수명; } * 기존방식과 동일 클래스 변수 : 모든 객체가 동일한 값을 갖는 변수 모든 인스턴스가 같은 저장공간을 공유 클래스가 처음 메모리에 로딩될 때 생성 인스턴스 없이 사용 가능 class 클래스명 { static 자료형 변수명; } * 변수 선언 시 자료형 앞에 static키워드를 붙인다 ex1. 회원정보를 저장하는 Member클래스를 생성 centerName의 값을 static으로 지정해 주면, 이 값은 인스턴스 변수가 아닌 클래스 변수가 된다..

JAVA Eclipse 20 클래스와 객체

클래스 Class : 객체를 만들기 위한 설계도 객체지향 언어 : 코드를 객체로 만들어 재사용하겠다 -> 코드를 객체로 만드는 방법 : 클래스 클래스 클래스는 구현하고자 하는 객체의 속성과 기능들을 정의하는 설계도 따라서 속성은 변수로, 기능은 메서드(함수)로 나타낸다 클래스의 구조 class 클래스명 { 속성 (변수) 기능(메서드) } * 클래스명의 앞 글자는 대문자로 main이 있는 class만 public이 붙고 나머지는 붙지 않는다 클래스로 객체를 만드는 방법 자료형 참조변수 = new 클래스명 ( ); * 참조변수 : 클래스로 생성된 객체 값(인스턴스) 저장할 공간 ; 주소를 저장 * new : 메모리 할당 * 클래스명 ( ) : 클래스로 객체를 만들어라 -> 클래스로 객체 값을 만들 메모리를 ..

CSS 부트스트랩 bootstrap 프론트엔드 툴 사용하기 - 세팅 및 적용

프론트엔드 기본 툴 세팅 : component를 사용하기 위한 기본 세팅 부트스트랩 프론트엔드 툴 접속 https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr 버전 충돌을 막기 위해 5이하 버전으로 다운로드 Download > Download 다운로드 페이지에서 파일 다운로드 다운로드받은 파일의 압축을 풀고 해당되는 파일을 Eclipse resources폴더에 넣음 bootstrap.min.css파일과 bootstrap.min.js파일을 각각 폴더를 생성해 넣어줌 메인페..

Backend/HTML, CSS 2023.05.03

CSS 스타일, 속성 - 플렉스 레이아웃

CSS 스타일, 속성 - 플렉스 레이아웃 플렉스 레이아웃 : 그리드 레이아웃을 기본으로 플렉스박스를 원하는 위치에 배치하는것. Document display : 배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정 display : flex | inline-flex flex - 플렉스 박스를 박스레벨 요소로 정의 inline-flex : 플렉스박스를 인라인 레벨요소로 정의 display 속성과 브라우저 접두사 - 최신 모던 브라우저는 모두 지원 된다 - 하지만 브라우저마다 플렉스 박스 지원을 하는방법이 달라 브라우저 접두사를 붙여야 한다 display: -webkit-box; /* ios 6이하 , 사파리 3.1*/ display: -moz-box; /* 파이어 폭스 19이하 */ display: -..

Backend/HTML, CSS 2023.05.03

CSS 스타일, 속성 - 캡션, 셀, 정렬

CSS 스타일, 속성 - 캡션, 셀, 정렬 caption-side : 캡션(설명글)은 기본으로 표 위쪽에 표시됨 이 속성을 이용해 아래쪽에 표시 가능 caption-side: top | bottom border - 표의 바깥 테두리와 셀 테두리 모두 지정해야 함 ex. caption-side - 캡션(설명글)은 기본으로 표 위쪽에 표시됨. 프로축구 경기 일정 울산 울산 vs 인천 부산 부산 vs 대전 서울 서울 vs 강원 출력화면 border-collapse : 표 테두리와 셀 테두리를 합칠 것인지 설정 border-collapse : collapse | separate collapse - 테두리를 하나로 합쳐 표시 separate - 테두리를 따로 표시 기본값 ex. border-collapse - 표..

Backend/HTML, CSS 2023.05.03

CSS 스타일, 속성 - CSS Positioning

CSS 포지셔닝 : CSS에 웹 문서 요소를 적절히 배치하는 것 box-sizing : 박스 모델 너비 값의 기준을 지정함 box-sizing: content-box | border-box content-box - width 속성값을 콘텐츠 영역 너비 값으로 사용 기본값 border-box - width 속성 값을 콘텐츠 영역에 테두리 까지 포함한 박스모델 전체 너비값으로 사용 CSS를 이용해 여러 박스 모델을 화면상에 배치하려면 박스 모델의 너비 값을 정확히 계산해야 함 width 값을 계산하기 어렵다면 box-sizing:border-box;로 지정해 박스 모델 너비를 알기 쉽게 바꾸어 놓는 것도 좋은 방법 ex. box-sizing 속성 - 박스 모델 너비 값의 기준을 지정함 box-sizing =..

Backend/HTML, CSS 2023.05.03

CSS 스타일, 속성 - 패딩 padding, 마진 margin

패딩 padding, 마진 margin Document margin : 요소와 요소 사이 여백 현재 요소 주변의 여백 마진을 이용하면 요소와 요소 간의 간격 조절 가능 margin-top: 크기 | 백분율 | auto margin-left: 크기 | 백분율 | auto margin-right: 크기 | 백분율 | auto margin-bottom: 크기 | 백분율 | auto margin: 크기 | 백분율 | auto ex. margin 속성 - 요소와 요소 사이 여백 출력화면 padding : 콘텐츠 영역과 테두리 사이의 여백(테두리 안쪽 여백) padding-top: 크기 | 백분율 | auto padding-left: 크기 | 백분율 | auto padding-right: 크기 | 백분율 | aut..

Backend/HTML, CSS 2023.05.03

CSS 스타일, 속성 - 테두리, 두께, 색상, 그림자 효과

CSS 테두리, 두께, 색상, 그림자 효과 border-style : 테두리 스타일 기본 값이 none : 화면에 테두리 표시안됨 테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정 border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid; none - 없음 . 기본값 hidden - 테두리가 나타나지 않음 border-collapse:collapse일 경우 다른테두리도 표시되지 않는다. dashed - 직선으로 된 점선 dotted - 점선 double - 이중선 ..두선 사이의 간격은 border-width값으로 지정 groove - 테두리를 창에 조각한것처럼 표시..홈이 파인듯..

Backend/HTML, CSS 2023.05.03

CSS 스타일, 속성 - 웹의 영역 요소 : 블록, 인라인, 박스 모델

웹의 영역 요소 : 블록 레벨 요소, 인라인 레벨 요소, 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 요소의 너비가 100% 예) , 등 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 예) , 등 박스 모델 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨. 개발자 도구 창에서 박스 모델 확인 가능 width, height : 실제 콘텐츠 영역의 크기를 지정. width : 크기 | 백분율 | auto height : 크기 | 백분율 | auto 실제 콘텐츠 너비 계산 모던 브라우저에서 박스 모델의 전체 너비 = width ..

Backend/HTML, CSS 2023.05.03

CSS 스타일, 속성 - 그라데이션

그라데이션과 브라우저 접두사 : 그라데이션은 크기가 없는 배경 이미지이므로 background-image나 background 속성에서 사용 그라데이션 속성은 표준화되었으나 구형 모던 브라우저에서는 브라우저 접두사를 붙여야 동작함 webkit : 사파리 5.1 ~ 6.0 mox : 파이어폭스 3.6 ~ 15 o : 오페라 11.1 ~ 12.0 선형 그라데이션 : 수직 방향이나 수평 방향으로, 혹은 대각선 방향으로 색상이 일정하게 변하는 것 선형 그러데이션을 지정할 때는 방향과 색상이 필요하다 linear-gradient( 각도 to 방향 , color-stop , [color-stop,...]); 위 구문이 표준 구문이지만 ‘위치’와 ‘각도’를 표시하는 방법이 중간에 몇 번 바뀌다 보니 브라우저별, 버전..

Backend/HTML, CSS 2023.05.03