반응형

python

우리는 무언가를 배울 때 항상 준비물이 필요합니다.

수영을 배울 때는 수영복이 필요하고, 기타와 같은 악기를 배운다면 악기가 필요합니다.

프로그래밍을 배우려면 무엇이 필요할까요? 프로그래밍을 배울 때 준비물은 개발 환경(=개발 툴)이라고 부릅니다.

 

개발 환경은 다음과 같이 두 가지로 분류가 됩니다.

 

1. 프로그래밍 언어로 이루어진 코드를 작성할 수 있는 텍스트 에디터

2. 파이썬 코드를 실행할 수 있는 도구인 파이썬 인터프리터

 

이번 시간에는 두 번째 항목인 파이썬(인터프리터)을 설치해 보도록 하겠습니다.

 

파이썬 설치 프로그램 다운받기

 

1. 우선 파이썬 공식 홈페이지 https://www.python.org/downloads/ 에 접속합니다. [Download Python 3.8.0]버튼을 클릭 하세요. (파이썬은 지속적으로 업데이트 되므로 3.~ 뒷 부분 숫자는 바뀔 수 있습니다. 19.11.22 현재 3.8.0입니다.)

 

사진 <1.1> 파이썬 공식 홈페이지

2. 설치 프로그램을 실행하면 다음과 같은 화면이 나옵니다. 하단의 [Add Python 3.8 to PATH]를 체크한 후, [Install Now]버튼을 클릭하여 파이썬을 설치하세요.

 

사진 <1.2> 파이썬 설치

 * [Install Now] 버튼을 누른 후에 사용자 계정 컨트롤 화면이 나오면 [예] 버튼을 클릭하세요.

 * [Add Python 3.8 to PATH]는 프로그램의 실행 경로에 파이썬을 추가한다는 의미입니다.

   만약 체크하지 않고 설치하면 설정하는 방법이 까다로워지니 체크 후에 설치하는 것을 추천합니다.

 

3. 설치가 완료 되었습니다. [Close] 버튼을 클릭하여 설치 프로그램을 종료합니다.

 

사진 <1.3> 파이썬(인터프리터) 설치 완료

 

5. 파이썬 프로그램이 잘 설치 되었는지 확인하려면 [윈도우 키 + f]를 누른 후 python을 검색하여 다음과 같은 화면이 나오면 잘 설치 되었습니다. 축하합니다 :)

 

사진 <1.4> python 프로그램 설치 확인

 

반응형

'언어 > Python' 카테고리의 다른 글

[Python] 인터렉티브 셸(Interactive shell) 실행하기  (0) 2019.11.22
반응형

귀여운 Scratch 고양이

안녕하세요! Scratch 3.0 설치 방법을 알려드리겠습니다 :)

 

1. 첫 번째로 다음의 url을 클릭해주세요! Scratch 공식 홈페이지에서 바로 프로그램을 설치할 수 있는 주소입니다.

 

     https://scratch.mit.edu/download

 

Scratch - Imagine, Program, Share

Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations.

scratch.mit.edu

 

2. 홈페이지 접속 후 조금만 아래로 내리면 다음과 같은 화면이 나옵니다. 주황색으로 표시 된 [바로 다운로드]를 클릭해주세요.

 

 * 자신의 컴퓨터 환경에 맞는 버전으로 설치해주세요. 제가 소개해드리는 방법은 Windows 전용이며 Mac 사용자는 운영체제 선택 부분에서 초록색으로 표시 된 [macOS]를 클릭하고 설치해주세요 :)

 

사진 <1.1>

3. [바로 다운로드]버튼을 클릭하면 화면 아래처럼 설치가 진행됩니다.

 

사진 <1.2>


4. 실행파일(.exe)이 설치가 됐으면 다음과 같은 화면이 나옵니다. [설치]버튼을 클릭해주세요!

 

사진 <1.3>

 

5. 설치 진행중입니다!

 

사진 <1.4>

 

6. 설치가 완료되었습니다. (참 쉽죠?) [마침]버튼을 눌러주세요!

 

사진 <1.5>

 

7. 스크래치 3.0 첫 화면입니다. 다음 글부터는 Scratch 기본적인 용어 소개와 기능들을 알아보겠습니다 :) 

 

사진 <1.6>

반응형
반응형

 

1. 내부 스타일 시트

 

 - 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다.

   모든 스타일 정보는 <head>태그와 </head>태그 안에서 정의해야 하고 <style>태그와 </style>태그 사이에 작성합니다.

 

<사진 1.1> 내부 스타일 시트

 

 - 다음은 내부 스타일 시트 예제입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
    <title>내부 스타일 시트</title>
    <style>
        ul{
            color:blue;
            list-style-type:square;
        }
    </style>
