반응형

git의 기본 명령어를 알아보고 실습해보기!

 

git init : 로컬 저장소 만들기

 

git init 명령어는 깃 저장소를 만드는 명령어 입니다.

원하는 경로 폴더안에서 오른쪽마우스 -> Git Bash Here 선택
git bash에 현재경로가 표시되어야 합니다

또는 시작메뉴에서 git bash를 열어 실행도 가능합니다.

이 경우 cd 명령어를 사용하면 됩니다. cd <경로> 는 해당 경로로 이동하라는 명령어 입니다.

예를들어 C드라이브에 git_test라는 폴더로 이동하고 싶을 경우

cd c:\git_test를 입력하면 됩니다.

 

또한 현재 경로를 확인하는 명령어는 pwd 명령어 입니다.

pwd 명령어를 사용하면 현재경로를 보여줍니다.

git bash에 git init을 입력해보자.

 

Initialized empty Git repository in <경로> 가 뜨면 성공적으로 저장소가 만들어진것이다.

 

해당 폴더를 확인해보면 .git 폴더가 생성된 것을 확인할 수 있다.

 

 

git status : 작업 디렉터리 상태 확인

저장소를 생성하였으면 이제 버전을 관리할 대상을 생성해보자.

테스트를 위해 git 저장소가 생성된 폴더 안에 A가 적힌 a.txt 파일을 만들어보자.

파일을 생성하였으면 알아야할 중요한 명령어가 있다. 바로 git status라는 명령어이다. 

git status 명령어는 현재 작업 디렉토리의 상태를 보여주는 명령어이다. 다음 명령어를 사용하면 아래와 같은 결과가 나옵니다.

 

명령어를 자세히 보면

on branch master는 현재 기본 브렌치, master 브렌치에 있다는 의미입니다.

그리고 아래줄에 no commits yet의 경우 아직 아무런 커밋을 하지 않았다는 의미입니다.

그리고 untracked files: 는 깃이 기존에 변경 사항을 추적하지 않은 대상을 보여줍니다.

아래에 보면 붉은색 글씨로 a.txt가 표시된 것을 볼 수 있습니다.

기존에 관리한 적 없었던 a.txt라는 새로운 파일이 생성되었음을 알려주는 것입니다.

 

git add : 스테이지에 올리기

이제 a.txt 파일을 스테이지에 올려보자.

명렁어 git add <추가할 대상> 을 이용할 수 있다.

add 명령어를 실행 후 다시 git status 명령어를 실행하면

 

changes to be committed 항목에 a.txt 가 표시되었다면 성공적으로 스테이지에 올라간 것임을 알 수 있다.

그런데 만약 스테이지에 올릴 파일들이 많다면? 하나씩 git add <파일명>을 입력하는 것은 엄청 귀찮은 일이다.

이럴 경우 git add * 또는 git add . 명령어를 사용하면 전체파일을 스테이지에 한꺼번에 올릴 수 있다.

그럼 git add * / git add . 차이점은 무엇일까?

  • git add . : .gitignore에 기재된 것 고려하여 모두 추가
  • git add * : .gitignore에 기재된 것 상관없이 모두 추가

사용 할때는 git add . 명령어를 사용하는 것이 좋다.

 

git commit : 커밋하기

스테이지에 변경 사항을 추가했으면 이제 커밋을 하면 된다.

앞서 스테이지에 올린 a.txt 파일을 커밋해보자.

커밋해서 새로운 버전을 만드는 명령어는 git commit -m"커밋 메세지" 또는 git commit --message"커밋 메세지" 이다.

 

첫 커밋 메세지로 first commit 이라는 메세지를 입력해보자.

명령어를 입력하면 위와 같이 나오면 성공적으로 커밋된 것이다.

 

버전이 잘 만들어졌는지 확인해 보기 위해서는 git log 명령어를 사용하여 확인해보자

 

