다람쥐의 개발 일상 블로그

자유/대외 활동

패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #6.4주차 학습후기

Chipmunks 2019. 4. 26.
728x90




벌써 4주차 학습까지 끝났다~~


CSS 까지 완료하여 진도 34% 까지 올렸다.


프로그래밍 첫걸음 이미지에 있는 언어 5개 중에서 두 번째까지 수료했다.


이번 CSS 파트도 순수 강의 영상은 1시간 정도였다.


과제까지 하려고 1~2시간 더 잡았다


CSS는 기존에 밋밋한 HTML 화면을 꾸며주는 역할을 해준다.


더 자세히 정리해보자.


4주차 진도에서는

  • 01. [CSS] CSS 기초
  • 02. [CSS] CSS 선택자
  • 과제1. 특정 자식 요소 접근하기
  • 03. [CSS] CSS 스타일
  • 과제2. 폰트 다운받고 불러오기
  • 04. [CSS] CSS 스타일 활용
  • 과제3. Background Image 사용해보기
  • 05. [CSS] Bootstrap 맛보기
  • 과제4. 부트스트랩으로 소개 화면 설계 변경하기

를 학습한다. 후에 파이썬 웹 크롤러와 연결되니 꼼꼼하게 봐둬야 한다.

CSS를 책으로 배울 때는 무조건 암기해야할 내용들도 많았는데

이번 강의를 진행하면서 속성들을 자연스럽게 익힐 수 있다.

CSS 코드를 타이핑하면서 결과를 바로바로 확인할 수 있어서 그게 좋았다.

HTML 내용들을 복습하면서 CSS 내용으로 이어지니 흐름이 자연스러웠다.


01. [CSS] CSS 기초

CSS는 Cascading Syle Sheets 의 준말이다. 한마디로 웹페이지 스타일 지정 전용 언어로 정리할 수 있다.

스타일 지정은 다음 세 가지 방법으로 한다.

  1. 엘리먼트 단위로 지정
  2. 웹 페이지 단위로 지정
  3. 웹 사이트 단위로 지정

CSS 코드는 <style></style> 태그 사이에 작성한다.
기본적으로

1
2
3
4
5
6
7
<style>
element {
    // CSS 코드
}
 
</style>
cs

형식이다.

속성: 값;

형태로 HTML 엘리먼트 태그에 속성에 값을 줄 수 있다.

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>
        <meta charset="utf-8">
        <title>제목</title>
 
        <style>
            
            h1 {
                color: blue;
            }
            p {
                color: red;
            }
 
        </style>
    </head>
    <body>
        
        <h1>제목 태그입니다.</h1>
        <h1>제목 태그입니다.</h1>
        <p>문단 태그입니다.</p>
        <p>문단 태그입니다.</p>
 
    </body>
</html> 
cs




CSS에

태그 {
속성: 값;
}

코드로

해당 HTML 태그에 color 속성으로 텍스트에 색깔을 줄 수 있다.

전에 HTML 강의에서 태그에 식별자를 줄 수 있다고 배웠다.

id 속성과 class 속성이 있다. id 속성은 하나의 페이지의 유일한 요소의 '식별자' 역할이고
class 속성은 하나의 페이지에 다중 요소의 '식별자' 역할이다.

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> 
    <head>
        <meta charset="utf-8">
        <title>제목</title>
 
        <style>
            
            h1 {
                color: blue;
            }
            p {
                color: red;
            }
            #fast {
                color: powderblue
            }
            .campus {
                color: yellow;
            }
 
        </style>
    </head>
    <body>
        
        <h1 id="fast">제목 태그입니다.</h1>
        <h1>제목 태그입니다.</h1>
        <p class="campus">문단 태그입니다.</p>
        <p>문단 태그입니다.</p>
 
    </body>
</html> 
cs

첫 번째 h1 태그에 fast 라는 id 값을 줬다. 또 첫 번째 p 태그에 campus 라는 class 값을 줬다.

이를 CSS 에서 인식하는 방법은 id 값에는 앞에 #을 붙이고 class 값에는 .을 붙인다.

그러면 #아이디, .클래스 식별자가 있는 태그 속성에 값을 줄 수 있다.



[ QUIZ ]
  1. 'CSS'는 웹페이지의 스타일 전용 언어이다.
  2. 웹 페이지의 CSS 스타일을 적용하는 방법은 크게 '3' 가지가 있다.
  3. 'style' 태그는 head 태그에 작성하며 스타일 적용을 위한 태그다.
  4. id 속성으로 요소를 선택하기 위해선 '#' 기호를 사용한다.
  5. class 속성으로 요소를 선택하기 위해선 '.' 기호를 사용한다.

02. [CSS] CSS 선택자