</head>
<body>
    <ul>
        <li>Korea</li>
        <li>Japan</li>
        <li>China</li>
    </ul>
</body>  
</html>
cs

<사진 1.2> 내부 스타일 시트

 

 - <head>태그와 </head>태그 안에 있는 <style>태그와 </style>태그는 '내부 스타일 시트' 입니다.

 

2. 외부 스타일 시트

 

 - 웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없습니다.

   사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와

   사용하는 것이 일반적입니다. 이렇게 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 하고 '.css' 라는 파일 확장자를 사용합니다.

 

 - 외부 스타일 시트를 연결할 때는 <style>태그 없이 <link>태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결합니다.

 

 기본형 : <link href="외부 스타일 파일 경로" rel="stylesheet" type=""text/css>

 

 다음은 스타일 정보를 'style.css'라는 외부 스타일 시트 파일로 저장한 후 <link>태그를 이용해 링크한 것입니다.

 

1
2
3
4
ul{
    color:orange;
    list-style-type:square;
}
cs

<사진 1.3> style.css 파일

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
    <title>외부 스타일 시트<title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <ul>
        <li>Korea</li>
        <li>Japan</li>
        <li>China</li>
    </ul>
</body>  
</html>
cs

<사진 1.4> style.css파일과 연결된 외부 스타일 시트

 

 - 다음은 결과 화면입니다.

 

 

<사진 1.4 결과 화면>

 

 

3. 인라인 스타일

 

  - 간단한 스타일 정보라면 스타일 시트(<style> </style>)를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다.

    이런 방법을 '인라인 스타일'이라고 합니다. 스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style속성을 사용하여

    style="속성:속성 값;" 형태로 스타일을 바꿀 수 있습니다. 다음은 인라인 스타일을 사용한 예제입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
    <title>인라인 스타일</title>
</head>
<body>
    <h1 style="color:blue;">진심과 배려 - 논어의 말</h1>
    <p>교사가 지녀야 할 마음가짐은 '진심'과 '배려'두 가지로 대변된다.<br>
    즉 타인을 위해 할 수 있는 일을 성심껏 하고 타인의 기분을 헤아려 주는 것이다.<br>
    언제나 이 두가지를 잊지 않는 한 누군가를 가르칠 자격이 있다.</p>
</body>  
</html>
cs

<사진 1.5> 인라인 스타일 예제

 

 - <h1>태그에 인라인 스타일을 적용 시켰습니다. 다음은 결과 화면입니다.

 

<사진 1.5 결과 화면>

 

반응형

'Web Basic > CSS3' 카테고리의 다른 글

[CSS3] 스타일 주석 표기 방법  (0) 2018.03.30
[CSS3] CSS란? 기초 용어 및 표기 방법  (0) 2018.03.19
반응형

 