앞서 만든 파일을 스테이지로 올리는 명령어가 git add 명령어이고 이것을 버전으로 만드는 명령어가 git commit -m"커밋메세지" 명령어 입니다. 이 두 명령어를 합쳐 git commit -am"커밋 메세지" 로 사용할 수도 있습니다.

 

다음으로 깃 저장소가 있는 폴더로 가서 a.txt 파일에 B를 추가로 적어 저장해보자.

 

다음으로 git status 명령어를 사용하여 상태를 확인해보면

 

modified 항목에 a.txt가 생긴 것을 확인할 수 있습니다. 이는 a.txt 파일이 수정되었음을 의미합니다.

 

이 수정된 파일을 새 버전으로 만들려면 이를 스테이지에 추가 -> 커밋해야한다.

 

앞서 추가+커밋할 수 있는 명령어인 git commit -am"커밋메시지" 를 사용해보자

 

 

그리고 git log 명령어를 이용하여 커밋 목록을 확인해보면 두번째 커밋도 성공적으로 수행된 것을 확인할 수 있다.

 

여기서 주의해야 할 사항이 있는데 git commit -am"커밋메시지" 명령어를 사용하기 위한 조건이 있는데 다음과 같다.

git commit -am"커밋메시지" 명령어는 깃이 변경 사항을 추적하는 파일에만 적용이 가능하다.

스테이지에 이미 올라와 있거나 한 번이라도 커밋한 적이 있는 파일에만 사용할 수 있다.

기존에 변경 사항을 추적하지 않은 파일은 이 명령어를 사용할 수 없다.

 

예를 들어 새로운 파일 b.txt 파일을 만들어 보면

git bash에서 git status 명령어를 사용하면 Untracked files 항목에 b.txt 가 보인다.

이 파일은 기존에 깃이 변경사항을 추적하지 않은 새로운 파일이라는 뜻이다.

여기서 git commit -am"third commit" 명령어를 입력하게 되면 깃이 변경사항을 추적하지 않았던 파일이라 add와 commit를 수행하지 못했다라는 메시지가 뜨게 된다.

반응형

'Git' 카테고리의 다른 글

[git] git 저장소 만들기 / 명령어  (0) 2023.08.07
[git] Git이란 무엇인가?  (0) 2023.08.07
반응형

<!-- 18_exam_menu.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/18_exam_menu.css">
</head>
<body>
    <!-- 최상단 메뉴(좌 로고 , 우 소메뉴) 시작-->
    <!-- float 쓰면 공간이 없는것으로 html 간주 -->
    <div id="head">
        <!-- 좌측 로고 이미지 -->
        <div id="logo">
            <img src="./img/logo.png" alt="회사로고">
           
        </div>
        <!-- 우측 소메뉴 -->
        <div id="top">
            로그인 | 회원가입 | 공지사항
        </div>
    </div>
    <!-- 최상단 메뉴(좌 로고 , 우 소메뉴) 끝-->

    <!-- 하단 대메뉴 시작 -->
    <ul id="menu">
        <li class="item">HTML</li>
        <li>|</li>
        <li class="item">CSS</li>
        <li>|</li>
        <li class="item">Javascript</li>
        <li>|</li>
        <li class="item">Python</li>
        <li>|</li>
        <li class="item">PHP</li>
        <li>|</li>
        <li class="item">Java</li>
    </ul>
    <!-- 하단 대메뉴 끝 -->

</body>
</html>

 

/* 여백초기화 */
* {
  padding: 0;
  margin: 0;
}

/* 리스트 점 없애기 */
li {
  list-style-type: none;
}

/* 로고수정 */
#logo {
  /* 왼쪽배치 */
  float: left;
  /* 바깥여백 */
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 10px;
  /* 외곽선 */
  border: 1px solid red;
}

/* 소메뉴 수정 */
#top {
  /* 오른쪽 배치 */
  float: right;
  /* 바깥여백 */
  margin-top: 30px;
  margin-right: 20px;
  /* 외곽선 */
  border: 1px solid red;
}

#menu li {
    /* 대메뉴 가로배치 */
  display: inline-block;

}

