background와 관련된 속성은 다음과 같습니다.

background-color(출처 : w3schools 링크 클릭)

 배경 색상을 설정하는 속성

 CSS문법

 background-color : color | transparent | initial | inherit;

 속성 값

 값 설명
 color 색상으로 지정된 이름(red,blue 등), 색상코드(#ffffff), 함수값(rgb(255,0,0) 중 하나를 입력               
 transparent 투명, 기본값
 inital 기본값으로 초기화
 inherit 부모 요소의 값을 상속받음

 브라우저별 지원

 브라우저별 지원 가능한 최소 버전

크롬 익스폴로러/엣지 파이어폭스 사파리 오페라
1.0 4.0 1.0 1.0 3.5

 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <style>
    #box1{    background-color: red;    }
    #box2{    background-color: #ff0000;}
    #box3{    background-color: rgb(255,0,0);}
    .box{
        width: 50px;
        height: 50px;
        display: inline-block;
        border: 1px solid while;
    }
    </style>
</head>
<body>
    <div class="box" id="box1">box1</div>
    <div class="box" id="box2">box2</div>
    <div class="box" id="box3">box3</div>
</body>
</html>
 
  

 결과

box1
box2
box3

background-image(출처 : w3schools 링크 클릭)

 배경 이미지를 설정하는 속성으로 url함수를 통해 이미지를 불러옴

 CSS 문법

 background-image: url|none|initial|inherit;

 속성 값

 값 설명
 url('URL') URL에 있는 이미지
 none 배경 이미지 설정을 안함. 기본값
 linear-gradient(색상,...,색상) 두가지 이상의 색상으로 top에서 bottom으로 퍼져나가는  그라데이을 배경에 적용
 radial-gradient(색상,...,색상) 두가지 이상의 색상으로 중심에서 가장자리로 퍼져나가는 그라데이션을 배경에 적용
 repeating-linear-gradient(색상,...,색상) linear-gradient()을 반복
 repeating-radial-gradient(색상,...,색상) radial-gradient()을 반복
 initial 기본값으로 초기화
 inherit 부모 요소의 값을 상속받음

 브라우저별 지원

 브라우저별 지원 가능한 최소 버전

크롬 익스폴로러/엣지 파이어폭스 사파리 오페라
1.0 4.0 1.0 1.0 3.5

 예제

 

 디버깅은 코드를 단계별로 실행하여 이상 동작이 발생한 부분을 살펴볼 때 사용됩니다. 이번 시간에는 Visual Studio 2019 디버깅 과정에 대해 살펴보겠습니다. 

1. 디버깅 시작 지점 설정

 소스 파일 줄 표시하는 숫자 앞 회색부분을 클릭하면 빨간 원이 생기며, 빨간원은 여러개 지정할 수 있습니다.단, 프로그램 시작 시 먼저 만나는 빨간 원이 디버깅 시작지점이 됩니다.

2. 디버깅 시작 하기

 보통 코드를 실행할 때 디버깅하지않고 시작하기(단축키 Ctrl+F5)를 하는데 디버깅을 하려면 디버그 메뉴에 디버깅 시작(단축키 F5)을 누릅니다.

 디버깅이 시작되고 처음 만나는 빨간 원에 노란색 화살표가 생기면서 프로그램이 대기를 합니다.

 위의 화면을 설명하자면 처음 만나는 빨간 원이 있는 6줄에 노란 화살표가 생겼으며, 해당 지점에서 대기중인 상황입니다. 화면 하단에 로컬을 보면 6줄이 실행되기전을 기준으로 i,j는 값이 초기화 되어 있지 않아 -858993460(저는 쓰레기값이라고 부릅니다.)가 들어가 있는 것을 볼 수 있습니다. 그리고 row는 초기값이 5가 들어가 있는 것을 볼 수 있습니다.

3. 다음 단계 넘어가기

 현재 디버깅중인 줄을 기준으로 다음으로 넘어가는 방법은 다음과 같습니다.

 3.1 한 단계씩 코드 실행(단축키 F11)

 - 현재 라인에 함수가 있으면 해당 함수가 구현된 시작점으로, 반복문이나 조건문이면 괄호안으로 들어가 세부 내용을 살필 때 사용합니다.

 3.2 프로시저 단위 실행(딘축키 F10)

 - 함수 세부 내용을 살피지 않고 함수가 호출됐을 때 결과 단위로 실행할 때 사용합니다.

 3.3 프로시저 나가기(단축키 Shift + F11)

 - 함수 세부 내용을 살피지 않고 빠져 나갈 때 사용합니다.

 3.4 계속

 - 현재 줄에서 자동으로 진행되어 다음 빨간원을 만나면 멈출 때 사용합니다.

4. 디버깅 확인하기

 디버깅에서 확인해야 할 내용은 해당 단계에서 로컬에 나와있는 변수의 값이 맞는지 확인하고 진행 과정이 생각한 것과 같은지 확인하면서 다르면 왜 다른지 확인하면서 디버깅을 합니다.

5. 조사식 확인하기

 로컬에서 보여주는 값 이외에 식들을 입력하여 확인하고 싶을 때 조사식을 이용하면 됩니다. 메뉴에서 디버그 > 창 > 조사식 > 조사식 숫자를 클릭하면 됩니다.

 보통 하단에 조사식창이 생기며 클릭 후 원하는 식을 입력하여 값을 확인해볼 수 있습니다.

 이것으로 Visual Studio 2019 디버깅 사용하기를 마치도록 하겠습니다.

 도움이 되셨다면 광고 클릭!

이번 시간에는 div 태그로 이루어진 박스를 가운데로 정렬하는 방법에 대해 살펴보겠습니다. 

  1. maring을 이용한 가운데 정렬
  2. position:absolute를 이용한 가운데 정렬

 이 두 방법 모두 계산의 편리를 위해 box-sizing을 border-box로 설정하여 width가 컨텐츠, 테두리, 패딩을 모두 포함한 길이로 설정하게 했습니다.

1. margin을 이용한 가운데 정렬 

 - 가장 많이 사용되는 방법 중 하나로 div 태그의 가로의 길이를 설정 후 좌 우에 margin을 auto로 주는 방법입니다. 이 방법은 부트스트랩4에서 mx-auto라는 클래스로 제공하고 있습니다.(참고 링크) 여기서는 부트스트랩4에서 제공하는 클래스가 아닌 직접 작성한 예시를 통해 살펴보겠습니다. 필요한 설명은 주석으로 처리했습니다.

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
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div 가운데 정렬 예제</title>
    <style>
        *{
            /* body 태그의 불필요한 margin 제거를 위해*/
            margin: 0;    
            /* 태그의 가로를 테두리+패딩+컨텐츠를 포함한 길이로 설정하기 위해*/
            box-sizing: border-box;     
        }
        .container{
            /* 박스의 가로를 800px로 */
            width: 800px;
            /* 브라우저의 높이를 박스의 높이로*/
            height: 100vh;
            /* 박스를 가운데로 */
            margin: 0 auto;
            /* 만들어진 박스의 가로를 확인하기 위한 테두리 */
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
  

 

2. position:absolute를 이용한 가운데 정렬

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
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div 가운데 정렬 예제</title>
    <style>
        *{
            /* body 태그의 불필요한 margin 제거를 위해*/
            margin: 0;    
            /* 태그의 가로를 테두리+패딩+컨텐츠를 포함한 길이로 설정하기 위해*/
            box-sizing: border-box;     
        }
        .container{
            /* 박스의 가로를 800px로 */
            width: 800px;
            /* 브라우저의 높이를 박스의 높이로*/
            height: 100vh;
            /* 만들어진 박스의 가로를 확인하기 위한 테두리 */
            border: 2px solid black;
            position: absolute;
            /* position을 absolute로 할 경우 다른 박스들과 겹칠수 있기 때문에 z-index를 높여
               겹치더라도 위에 있게하기 위해 적당한 수로 설정 */
            z-index: 10;
            /* box-sizing을 border-box로 설정했기 때문에 width의 반인 400px를 빼주면 된다.
               box-sizing 설정을 안했을 경우 border와 padding의 값도 계산해야 한다.  */
            left: calc(50% - 400px);
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
 
  

 

실행 결과

 이번 시간에는 프로그래밍 입문자들이 어려워 하는 함수 생성하는 과정에 대해 살펴보겠습니다. 여기서는 함수 구현이 아닌 함수 선언부를 어떻게 작성하는가에 대해 살펴볼것입니다. 먼저 함수를 생성할 때 다음 질문들을 고려해야 합니다.

  • 함수명은 어떻게 지어야 하는가?
  • 매개변수(또는 인자)는 어떤 것으로 설정해야 하는가?
  • 리턴값은 어떤 것으로 설정해야 하는가?

 위 질문들의 답을 살펴보면서 함수 생성하는 과정에 대해 살펴보겠습니다.

1. 함수명은 어떻게 지어야 하는가?

 함수명은 해당 함수명을 보고 기능이 유추가능하도록 의미있게 짓는 것이 좋습니다. 우리가 자주 쓰는 printf()함수를 보면 출력과 관련된 기능이라는 것을 유추할 수 있습니다. 만약 기능은 콘솔화면에 문자열을 출력하는 기능인데 함수 명을 scanf()로 짓는다면 해당 함수를 사용하는 입장에서는 황당할 수 있습니다.

2. 매개변수는 어떤 것으로 설정해야 하는가?

 매개변수는 함수를 실행하기 위해 필요한 정보인 입력에 해당합니다. 그리고 필수적이인 정보들을 매개변수로 설정해야합니다. 아래 예시를 보면서 매개변수를 어떻게 설정해야 하는지 생각해봅시다.

 상황1

  • 선생님 : A학생 두 수를 더해보세요.
  • A학생 : 더해야 하는 두 수가 뭐죠?

 상황2

  • 선생님 : A학생 두 수 1과 2를 더해보세요.
  • A학생 : 3입니다.

 상황3

  • 선생님 : A학생 두 수 1과 2와 3을 더해보세요.
  • A학생 : 두 수가 아니라 세 수인데요?

 위의 상황들을 살펴보면 선생님의 질문으로 가장 옳은 상황은 상황 2라는 것을 알 수 있습니다. 상황 1은 정보가 적어서 문제가 발생하고 상황 3은 정보가 너무 많아서 문제가 발생합니다. 매개변수도 마찬가지입니다. 상황 1과 같이 정보가 적으면 동작을 실행할 수 없고 상황 3처럼 많으면 동작은 실행되지만 불필요한 정보를 전달하게 됩니다.

 하지만 함수의 재사용성을 위해 상황에 따라서는 매개변수가 늘어 날수 있습니다. 아래 예시를 통해 함수의 재사용성을 위해 매개변수가 추가된 상황을 살펴봅시다.

  • void printStar1() : *을 5개 찍어주는 함수
  • void printStar2(char star) : star문자열을 5개 찍어주는 함수
  • void printStar3(char star, int count) : star문자열을 count개 찍어주는 함수

 위 함수들중에서 문제점은 다음과 같습니다.

  • printStar1()에서 출력하는 모양이 *이 아닌 ☆을 출력하고 싶다면 새로운 함수를 만들어야 한다.
  • printStar2()에서 찍어주는 갯수를 5개가 아닌 6개를 하고 싶다면 새로운 함수를 만들어야 한다.

 따라서 printStar3()처럼 재사용성을 위해 매개변수가 늘어날 수 있습니다.

3. 리턴값은 어떤것으로 설정해야 하는가?

 리턴값은 해당 함수를 호출한 함수가 원하는 값으로 설정해야합니다. 예를 들면 두 정수를 더해서 콘솔에 출력하는 함수가 있다면 해당 함수는 콘솔에 출력하고 끝내면 되기 때문에 리턴값이 void입니다. 하지만 두 정수를 더해서 해당 결과를 알려주는 함수가 있다면 리턴값은 두 정수의 합인 int가 됩니다.

4. 함수를 만드는 과정

  1. 생성하려는 함수의 기능을 최대한 자세히 풀어씁니다.
  2. 풀어쓴 기능에서 매개변수, 리턴값을 설정합니다.
  3. 함수명을 설정합니다.
  4. 함수 선언부를 작성하고 구현합니다.
  5. 생성한 함수를 main함수에서 테스트합니다.

 아래 예시는 위 과정을 토대로 만들어진 두 정수의 합을 구하는 함수입니다.

1
2
3
4
5
6
7
8
9
10
11
12
/*
기능 : 두 정수 num1과 num2가 주어지면 두 정수의 합을 알려주는 함수
매개변수 : 두 정수 num1,num2 => int num1, int num2
리턴타입 : 두 정수의 합 => int
함수이름 : sum
함수선언 
리턴타입 함수이름(매개변수)
*/
int sum(int num1, int num2){
  return num1 + num2;
}
 
 
  

 이상으로 함수 생성 과정에 대해 마치도록 하겠습니다. 질문이 있으시면 댓글에 남겨주세요. 긴 글을 읽어주셔서 감사합니다.

+ Recent posts

티스토리툴바