1. 스타일 주석

 

 - 소스를 작성하고 시간이 지나 다시 본인이 작성한 소스를 보면 "이건 뭐였지?"라는 생각이 자주 듭니다.

   본인이 만든 소스를 다른 사람이 봤을 때도 간단하게 코드의 설명을 적어놓으면 훨씬 더 이해하기 쉽겠죠?

   CSS3에서 주석을 표시할 때는 /*와 */ 사이에 내용을 입력하는데 주석을 한 줄만 입력하거나 여러 줄을 입력할 수도

   있습니다.

 

 - 다음은 스타일 주석을 사용한 예제입니다. 실제로 스타일 소스를 작성할 때는 주석을 이용해 어떤 용도로 사용한 규칙인지

   표시해 두는 것이 좋습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
    <title>CSS3 스타일 주석</title>
    <style>
        /*
            <h1>태그와 <p>태그의 스타일을 지정해보자
        */
        h1{
            color:orange; /*글자 크기*/
            font-size:20px; /*글자 색*/
        }
        p{
            color:blue; /*글자 색*/
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>HTML5, CSS3, JavaScript</p>
</body>  
</html>
cs

<사진 1.1> 여러 줄 주석 과 한줄짜리 주석

 

 - <사진1.1>코드는 <h1>태그와 <p>태그가 적용된 곳에 스타일을 지정하였고 주석으로 스타일의 설명을 작성했습니다.

   다음은 결과 화면입니다.

<사진 1.1 결과 화면>

 

 - 우리가 작성한 주석은 코드에는 보이지만 웹 브라우저에는 보이지 않는다는 것을 알 수 있습니다.

반응형
반응형

 

1. Map인터페이스란?

 

 - Map인터페이스는 키(key)와 값(value)을 하나의 쌍으로 묶어서 저장하는 컬렉션 클래스를 구현하는 데 사용됩니다.

   키는 중복될 수 없지만 값은 중복을 허용합니다. 왜냐하면 값을 추출하기 위해서는 key객체에 대응하는 value객체를 반환하는데

   중복된 key객체가 있을 경우 어떠한 key객체를 찾아야하는지 모르기 때문입니다.

  

 - 기존에 저장된 데이터와 중복된 키와 값을 저장하면 기존의 값은 없어지고 마지막에 저장된 값이 남게 됩니다.

   다음은 Map인터페이스의 상속계층도입니다.

 

<사진 1.1> Map인터페이스의 상속계층도

 

2. HashMap컬렉션 클래스

 

 - HashMap<K,V>컬렉션은 java.util패키지에 속한 컬렉션 클래스이다. HashMap은 내부에 '키'와 '값'을 저장하는 자료 구조를 가지고,

   다음과 같이 put()메서드와 get()메서드를 이용하여 요소를 삽입하거나 검색합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.edu.test;
 
import java.util.*;
 
public class test {
    public static void main(String[] args) {
        HashMap<StringString> hm = new HashMap<StringString>();
        hm.put("apple""사과");
        hm.put("banana""바나나");
        
        System.out.println(hm.get("apple"));
        System.out.println(hm.get("banana"));
        
    }    
}
cs

<사진 1.2> HashMap컬렉션 클래스의 put(), get()메서드 사용 방법

 

 - 8~9번째 코드가 실행되고 나면 HashMap에서는 아래와 같은 형태로 데이터가 저장됩니다.

<사진 1.2 코드 표>

 

 - put(key, value)메서드를 사용하여 "appple"이라는 이름을 갖는 key와 "사과"라는 이름을 갖는 value를 저장합니다.

   그리고 get(key)메서드를 사용하여 key에 대응하는 value 값을 반환합니다. 만약 해시맵에 없는 '키'로 get()을 호출하면 null값을 리턴합니다.

   다음은 결과 화면입니다.

 

1
2
3
hm.put("a","1");
hm.put("b","2");
hm.put("b","3");
cs

 

 - 만약 위와 같은 코드가 실행되고 나면 HashMap에는 아래와 같은 형태로 데이터가 저장됩니다.

 

 

 - 3개의 데이터 쌍을 저장했지만 실제로는 2개 밖에 저장되지 않은 이유는 중복된 키가 있기 때문입니다. 세 번째로 저장한 데이터의 키인

   'b'는 이미 존재하기 때문에 새로 추가되는 대신 기존의 값을 덮어씁니다. 그래서 키 'b'에 연결된 값은 '3'이 됩니다.

 

<사진 1.2 결과 화면>

 

2-1 HashMap의 장단점

 

 장점 :

  1) 요소의 삽입, 삭제 시간이 매우 빠릅니다. 요소의 위치를결정하는 해시 함수가 간단한 코드로 이루어지며, Vector나 ArrayList 컬렉션 클래스처럼

     요소의 삽입 삭제 시 다른 요소들의 위치 이동이 필요 없기 때문입니다.

  2) 요소 검색은 더욱 빠릅니다. HashMap의 get(key)메서드가 호출되면 해시 함수가 ket가 저장된 위치를 단번에 찾아내므로,

      Vector나 ArrayList 컬렉션 클래스처럼 모든 요소들을 하나씩 비교하는 시간 낭비가 전혀 없기 때문이다.

 단점 :

  1) HashMap은 인덱스를 이용하여 요소에 접근할 수 없고 오직  '키'로만 검색해야 합니다. 그러므로 HashMap은 빠른 삽입과 검색이

     필요한 응용에 적합합니다.

 

2-2 HashMap 생성

 

 - HashMap<K, V>에서 K는 '키'로 V에는 '값'으로 사용할 구체적인 타입을 지정하여 사용합니다. 다음은 키와 값을 모두 String 타입으로 지정한

   코드입니다.

 

1
HashMap<StringString> hm = new HashMap<StringString>();
cs

<사진 1.3> HashMap 생성

 

2-3 HashMap 주요 메서드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.edu.test;
 
import java.util.*;
 
public class test {
    public static void main(String[] args) {
        HashMap<StringString> hm = new HashMap<StringString>();
        hm.put("apple""사과"); // "apple"은 키, "사과"는 값
        hm.put("banana""바나나");
        hm.put("grape""포도");
        System.out.println("첫 번째 요소 :"+hm.get("apple")); // "apple"키에 대응하는 값을 반환
        System.out.println("두 번째 요소 :"+hm.get("banana"));
        System.out.println("hm 내에 있는 요소의 개수 :"+hm.size()); // 현재 hm 내에 있는 요소의 개수 리턴
        hm.remove("apple"); // "apple"키를 갖는 키와 값을 삭제
        System.out.println("첫 번째 요소를 삭제한 결과:"+hm.get("apple"));
    }    
}
cs