#menu {
  /* 배경색 */
  background-color: #443e58;
  /* 높이 */
  height: 40px;
  /* 폰트사이즈 */
  font-size: 20px;
  /* 안쪽여백 */
  padding-top: 15px;
  /* 글자 중앙정렬 */
  text-align: center;
  /* float 영향 제거 */
  clear: both;
  /* 폰트색상 */
  color: white;
}

/* 대메뉴 간격조정 */
.item{
    margin-right: 30px;
    margin-left: 30px;
}
반응형

'CSS > CSS 실습' 카테고리의 다른 글

[CSS] float 실습예제  (0) 2023.08.10
[CSS] display 실습  (0) 2023.08.10
[CSS] 웹 폰트 적용 예제  (0) 2023.08.09
[CSS] 테이블 스타일 적용  (0) 2023.08.09
[CSS] 배경이미지 연습문제  (0) 2023.08.08
반응형

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/17_center.css">
</head>
<body>
    <div class="container">
        <h1>요소의 중앙 배치</h1>
    </div>
</body>
</html>
  • 주황색 박스를 중앙으로 위치 시키기 위해서는 position : absolute 를 사용한다

  • 적용했을경우 주황색박스의 왼쪽 상단 꼭짓점이 중앙으로 위치하게 되어 박스의 중심이 화면의 중앙에 위치하지 않게 된다.
  • 이럴 경우 애니메이션 함수를 사용해준다.
  • 박스의 가로/세로 크기의 반만큼 위치이동해야 중심이 중앙에 위치하게 된다.
  • transform: translate(가로크기, 세로크기);
body{
    background-color: pink;
}

.container{
    width: 500px;
    height: 250px;
    background-color: orange;
    /* position을 이용한 중앙배치 */
    position: absolute;
    /* 왼쪽 */
    left: 50%;
    /* 위쪽 */
    top: 50%;
    transform: translate(-50%, -50%);

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 애니메이션  (0) 2023.08.16
[CSS] one true layout  (0) 2023.08.14
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
[CSS] display 속성 (2)  (0) 2023.08.10
반응형
절대좌표(absolute)
  • 웹브라우저 화면에 좌표가 생김
  • left / top을 이용해서 태그를 이동시킬 수 있음
  • 참고 position:static(기본, 생략, 좌표없음)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/12_position_absolute.css">
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    /* 절대좌표(absolute)를 설정해야 좌표 설정이 가능 */
    position: absolute;
    /* 왼쪽(x좌표) */
    left: 0;
    /* 위쪽(y좌표) */
    top: 0;
    /* 겹칠때 위에 올라오도록 우선순위를 정하는 속성 */
    /* 규칙 : 수치가 클수록 위, 작을 수록 아래로 */
    z-index: 30;
}

.box2{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    left: 40px;
    top: 40px;
    z-index: 20;
}

.box3{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    left: 80px;
    top: 80px;
    z-index: 10;
}


절대좌표는 웹브라우저 화면 기준이다.
position: absolute 선언 후
left: 값;
top: 값;
을 입력한다.

만약 태그 속성들이 겹친다면 우선순위를 주는 속성
z-index: 값; 을 설정해주면되고
값은 적절한 수를 입력해주면 된다.
값이 클수록 제일 위로 올라오게 되고 작은 값이 아래로 내려간다.

 

 

상대좌표(relative)
  • 상대좌표는 웹브라우저 화면 기준이 아닌 태그 기준으로 좌표를 설정한다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/13_position_relative.css">
</head>
<body>
    <p>안녕하세요, 홍길동입니다.</p>
    <p>안녕하세요, 홍길동입니다.</p>
    <p>안녕하세요, 홍길동입니다.</p>
    <div class="abox"></div>
    <div class="rbox"></div>
</body>
</html>
/* 상대 좌표(relative) 예제 */
/* 특징 : 현재 태그가 있는 위치부터 (0, 0) 시작됨 */
/* vs 절대좌표(0, 0) : 웹브라우저 왼쪽/위 모서리 부터) */