저번에 HTML 을 학습할 때, 자식, 부모, 형제 태그를 배웠다.


이런 관계들로 CSS 에서도 요소를 선택 할수 있다.


  1. 자손(Descendent) 선택자
  2. 자식(Child) 선택자
  3. 인접 형제(Adjacent Sibling) 선택자
  4. 일반 형제(General Sibling) 선택자

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<html> 
    <head>
        <meta charset="utf-8">
        <title>제목</title>
 
        <style>
            
            div#test1 p {
                color: red;
            }
            div#test2 > p {
                color: red;
            }
            
            div#test3 p#p1 + p {
                color: red;
            }
            div#test4 p#p1 ~ p {
                color: red;
            }
 
        </style>
    </head>
    <body>
        
        <div id="test1">
            <p>문단 태그입니다.</p>
            <div>
                <p>문단 태그입니다.</p>
            </div>
        </div>
 
        <hr>
 
        <div id="test2">
            <p>문단 태그입니다.</p>
            <div>
                <p>문단 태그입니다.</p>
            </div>
        </div>
 
        <hr>
 
        <div id="test3">
            <p>문단 태그입니다.</p>
            <p>문단 태그입니다.</p>
            <p id="p1">문단 태그입니다.</p>
            <p>문단 태그입니다.</p>
            <p>문단 태그입니다.</p>
        </div>
 
        <hr>
 
        <div id="test4">
            <p>문단 태그입니다.</p>
            <p>문단 태그입니다.</p>
            <p id="p1">문단 태그입니다.</p>
            <p>문단 태그입니다.</p>
            <p>문단 태그입니다.</p>
        </div>
 
    </body>
</html> 
cs

첫 번째 test1 에서는 모든 자손 p 태그가 선택이 됐다.


두 번째 test2 에서는 바로 아래 자식에 있는 p 태그만 선택이 됐다.


세 번째 test3 에서는 p1 아이디를 갖고 있는 p 태그에 바로 뒤에 있는 요소가 선택이 됐다.


네 번째 test4 에서는 test3과는 달리 뒤에 있는 모든 요소들이 선택이 된 것을 확인할 수 있다.


[ QUIZ ]


  1. CSS '선택자' 문법은 엘리먼트의 관계로 대상을 선택하는 방법이다.
  2. 자손 선택자는 선택자 ' ' 선택자 형태로 작성한다.
  3. 자식 선택자는 선택자 ' > ' 선택자 형태로 작성한다.
  4. 인접 형제 선택자는 선택자 ' + ' 선택자 형태로 작성한다.
  5. 일반 형제 선택자는 선택자 ' ~ ' 선택자 형태로 작성한다.

과제1. 특정 자식 요소 접근하기

이번 과제는 강사님의 문제를 풀어보는 과제다. CSS에서 선택자로 속성을 변경해보는 실습이다.

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>선택자 문법 사용하기</title>
        <style>
           
            p#p_tag ~ p {
                color: red;
            }
            table.table > thead th {
                color: red;
            }
            table.table > tbody > tr  {
                color: blue;
            }
            table.table > tbody > tr + tr  {
                color: yellow;
            }
 
        </style>
    </head>
    <body>
        <div>
            <h1>제목</h1>
            <div>
                <p id="p_tag">문단</p>
                <p>문단</p>
            </div>
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>제목1</th>
                            <th>제목2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>본문1</td>
                            <td>본문2</td>
                        </tr>
                        <tr>
                            <td>본문3</td>
                            <td>본문4</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>
cs


제목1, 제목2 까지는 할만 했는데,


본문1, 본문2와 본문3, 본문4를 따로 선택하는 방법이 어려웠다.


본문 1, 본문 2를 먼저 선택한 다음에


인접 형제 선택자로 바로 그 뒤에 있는 본문 3, 본문 4를 선택해서 변경했다.


03. [CSS] CSS 스타일


CSS 박스 모델은 위 사진으로 정리할 수 있다.


border은 콘텐츠를 감싸는 테두리다. padding 은 콘텐츠와 border 사이를 뜻한다.


margin은 border 바깥 영역을 의미한다.


각 border, padding, margin은 left, right, bottom, top 영역을 따로따로 설정할 수 있다.


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>
        <meta charset="utf-8">
        <title>선택자 문법 사용하기</title>
        <style>
           
            p, strong {
                color: red;
                border: 10px solid;
                padding: 5px;
                margin: 100px;
                width: 100px;
                height: 100px;
                margin-top: 20px;
            }
 
        </style>
    </head>
    <body>
        
        <p>문단 태그입니다.</p>
        <p>문단 태그입니다.</p>
        <p>문단 태그입니다.</p>
        <strong>강조 태그입니다.</strong>
 
    </body>
</html>
cs