<사진 1.4> HashMap컬렉션 클래스 주요 메서드

 

 - 요소 삽입, 추출, 크기 확인, 삭제의 기능을 가진 메서드입니다. 다음은 결과 화면입니다.

 

<사진 1.4 결과 화면>

반응형
반응형

 

 

 - Enumeration, Iterator, ListIterator는 모두 컬렉션에 저장된 요소를 접근하는데 사용되는 인터페이스입니다.

   Enumeration은 Iterator의 구버전이며, ListIterator는 Iterator의 기능을 향상 시킨 것입니다. 자, 이제 하나씩 자세히 살펴보겠습니다.

 

1. Iterator 인터페이스

 

 - Vector 컬렉션 클래스, ArrayList 컬렉션 클래스, LinkedList 컬렉션 클래스와 같이 요소가 순서대로 저장된 컬렉션에서 요소를 순차적으로 검색할 때는

   java.util 패키지에 속한 Iterator 인터페이스를 사용하면 편리합니다.

 

 - List인터페이스 뿐만 아니라, Set인터페이스를 구현한 컬렉션에도 사용 가능합니다. 다음은 Iterator인터페이스의 주요 메서드입니다.

 

 

<사진 1.1> Iterator인터페이스 메서드

 

 - hasNext()메서드와 next()메서드는 Iterator의 핵심 메서드입니다.

 - remove()메서드의 설명에 '선택적 기능'이란 Iterator인터페이스를 구현할 때 remove()메서드가 필수 기능이 아니므로 구현하지

   않아도 괜찮다는 뜻 입니다. 

 - 다음은 ArrayList에 저장된 모든 요소들을 출력하기 위한 코드입니다.

 

1
2
3
4
5
6
List lit = new ArrayList();
 
Iterator it = list.iterator();
while(it.hasNext()) {
    System.out.println(it.next());
}
cs

<사진 1.2>

 

- ArrayList컬렉션 클래스 대신에 List인터페이스를 구현한 다른 컬렉션 클래스(Vector, LinkedList 등)에 대해서도 이와 동일한 코드를

  사용할 수 있습니다. 첫 줄에서 ArrayList대신에 List인터페이스를 구현한 다른 컬렉션 클래스의 객체를 생성하도록 변경하기만 하면 됩니다.

** Map인터페이스는 Collection인터페이스의 자손이 아니므로 iterator()메서드가 존재하지 않습니다.

   Map인터페이스를 구현한 컬렉션 클래스(HashMap, SortedMap 등)는 키(Key)와 값(Value)을 쌍(pair)으로 저장하고 있기 때문에

   iterator()를 직접 호출할 수 없습니다. 그 대신 keySet()이나 entrySet()과 같은 반환 타입이 Set컬렉션인 메서드를 통해서

   키와 값을 각각 따로 Set의 형태로 얻어 온 후에 Set컬렉션에는 iterator()가 존재하므로 iterator()를 호출하여 Iterator를 얻을 수 있습니다.

 

- 다음은 ArrayList에 있는 요소들을 Iterator를 사용하여 읽어 오는 코드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.edu.test;
 
import java.util.*;
 
public class test {
    public static void main(String[] args) {
        ArrayList<String> al = new ArrayList<String>();
        al.add("1");
        al.add("2");
        al.add("3");
        al.add("4");
        al.add("5");
        
        Iterator it = al.iterator();
        while(it.hasNext()) {
            System.out.println(it.next());
        }
    }    
}
 
cs

<사진 1.3>

 

 다음은 결과 화면입니다.

 

<사진 1.3 결과 화면>

 

 

2. Enumeration 인터페이스

 

 - Enumeration인터페이스는 컬렉션 프레임웍이 만들어지기 이전에 사용하던 것으로 Iterator의 구버전이라고 생각하면 됩니다.

   이전 버전으로 작성된 소스와의 호환을 위해서 남겨 두고 있을 뿐이므로 가능하면 Enumeration대신 Iterator를 사용하도록 합시다.

 

 - 다음은 Enumeration인터페이스의 메서드입니다. Enumeration은 Iterator와 메서드 이름만 다를 뿐 기능은 같습니다.

 

<사진 1.4> Enumeration인터페이스의 메서드

 

 