/* 절대좌표로 설정된 박스 */
/* 절대좌표는 태그를 무시 */
.abox{
    width: 100px;
    height: 100px;
    background-color: red;
    /* 절대좌표 */
    position: absolute;
    /* 왼쪽(x)/위쪽(y) */
    left: 0;
    top: 0;
}

/* 상대좌표로 설정된 박스 */
/* 상대좌표는 태그를 인식하여 좌표를 지정 */
.rbox{
    width: 100px;
    height: 100px;
    background-color: blue;
    /* 상대좌표 */
    position: relative;
    /* 왼쪽(x)/위쪽(y) */
    left: 0;
    top: 0;
}

Red 박스는 절대좌표로 설정된 box, Blue 박스는 상대좌표로 설정된 box이다.

 

 

절대좌표와 상대좌표의 혼합
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/14_pos_relative_absolute.css">
</head>
<body>
    <p>안녕하세요 홍길동입니다.</p>
    <p>안녕하세요 홍길동입니다.</p>
    <p>안녕하세요 홍길동입니다.</p>
    <div class="parent">
        <div class="box"></div>
        <div class="box2"></div>
    </div>
</body>
</html>
/* 부모(relative) + 자식(absolute) 같이 사용하면
자식 div 태그에 absolute의 (0, 0)이 웹브라우저 기준이 아니라
부모 div 박스기준의 (0, 0) 으로 변경됨
*/

/* 부모박스 */
.parent {
  width: 500px;
  height: 500px;
  border: 1px solid gray;
  /* 상대좌표 : 부모 */
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 절대좌표 */
  position: absolute;
  left: 50px;
  top: 50px;
}

 

만약 부모박스 기준으로 자식박스가 위치하게 만들고 싶을 경우

부모 div 태그에 position을 relative(상대좌표)로 설정하고 자식 div 태그에는 position을 absolute(절대좌표)로 설정하면 된다.

 

이처럼 p태그가 계속 추가되어도 자식박스의 위치는 부모박스의 기준으로 이동한다.

 

고정좌표(fixed)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/15_position_fixed.css">
</head>
<body>
    <!-- 메뉴 -->
    <div class="top-bar"></div>
    <!-- 본문 -->
    <div class="container">
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
    </div>
</body>
</html>
/* fixed(메뉴 고정으로 많이 사용) */
/* 주의 : 고정되면 아래 태그가 위로 말려올라옴 */
/* 메뉴 */
.top-bar{
    height: 50px;
    background-color: red;
    /* 고정(fixed), 좌표 사용가능(left/top/right.bottom) */
    position: fixed;
    /* 왼쪽(x) */
    left: 0;
    /* 위쪽(y) */
    top: 0;
    /* 오른쪽(-x) */
    right: 0px;
}

/* 본문 */
.container{
    /* 바깥여백-위 */
    /* 메뉴박스의 크기만큼 여백을 준다. 박스와 겹침 방지 */
    margin-top: 50px;

}
fixed는 메뉴 고정으로 많이 사용한다.
주의점은 고정되면 아래 태그가 위로 말려올라온다.
이것을 방지하기위해 본문에 margin-top을 주어 겹침을 방지한다.

고정좌표(Sticky)

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/16_position_sticky.css" />
  </head>
  <body>
    <!-- 메뉴 -->
    <div class="top-bar"></div>
    <!-- 본문 -->
    <div class="container">
      <p>안녕하세요 장길산입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
    </div>
  </body>
</html>
/* position : sticky(고정) */
.top-bar{
    height: 50px;
    background-color: blue;
    /* 고정, 좌표 설정가능(left/top/right/bottom) */
    position: sticky;
    /* 위쪽 */
    top: 0;
}
sticky 속성은 위의 fixed의 부작용인 아래태그가 말려오는 부작용이 없는 것이다.

 

position을 이용한 중앙배치
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/17_center.css">
</head>
<body>
    <div class="container">
        <h1>요소의 중앙 배치</h1>
    </div>
</body>
</html>
body{
    background-color: pink;
}