border: 10px solid; 속성으로 테두리에 10 px 짜리 실선을 추가했다.

padding 속성으로 콘텐츠와 border 사이에 5px 짜리 여백을 추가했다.

margin 속성으로 border 바깥 여백을 100 px 을 추가했다.

mrgin-top  속성으로 위의 margin 속성만 20 px 로 변경했다.

width와 height 속성으로 너비와 높이를 설정할 수 있다.

다만, strong 태그 같은 인라인 요소는 너비와 높이를 지정할 수 없다.

[ QUIZ ]

  1. 'width' 은 요소의 콘텐츠 너비에 해당하는 속성값이다.
  2. height 속성은 '콘텐츠 높이'에 해당하는 속성값이다.
  3. 'padding' 은 콘텐츠와 테두리간의 간격을 나타낸다.
  4. 인라인 요소는 '너비'와 '높이' 속성을 가질 수 없다.
  5. 'margin' 은 엘리먼트와 엘리먼트간 간격을 나타낸다.


과제2. 폰트 다운받고 불러오기

https://fonts.google.com 에 접속하여 인터넷만 연결되어 있으면 폰트를 추가할 수 있다.

Noto Sans KR 폰트를 선택해 보았다. 오른쪽 위에 + 버튼으로 목록에 추가할 수 있다.


그리고 아래 탭을 추가하면 다음과 같이 뜬다.


Embed font 에서 HTML 코드를 복사하여 <head></head> 태그 안에 붙여넣는다.