3. ListIterator 인터페이스

 

 - ListIterator인터페이스는 Iterator를 상속받아서 기능을 추가한 것입니다. 컬렉션의 요소에 접근할 때 Iterator는 단방향으로만 이동할 수

   있지만 ListIterator는 양방향으로 이동이 가능하다는 장점이 있습니다. 또한 ArrayList나 LinkedList처럼 List인터페이스를 구현한 컬렉션

   클래스에서만 사용할 수 있습니다.

 

 - 다음은 ListIterator인터페이스의 메서드입니다.

 

<사진 1.5> ListIterator인터페이스의 메서드

 

 

 - 다음은 ListIterator인터페이스의 양방향 접근이 가능한 previous()메서드를 호출하여 이전 요소로 접근해보는 코드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package com.edu.test;
 
import java.util.*;
 
public class test {
    public static void main(String[] args) {
        ArrayList<String> al = new ArrayList<String>();
        al.add("1");
        al.add("2");
        al.add("3");
        al.add("4");
        al.add("5");
        
        ListIterator li = al.listIterator(); // 순방향으로 진행하면서 요소를 읽어옵니다.
        
        while(li.hasNext()) {
            System.out.println(li.next());
        }
        System.out.println("-----------");
        
        while(li.hasPrevious()) { // 역방향으로 진행하면서 요소를 읽어옵니다.
            System.out.println(li.previous());
        }
        
        
    }    
}
cs

<사진 1.6> ListIterator인터페이스의 previous()메서드 사용

 

 - Iterator인터페이스는 단방향으로만 이동하기 때문에 컬렉션의 마지막 요소에 다다르면 더 이상 사용할 수 없지만,

   ListIterator인터페이스는 양방향으로 이동하기 때문에 각 요소간의 이동이 자유롭습니다. 다만 이동하기 전에 hasNext()메서드나

   hasPrevious()메서드를 호출하여 이동할 수 있는지 확인해야합니다.

반응형
반응형

 

1. Vector클래스란?

 

 - Vector 클래스는 ArrayList클래스와 같이 컬렉션 프레임웍에서 가장 많이 사용되는 컬렉션 클래스 일 것입니다.

   이 둘은List 인터페이스를 구현하기 때문에 List인터페이스의 특징인

   1. 저장순서를 유지하며

   2. 중복을 허용합니다.

   라는 특징을 가지고 있습니다.

 

 - Vector클래스의 기능을 개선 한 것이 ArrayList클래스입니다. Vector 클래스는 기존에 작성된 소스와의 호환성을 위해서 계속 남겨 두고 있을

   뿐이기 때문에 가능하면 Vector클래스보다 ArrayList클래스를 사용하는 것이 바람직하다고 할 수 있습니다.

   다음은 Vector클래스와 ArrayList클래스의 공통점과 차이점을 나타내는 표입니다.

 

<사진 1.1> Vector클래스와 ArrayList클래스의 비교

 

2. 벡터 생성하는 방법

 

 - 벡터를 생성할 때, Vector<E>의 E에 요소로 사용할 타입을 지정하면 됩니다. 예를 들어, 정수 값만 삽입 가능한 벡터를 만들고자 한다면

   다음과 같이 E 요소에 Integer를 지정하여 벡터를 생성하면 됩니다.

 

       Vector<Integer> v = new Vector<Integer>();

 

   만약 문자열만 삽입 가능한 벡터를 만들고 싶으면 다음과 같이 벡터를 생성하면 됩니다.

 

       Vector<String> v = new Vector<String>();.

 

   만일 Vector<E>에서 E 요소에 구체적인 타입을 지정하지 않는다면 컴파일러가 경고 메시지를 출력합니다.

 

3. Vector 클래스의 주요 메서드

 

 1) 벡터에 요소 삽입

 

   - add() 메서드를 사용하여 벡터의 끝이나 중간에 요소를 삽입할 수 있습니다. 다음은 정수 1, 2, 3을 순서대로 벡터에 삽입하는 코드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
package com.edu.test;
 
import java.util.*;
 
public class test {
    public static void main(String[] args) {
        Vector<Integer> v = new Vector<Integer>();
        v.add(1);
        v.add(2);
        v.add(3);
    }    
}
cs

<사진 1.2> add() 메서드 사용

 

   - 벡터 v에는 Integer 외의 다른 타입의 객체를 삽입할 수 없습니다. 현재 제네릭이 Integer로 선언되어 있는데

     add() 메서드의 인자 값으로 정수형이 아닌 다른 타입을 삽입할 경우에는 오류가 발생합니다.

 