.container{
    width: 500px;
    height: 250px;
    background-color: orange;
    /* position을 이용한 중앙배치 */
    position: absolute;
    /* 왼쪽 */
    left: 50%;
    /* 위쪽 */
    top: 50%;
    /* 애니메이션 함수 : div를 위치이동시키는 함수 */
    /* 보정 : 박스의 가로/세로 크기의 반만큼 위치이동해야 중심이 중앙에 위치함 */
    /* 사용법 : transform: translate(가로크기, 세로크기); */
    transform: translate(-50%, -50%);
}

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] one true layout  (0) 2023.08.14
[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
[CSS] display 속성 (2)  (0) 2023.08.10
[CSS] display 속성  (0) 2023.08.09
반응형

package ch98;

 

public class Product {

 

int price; // 제품의 가격

int bonusPoint; // 제품구매시 제공하는 보너스 점수

 

Product(int price) {

this.price = price;

bonusPoint = (int) (price / 10.0); // 보너스 점수는 제품가격의 10% 제공

}

} // end of Product class

 

 

package ch98;

 

public class Tv1 extends Product{

Tv1() {

// 조상클래스(Product)의 생성자 Product(int price)를 호출

super(100); // TV가격을 100만원

}

// Object 클래스의 toString()을 오버라이딩

public String toString() {

return "Tv";

}

}

package ch98;

 

public class Computer extends Product {

 

Computer() {

super(200); // 컴퓨터의 가격을 200만원으로 한다.

}

// Object 클래스의 toString()을 오버라이딩

public String toString() {

return "Computer";

}

}

package ch98;

 

public class Buyer { // 고객

int money = 1000; // 가지고있는 금액

int bounsPoint = 0; // 가지고있는 보너스점수

 

void buy(Product p) {

if (money < p.price) {

System.out.println("잔액이 부족해 물건을 구매할 수 없습니다.");

return;

}

 

money -= p.price; // 가진돈에서 구입한 물건의 값을 뺀다

bounsPoint += p.bonusPoint; // 구입한 물건의 보너스점수를 추가

System.out.println(p + "을/를 구매하였습니다.");

}

}

package ch98;

 

public class MainTest {

 

public static void main(String[] args) {

Buyer b = new Buyer();

b.buy(new Tv1());

b.buy(new Computer());

 

System.out.println("현재 남은 돈은 " + b.money + "만원 입니다.");

System.out.println("현재 보너스 점수는 " + b.bounsPoint + "점 입니다.");

 

}

 

}

Tv을/를 구매하였습니다.

Computer을/를 구매하였습니다.

현재 남은 돈은 700만원 입니다.

현재 보너스 점수는 30점 입니다.

반응형
반응형

기본형 변수처럼 참조변수도 형변환이 가능하다.

단, 서로 상속관계에 있는 클래스 사이에서만 가능!

자손타입의 참조변수를 조상타입의 참조변수로, 조상타입의 참조변수를 자손타입의 참조변수로의 형변환만 가능하다.

 


class Phone { }
class IPhone extends Phone { }
class AndroidPhone extends Phone { }

예를 들어 Phone클래스가 있고 이를 상속받는 IPhone과 AndroidPhone 클래스가 있을때,

  • IPhone타입의 참조변수 i는 조상타입인 Phone으로 형변환이 가능하다.
  • IPhone과 AndroidPhone은 상속관계가 아니기 때문에 형변환이 불가능하다.

IPhone i = new IPhone();

 

Phone p = (Phone)i; // ok. 조상인 Phone 타입으로 자동형변환(생략가능)

IPhone i2 = (IPhone)p; // ok. 자손인 IPhone 타입으로 형변환(생략불가)

//AndroidPhone a = (AndroidPhone)i; // no. 상속관계가 아닌 클래스 간에는 형변환 불가, IPhone과 AndroidPhone은 상속관계가 아님.

기본형의 형변환과 달리 참조형의 형변환은 변수에 저장된 값(주소값)이 변환되는 것이 아니다.

Phone p = (Phone)i; // i의 값(객체의 주소)을 p에 저장

                                // 타입을 일치시키기 위해 형변환 필요(생략가능함)

i = (IPhone)p; // 조상타입을 자손타입으로 형변환하는 경우 생략불가함

 

 

instanceof 연산자
: 참조변수가 참조하고 있는 인스턴스의 실제 타입을 알아보기 위해 사용하는 연산자
  • 주로 조건문에 사용
  • (참조변수) instanceof (타입(클래스명))
  • 연산의 결과로 boolean 값인 true와 false 중 하나를 반환함
  • 연산의 결과로 true를 얻었다면 참조변수가 검사한 타입으로 형변환이 가능하다는 뜻이다.
반응형

'Java > Java 이론' 카테고리의 다른 글

[JAVA 다시보기] 자바기초  (1) 2023.09.19
문자열 자료형  (1) 2023.09.08
[JAVA] 인터페이스(interface)  (0) 2023.08.11
[JAVA] String 클래스  (0) 2023.08.10
[JAVA] 추상 클래스와 메서드  (0) 2023.08.10
반응형
인터페이스
  • 일종의 추상클래스
  • 추상클래스처럼 추상메서드를 갖지만 추상클래스보다 추상화 정도가 높다
  • 추상클래스와 달리 몸통을 갖춘 일반 메서드 or 멤버변수를 구성원으로 가질 수 없다.
  • 오직 추상메서드와 상수만을 멤버로 가질 수 있으며, 그 외에 어떠한 요소도 허용하지 않는다.

추상클래스 = 부분적으로 완성된 미완성 설계도
인터페이스 = 구현된 것이 없는 밑그림만 그려져 있는 '기본 설계도'

 

 

인터페이스 작성해보기
  • 인터페이스를 작성하는 것은 클래스 작성하는 것과 같다.
  • 클래스는 class라는 키워드를 사용하지만 인터페이스는 interface라는 키워드를 사용한다.
  • interface는 접근제어자로 public 또는 default만 사용할 수 있다. 

interface 인터페이스이름 {
          public static final 타입 상수이름 = 값;
          public abstract 메서드이름(매개변수목록);
}

인터페이스 멤버들은 다음과 같은 제약사항이 있다.

  • 모든 멤버변수는 public static final 이어야 하고, 이를 생략할 수 있다.
  • 모든 메서드는 public abstract 이어야 하고, 이를 생략할 수 있다. (단 static과 default는 예외 JDK1.8부터)

 

인터페이스의 상속

인터페이스는 인터페이스부터만 상속받을 수 있으며, 클래스와는 달리 다중상속, 즉 여러개의 인터페이스로부터 상속 받는 것이 가능하다.

 

[사운드효과 인터페이스]

package ch12;

 

public interface SoundEffect {

public abstract void notification();

 

}

[리모컨 인터페이스]

package ch12;

 

public interface RemoteController {

void turnOn();

void turnOff();

}

[장난감 로봇이 리모컨과 사운드 효과 인터페이스를 상속받음]

package ch12;

 

public class ToyRobot extends RemoteController, SoundEffect { }

클래스의 상속과 마찬가지로 자손 인터페이스(ToyRobot)는 조상 인터페이스(RemoteController, SoundEffect)에 정의된 멤버를 모두 상속받는다.

ToyRobot 자체에는 정의된 멤버가 하나도 없지만 조상 인터페이스로 부터 상속받는 두 개의 추상메서드를 멤버로 갖게된다.

 

인터페이스의 구현

인터페이스도 추상클래스처럼 그 자체로는 인스턴스를 생성할 수 없으며, 추상클래스가 상속을 통해 추상메서드를 완성하는 것처럼, 인터페이스도 자신에 정의된 추상메서드의 몸통을 만들어주는 클래스를 작성해야 하는데, 그 방법은 추상클래스가 자신을 상속받는 클래스를 정의하는 것과 다르지 않다.

다만 클래스는 extends키워드를 사용하지만 인터페이스는 구현한다라는 의미의 implements를 사용한다.

 

package ch12;

 

public class ToyRobot implements RemoteController, SoundEffect {

 

 

@Override

public void turnOn() {

System.out.println("장난감 로봇을 켭니다.");

}

 

@Override

public void turnOff() {

System.out.println("장난감 로봇을 끕니다.");

}

 

@Override

public void notification() {

System.out.println("뚜뚜두두두두~~");

 

}

 

}

왜 인터페이스를 사용할까?
: 인터페이스의 장점은 아래와 같다.

- 개발시간 단축
- 표준화가 가능
- 서로 관계없는 클래스들에게 관계를 맺어 줄 수 있다.
- 독립적인 프로그래밍이 가능
반응형

'Java > Java 이론' 카테고리의 다른 글

문자열 자료형  (1) 2023.09.08
[JAVA] 참조변수의 형변환  (0) 2023.08.11
[JAVA] String 클래스  (0) 2023.08.10
[JAVA] 추상 클래스와 메서드  (0) 2023.08.10
[JAVA] 다형성  (0) 2023.08.10
반응형

/* float 속성 특징 : float 걸린 태그는 떠 있음 */
/* float 밑에 있는 태그들이 높이가 없다고 가정하여 위로 말려 올라옴(겹침현상) */
/* 여백 초기화 */
* {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

#image {
  float: left;
  border: 1px solid red;
}

#desc {
  border: 1px solid red;
  margin-left: 30px;
  float: left;
  width: 300px;
}