그리고 적용하고 싶은 태그에 font-family 속성으로 외부에서 다운로드 받은 폰트를 적용할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>폰트 적용하기</title>
        <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR" rel="stylesheet">
        <style>
            h1, p{
                font-family: 'Noto Sans KR', sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>패스트캠퍼스</h1>
        <p>FastCampus</p>
        <p>12345</p>
    </body>
</html>
cs



font-family: 'Noto Sans KR', sans-serif; 에서

sans-serif 는 무엇일까? 그리고 그냥 serif 와는 어떤 차이일까?

이는 디자인에서도 배운다.

sans 는 ~이 없는 이라는 의미다. 즉, serif 가 없다 라는 의미다. serif 는 글자의 획 끝에 어떤 꾸밈이 들어간 것을 뜻한다.

즉 sans-serif 는 글자에 그런 글자끝에 꾸밈이나 장식들이 없는 글자들을 뜻한다. 주로 고딕체에 해당된다.

serif 체에 해당하는 Times New Roman 서체와 비교해보자.

1
2
3
4
5
6
7
8
9
<style>
    h1, p{
        font-family: 'Noto Sans KR', sans-serif;
    }
    h2 {
        font-family: 'Times New Roman', serif;
    }
</style>
cs

1
2
3
4
<h1>패스트캠퍼스</h1>
<h2>FastCampus</h1>
<p>FastCampus</p>
<p>12345</p>
cs


serif 체는 글자 끝에 꾸밈이 들어간 것을 확인할 수 있다. 반면에 sans-serif 체는 그런 꾸밈이 없는 것을 확인할 수 있다!


04. [CSS] CSS 스타일 활용

CSS를 불러오려면 link 태그로 불러올 수 있다.

1
<link rel="stylesheet" type="text/css" href="css/index.css">
cs

href 속성에 외부 css 파일 경로를 입력하여 불러올 수 있다.

1
2
3
p {
    color: red;
}
cs

index.css 파일에 위와 같이 적혀있다.

이제 index.css 파일을 불러왔으니 모든 p 태그의 콘텐츠 색상이 red 가 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>폰트 적용하기</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
        <div>
            <p>문단 태그 입니다.</p>
            <p style="color: black;">문단 태그 입니다.</p>
            <p>문단 태그 입니다.</p>
        </div>
    </body>
</html>
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
@charset "utf-8";
 
div {
    color: red;
    font-size: 25px;
    font-style: italic;
    border: 5px solid red;
    padding: 50px;
    margin: 10px;
 
    width: 500px;
    height: 250px;
}
cs


index.html, index.css 파일이 위처럼 되어있다. font-size 속성으로 글자 크기를 지정할 수 있다.

font-style 속성으로 italic 속성으로 기울기를 줄 수 있다.

div 태그에 CSS 속성을 줬더니 그 자식 태그인 p 태그들도 맞게 변경된다. 이를 상속이라고 한다.

그러나 border, padding, margin, width, height 속성 같은 박스 모델은 상속이 되지 않는다.

그리고 두 번째 p 태그에서는 style 속성으로 직접 엘리먼트 태그에 값을 줬다.

직접 style 속성으로 준 스타일이 우선순위가 높다.

[ QUIZ ]

  1. 'link' 태그를 통해 외부 CSS 파일을 불러올 수 있다.
  2. '엘리먼트' 단위로 작성한 CSS 코드가 우선순위를 갖는다.
  3. '박스 모델'과 관련된 속성은 스타일 상속이 이루어지지 않는다.

과제3. Background Image 사용해보기

화면에 이미지를 꽉 채우는 HTML 페이지를 만들어보는 실습이다.

background 속성으로 이미지를 외부에서 불러오고, 여러가지 속성이 있다.

background-repeat 속성은 background 이미지 반복에 관한 속성이다.

background-position 속성은 background 이미지를 어디에 위치시킬 것이지 정할 수 있다.

background-attachment 속성은 background 이미지의 스크롤 여부를 설정한다.

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@charset "utf-8";
 
body {
    background-image: url("http://i.imgur.com/01WQMnV.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: 100% 100%;
}
 
.bg {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
 
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
 
.div1 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 300px;
 
    border: 2px solid white;
 
    padding: 50px;
 
    width: 250px;
 
    text-align: center; 
}
 
a {
    font-size: 32px;
    text-decoration: none;
}
 
a:link {
    color: white;
}
 
a:hover {
    color: white;
}
 
a:visited {
    color: white;
}
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>폰트 적용하기</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
        <div class="bg"></div>
 
        <div class="div1">
            <a href="https://www.fastcampus.co.kr">패스트 캠퍼스</a>
        </div>
    </body>
</html>
cs


배경 이미지 위에 투명한 검은색을 입히려고 div 태그에 background 색을 지정했다.


position 속성을 absolute 속성을 줘 left, top, width, height 속성으로 크기와 위치를 조절했다.


z-index 속성으로 다른 엘리먼트 태그와의 레이어를 제일 아래로 위치시켰다.


Background Image 과제 성공!


05. [CSS] Bootstrap 맛보기

프레임워크는 프로그램 개발을 도와주는 이미 작성된 각종 소스코드의 집합을 뜻한다.

Bootstrap 프레임워크는 웹 제작을 도와주는 프레임워크다.

이 때 Bootstrap 버전은 최신 버전은 4 버전이다.

Bootstrap 공식 홈페이지에서 Install 법과 Document 들을 볼 수 있다.

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <title>폰트 적용하기</title>
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
        <div class="bg"></div>
 
        <div class="container">
            <h1>다람쥐 입니다.</h1>
            <ul class="nav nav-tabs">
                <li class="nav-item"><a class="nav-link active" href="#">홈</a></li>
                <li class="nav-item"><a class="nav-link" href="#">내정보</a></li>
                <li class="nav-item"><a class="nav-link" href="#">내정보</a></li>
                <li class="nav-item"><a class="nav-link" href="#">내정보</a></li>
            </ul>
 
            <div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>강의명</th>
                            <th>날짜</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>HTML</td>
                            <td>2018-01-01</td>
                        </tr>
                        <tr>
                            <td>HTML</td>
                            <td>2018-01-01</td>
                        </tr>
                        <tr>
                            <td>HTML</td>
                            <td>2018-01-01</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
 
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>
cs

bootstrap css와 javascript 를 포함하는 것으로도 웹 페이지 디자인을 할 수 있다.

과제4. 부트스트랩으로 소개 화면 설계 변경하기

이번 과제는 부트 스트랩으로 소개 화면 설계하는 과제다.

나는 부트스트랩 공식 홈페이지에서 템플릿을 참고하여 만들었다.


내가 만든 소개 화면은 다음과 같다.


배경 색이 안바뀌어서 약간 해맸다. 알고보니 타이핑 오류가 Visual Studio Code 포맷팅에 가려 안보였던 것이다.


1
2
3
4
5
html,
body {
  height: 100%;
  background-color: #333;
}
cs


왜 VS Code 내부에서 이런 오류가 나타나는지는 모르겠지만 ..


다시 코드를 작성하여 해결했다.



이번 진도는 개인적으로 눈이 즐거웠다(?)


직접 웹 페이지를 꾸며볼 수 있어서 새로웠고


CSS 속성도 검색해서 찾아보는 습관을 기르게 됐다.


그리고 부트스트랩 프레임워크를 실습해보기도 하고 공식 문서를 찾아


여러가지 재밌는 기능도 실습했다.







저작자표시

'자유 > 대외 활동' 카테고리의 다른 글

패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #8.6주차 학습후기, 학습진도 50% 달성!  (0) 2019.05.05
패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #7.5주차 학습후기  (0) 2019.05.04
패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #5.3주차 학습후기  (0) 2019.04.24
패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #4.2주차 학습후기  (0) 2019.04.20
패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #3. 생활코딩! HTML+CSS+JAVASCRIPT 도서 수령  (0) 2019.04.15

댓글

티스토리툴바