<사진 1.3>

 

   - 초기에 선언한 Integer 타입이 아닌 문자열 3을 삽입하였으니 빨간 줄이 생기면서 컴파일 오류가 발생하였습니다.

   - 참고로 벡터에는 null값을 삽입할 수 있기 때문에, 벡터를 검색할 때 null값이 존재할 수 있음을 염두해 두어야 합니다.

 

   - 다음은 add()메서드를 사용하여 벡터의 중간에 객체를 삽입해보겠습니다. 다음은 현재 벡터 v에 [1, 2, 3]이 저장 되어 있지만

     인덱스 1번 위치에 100 요소를 삽입해보는 코드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.edu.test;
 
import java.util.*;
 
public class test {
    public static void main(String[] args) {
        Vector<Integer> v = new Vector<Integer>();
        v.add(1);
        v.add(2);
        v.add(3);
        
        v.add(1,100);
    }    
}
 
cs

<사진 1.4>

 

 - v.add(1,100); 는 인덱스 1의 위치에 정수 100을 삽입한다는 코드입니다. 다음은 결과 화면입니다.

 

<사진 1.4 결과 화면>

 

 - 결과를 보면 기존의 인덱스 1 위치에 있던 2와 그 뒤에 있던 3이 모두 한 자리씩 뒤로 이동했습니다.

   만약 벡터에 1개의 요소(인덱스 0의 위치)만 들어있는 상태인데 2의 위치에 요소를 삽입할 경우엔 예외가 발생합니다. 왜냐하면

   인덱스 1이 빈 공간이 되기 때문입니다.

 

 2) 벡터 내의 요소 알아내기

 

   - 벡터 내에 존재하는 요소를 알아내기 위해서는 get() 메서드와 elementAt() 메서드를 사용합니다. 다음은 get()메서드를 사용한 코드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.edu.test;
 
import java.util.*;
 
public class test {
    public static void main(String[] args) {
        Vector<Integer> v = new Vector<Integer>();
        v.add(1);
        v.add(2);
        v.add(3);
        v.add(4);
        v.add(5);
        
        for(int i=0; i<v.size(); i++) {
            System.out.println(v.get(i));
        }
    }    
}
 
cs

<사진 1.5>

 

 - 벡터 v에 정수 1, 2, 3, 4, 5를 삽입했습니다. 벡터 v에 있는 모든 요소들을 순서대로 출력하기 위해 for문을 사용했습니다.

 - v.get(0)이 실행될 경우 벡터 v가 가리키고 있는 0번째 인덱스의 값을 추출합니다.

 

 - 다음은 현재 벡터 v의 상태를 그림으로 표현했습니다.

 

<사진 1.6>

 

 - 벡터 v는 0x100(임의의 주소로 아무렇게나 정한 것입니다)이라는 주소 값을 갖고 있는 위치를 가리키고 있습니다.

   현재 0x100위치에는

   0번 인덱스에 1,

   1번 인덱스에 2,

   2번 인덱스에 3,

   3번 인덱스에 4,

   4번 인덱스에 5라는 값을 저장하고 있습니다. 그래서 v.get(0)메서드를 호출할 경우 벡터 v가 가리키고 있는 0번째 인덱스 값인 1을 반환합니다.

   다음은 <사진 1.5> 코드의 결과 화면입니다.

 

<사진 1.5 결과 화면>

 

 - 벡터 v가 가리키고 있는 모든 요소들을 출력했습니다.

 

 3) 벡터에서 요소 삭제

 

 - 벡터 내의 임의의 인덱스에 있는 요소를 삭제할 수 있습니다. remove() 메서드를 사용하면 됩니다.

 

       v.remove(1); // 벡터 v가 가리키고 있는 1번째 인덱스의 값을 삭제하는 코드입니다.

 

 - 다음은 remove() 메서드를 사용한 코드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package com.edu.test;
 
import java.util.*;
 
public class test {
    public static void main(String[] args) {
        Vector<Integer> v = new Vector<Integer>();
        v.add(1);
        v.add(2);
        v.add(3);
        v.add(4);
        v.add(5);
        
        v.remove(1);
        
        for(int i=0; i<v.size(); i++) {
            System.out.println(v.get(i));
        }
    }    
}
 
cs

<사진 1.7>

 

 - 현재 벡터 v는 정수 1, 2, 3, 4, 5를 배열로 저장하고 있는 상태에서 14번째 줄 코드에서 remove()메서드를 사용하여 인덱스 1 위치에 있는 요소를

   삭제하고 벡터 v가 저장하고 있는 모든 요소들을 출력하고자 합니다. 다음은 결과 화면입니다.

 