#menu {
  border: 1px solid red;
  float: right;
}
반응형

'CSS > CSS 실습' 카테고리의 다른 글

[CSS] 메뉴디자인  (0) 2023.08.11
[CSS] display 실습  (0) 2023.08.10
[CSS] 웹 폰트 적용 예제  (0) 2023.08.09
[CSS] 테이블 스타일 적용  (0) 2023.08.09
[CSS] 배경이미지 연습문제  (0) 2023.08.08
반응형

/* 문제풀이 */

ul{
    border: 1px solid #cccccc;
    border-radius: 10px;
    background-color: #f5f7e4;
    width: 640px;
    padding: 30px;
   
}
li{
    /* display : 가로배치 */
    display: inline-block;
    /* 앞에 점 없애기 */
    list-style-type: none;
    margin-left: 20px;
   
}

li {
    list-style-type: none;
}

#v_menu{
    width: 150px;
}

#v_menu li{
    border-bottom: 1px dotted black;
    padding: 5px;
   
}

/* 가로 메뉴 디자인 */
/* 후손선택자 */
#h_menu li{
    display: inline-block;
 
}

.menus{
   margin-left: 20px;
   margin-right: 20px;
    color: green;
}

 

반응형

'CSS > CSS 실습' 카테고리의 다른 글