<사진 1.7 결과 화면>

 

 - 인덱스 1 위치에 있던 정수 2를 삭제 하여 뒤에 있던 요소들이 한 자리씩 앞으로 이동하였습니다.

 

 - 벡터의 모든 요소를 삭제하고자 한다면 v.removeAllElements(); 를 호출하면 됩니다.

반응형
반응형

 

 

1. <caption>태그, <figcaption>태그 - 표에 제목 붙이기

 

 기본형 : <caption> 표 제목 </caption>

       <figcaption> 표 제목 </figcaption>

 

 - 표에 제목을 붙일 때 보통 <caption>태그를 사용하지만 <figcaption>태그를 사용할 때도 있습니다. 두 태그의 사용 방법을 알아보겠습니다.

 

 1) <caption>태그

   1. <caption>태그는 <table>태그 바로 다음에 사용합니다.

   2. <caption>태그를 사용한 표 제목은 표의 위쪽 중앙에 표시됩니다.

 

 다음은 <caption>태그를 사용한 코드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><catption>태그 사용 방법</title>
</head>
<body>
    <table border="1">
        <caption>컴퓨터 프로그래밍</caption>
        <tr>
            <td>Java</td>
            <td>Python</td>
            <td>Ruby</td>
        </tr>
        <tr>
            <td>Jsp</td>
            <td>Php</td>
            <td>Node js</td>
        </tr>
        <tr>
            <td>HTML5</td>
            <td>CSS3</td>
            <td>JavaScript</td>
        </tr>
    </table>
</body>  
</html>
cs

<사진 1.1>

 

<사진 1.1> 코드는 1행에는 컴퓨터 프로그래밍 언어를 작성하였고, 2행은 서버 단 언어를 작성하였으며 3행은 웹 베이직 3개를 작성했습니다.

<caption>태그는 <table>태그 다음에 위치하고 있습니다. 다음은 결과 화면입니다.

 

<사진 1.1 결과 화면>

 

<caption>태그를 사용한 결과 화면입니다. <caption>태그로 작성한 테이블 제목은 표의 중앙에 표시되었습니다.

 

 2) <figcaption>태그

  1. <figcaption>태그는 figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure>태그로 감싼 후 <figcaption>태그를 이용해 제목을

     입력합니다.

  2. <caption>태그와 달리 <figcaption>태그는 중앙에 정렬되지 않습니다.

  3. <figcaption>태그를 <table>태그보다 앞에 사용하면 표 위에 제목이 표시됩니다.

  4. <figcaption>태그를 </table>태그보다 뒤에 사용하면 표 아래에 제목이 표시됩니다.

 

 다음은 <figcaption>태그를 <table>태그 앞에 사용한 코드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><catption>태그 사용 방법</title>
</head>
<body>
    <figure>
        <table border="1">
            <figcaption>컴퓨터 프로그래밍</figcaption>
            <tr>
                <td>Java</td>
                <td>Python</td>
                <td>Ruby</td>
            </tr>
            <tr>
                <td>Jsp</td>
                <td>Php</td>
                <td>Node js</td>
            </tr>
            <tr>
                <td>HTML5</td>
                <td>CSS3</td>
                <td>JavaScript</td>
            </tr>
        </table>
    </figure>
</body>  
</html>
cs

<사진 1.2>

 

다음은 결과 화면입니다.

 

<사진 1.2 결과 화면>

 

반응형
반응형

 

1. CSS란?

 

 - CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념입니다. HTML이 텍스트나 이미지, 표 같은 각 요소를 웹 문서에

   넣어 뼈대를 만드는 것이라면 CSS는 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상 등 디자인 요소를 담당합니다.

 

2. 스타일 형식

 

1
 p {text-align:center;} /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */
cs

<사진 1.1>

 

p : 맨 앞에 나와 있는 부분 즉 위의 예시에서 'p'부분을 '선택자(selector)' 라고 합니다. 이는 앞으로 만들 스타일 규칙을 어디에

     적용할 것인지 나타냅니다. <p> 태그가 적용된 요소에 중괄호( { } ) 사이의 스타일을 적용하겠다는 의미입니다.

 

text-align : 해당 위치에 있는 것을 '스타일 속성' 이라 부릅니다.

 

center : 해당 위치에 있는 것을 '속성 값' 이라 부릅니다.

 

* '스타일 속성'과 '속성 값'은 콜론( : )으로 구분하여 '스타일 속성' : '속성 값' 형식으로 표현합니다.

  '스타일 속성'과 '속성 값' 다음에는 세미콜론( ; )으로 구분합니다. 그래서 만약 두 개의 속성을 적용한다면 다음과 같이

  작성할 수 있습니다.

 