[CSS] 메뉴디자인  (0) 2023.08.11
[CSS] float 실습예제  (0) 2023.08.10
[CSS] 웹 폰트 적용 예제  (0) 2023.08.09
[CSS] 테이블 스타일 적용  (0) 2023.08.09
[CSS] 배경이미지 연습문제  (0) 2023.08.08
반응형
  • /* float : 좌/우 배치 속성, div박스들을 배치, 중앙배치는 없음 */

.box{
    /* 가로 */
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
    /* 왼쪽 배치 */
    float: left;
}

.box2{
    /* 가로 */
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
    /* 오른쪽 배치 */
    float: right;
}

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] display 속성 (2)  (0) 2023.08.10
[CSS] display 속성  (0) 2023.08.09
[CSS] 가상선택자  (0) 2023.08.09
반응형

 

  • /* inline-block : div 속성 + 줄바꿈 없음(속성) */
  • /* 활용 : 세로배치 -> 가로배치 디자인 적용하고자 할때 사용 */
  • /* 예) ul - li (block 속성, 세로메뉴) -> 가로메뉴(위의 속성 고려) */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 바깥여백 */
  margin: 20px;
  /* display 속성 */
  display: inline-block;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 바깥여백 */
  margin: 20px;
  display: inline-block;
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  /* 바깥여백 */
  margin: 20px;
  display: inline-block;
}

  • /* id 선택자 : #변수명{} */
  • /* display : none <-> block (활용 : 드롭다운 메뉴) */
#box{
    background-color: yellow;
    width: 100px;
    height: 100px;
    /* display 속성 */
    /* 화면에서 보이지 않게 만듦 */
    display: none;
}

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
[CSS] display 속성  (0) 2023.08.09
[CSS] 가상선택자  (0) 2023.08.09
[CSS] 속성선택자 - 특수선택자  (0) 2023.08.09
반응형

문자열을 만들 때에는 두 가지 방법, 문자열 리터럴을 지정하는 방법과 String 클래스의 생성자를 사용해서 만드는 방법이 있다.


변경불가능한 클래스

String 클래스에서는 문자열을 저장하기 위해 문자형 배열 참조변수(char[ ]) value를 인스턴스 변수로 정의해놓고있다.

한번 생성된 String인스턴스가 갖고 있는 문자열은 읽어 올 수 만있고, 변경할 수는 없다.

예를 들어 + 연산자를 이용해서 문자열을 결합하는 경우 인스턴스 내의 문자열이 바뀌는 것이 아니라 새로운 문자열이 담긴 String 인스턴스가 생성되는 것이다.

String str1 = "반가워"; // 문자열 리터럴 "반가워"의 주소가 str1에 저장됨

String str2 = new String("반가워");  // 새로운 String인스턴스를 생성

String str3 = "반가워";  // 문자열 리터럴 "반가워"의 주소가 str3에 저장됨

  • String 클래스의 생성자를 이용한 경우에는 new 연산자에 의해 메모리 할당이 이루어지기 때문에 항상 새로운 String 인스턴스가 생성된다.
  • 문자열 리터럴은 이미 존재하는 것을 재사용하는 것이다.

이 때의 몇가지 시나리오를 확인해보자.

public static void main(String[] args) {

 

// String

// 문자열이라는 데이터를 보관이나 연산할때 사용

// static 영역, 데이터 영역, --> 상수 풀 영역

 

String str1 = "반가워";

String str2 = new String("반가워");

String str3 = "반가워";

 

System.out.println(str1);

System.out.println(str2);

// 시나리오 1

if(str1 == str2) { // str1은 상수풀 영역에, str2는 힙메모리 영역에 있어 주소값이 다름

System.out.println("주소가 같아요");

} else {

System.out.println("주소값이 달라요");

}

 

// 시나리오 2

// 리터럴 방식으로 생성한 문자열은 이미 생성한 값이 똑같다면 새로 만들지 않고 재활용한다.

if(str1 == str3) {

System.out.println("주소 같음");

} else {

System.out.println("주소 다름");

}

System.out.println("=============================");

// 시나리오 3

str3 = "반갑습니다"; // 값을 변경

if(str1 == str3) { //str3의 값을 변경하여 상수 풀 메모리에 새로 생성됨

System.out.println("주소 같음");

} else {

System.out.println("주소 다름");

}

System.out.println("=============================");

// 시나리오 4

// 문자열에 값을 비교하려면 equals를 반드시 사용

if(str1.equals(str2)) { // str1과 str2의 주소값을 비교하는 것이 아닌 문자열을 비교하므로 값은 "반가워"로 같으므로 같은 값입니다가 출력

System.out.println("같은 값입니다.");

} else {

System.out.println("다른 값입니다.");

}

[실행값]

주소값이 달라요

주소 같음

=============================

주소 다름

=============================

같은 값입니다.

반응형

'Java > Java 이론' 카테고리의 다른 글

[JAVA] 참조변수의 형변환  (0) 2023.08.11
[JAVA] 인터페이스(interface)  (0) 2023.08.11
[JAVA] 추상 클래스와 메서드  (0) 2023.08.10
[JAVA] 다형성  (0) 2023.08.10
[JAVA] 객체지향 언어  (0) 2023.08.09

+ Recent posts