1
p{ color:blue; font-size:16px;} /* 텍스트 단락의 글자 색 파란색, 글자 크기 16px */
cs

<사진 1.2>

 

3. 스타일을 표기하는 방법

 

 스타일 규칙은 세미콜론( ; )으로 구분하여 중괄호( { } ) 안에 나열하면 상관없지만 앞에서 본 것처럼 한 줄로 길게 쓰면 속성이

 여러 개일 경우, 구분하기 어렵다는 단점이 있습니다. 그래서 공백을 최소화 시켜 파일 크기를 작게 만들 거라면 한 줄로

 표기하지만 개발자가 읽기 쉽고 유지/보수가 쉬우려면 여러 줄에 걸쳐 작성하는 것이 좋습니다.

 다시 말해 아래의 두 코드는 모두 같은 코드입니다.

 

 

1
h2{font-size:20px; color:orange;}
cs

<사진 1.3>

 

한줄로 작성한 코드입니다.

 

1
2
3
4
h2{
    font-size:20px;
    color:orange;    
}
cs

<사진 1.4>

 

여러 줄로 작성한 코드입니다.

한줄로 작성한 코드를 여러줄로 작성한 코드입니다. 다시 강조하지만 <사진 1.3>, <사진 1.4> 코드는 모양새는 다르지만 같은 기능을 하는 코드입니다.

반응형
반응형

 

1. colspan 속성 - 열 합치기

 

 기본형 : <td colspan="합칠 셀의 개수"> 내용 </td>

  <th colspan="합칠 셀의 개수"> 내용 </th>

 

 - colspan 속성의 col은 영어로 '열'을 뜻하는 column의 앞글자 col을 사용한 것입니다. 즉, 열을 합치고자할 때 colspan속성을 사용합니다. 

 

  다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다

<사진 1.1>

 

우선 <사진 1.1>의 좌측에 있는 표를 만드는 코드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>colspan 속성 사용 방법</title>
</head>
<body>
    <table border="1" width="250" height="100">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>  
</html>
cs

<사진 1.2>

 

<사진 1.2>의 table속성을 보면 width속성과 height속성이 있습니다. 이 속성을 설정해주어야 커다란 빈 공간으로 셀이 생성됩니다.

width속성과 height속성을 사용하지 않으면 아주 작은 셀로 표가 생성됩니다. 다음은 결과 화면입니다.

 

<사진 1.2 결과 화면>

 

이제 이 표의 2행2열 부분의 우측부분을 하나의 셀로 결합시켜보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>colspan 속성 사용 방법</title>
</head>
<body>
    <table border="1" width="250" height="100">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td colspan="3"></td>
        </tr>
        
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>  
</html>
cs

<사진 1.3>

 

<사진 1.3> 코드는 2행2열의 <td>코드 내부에 colspan 속성과 속성 값 3을 작성하였습니다. 열을 통합 시킬 것이므로 colspan 속성을 사용했으며

3개의 셀을 합칠 것이므로 속성 값을 3으로 설정했습니다. 다음은 결과 화면 입니다.

 

<사진 1.3 결과 화면>

 

 

2. rowspan 속성 - 행 합치기

 

 기본형 : <td rowspan="합칠 셀의 개수"> 내용< /td>

 기본형 : <th rowspan="합칠 셀의 개수"> 내용< /th>

 

 

 - rowspan 속성의 row는 영어로 '행'을 뜻하는 row 입니다. 즉, 행을 합치고자할 때 rowspan속성을 사용합니다. 

 

  다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다

.

<사진 1.4>

 

<사진 1.4>의 좌측에 있는 표는 위에서 이미 작성하였으므로 바로 rowspan 속성을 사용하여 셀을 합치는 코드를 작성해보고 결과를 확인해보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>rowspan 속성 사용 방법</title>
</head>
<body>
    <table border="1" width="250" height="100">
        <tr>
            <td rowspan="3"></td>
            <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>
cs

<사진 1.5>

 

3개의 행을 합칠 것이므로 rowspan 속성을 사용하였으며, 속성 값으로 3을 설정했습니다. 만약 2개의 행을 합치고자 한다면 속성 값을 2로 주면 됩니다.

그리고 2행과 3행 부분을 보면 <td></td>속성이 4개에서 3개로 수정되어 있습니다. 이유는 셀을 합치고 결과적으로 표현되는 표는 <사진 1.4>의

우측 표와 같이 3개의 셀이므로 <td></td>속성을 3개를 작성합니다. 다음은 결과 화면입니다.

 

<사진 1.5 결과 화면>

 

반응형

+ Recent posts