본문 바로가기
STUDY/Fullstack-Bootcamp

[풀스택 부트캠프] 섹션 3. CSS 기초

JESS2 2018. 1. 26. 22:43

1. CSS 기초와 Layout

1) table 태그

- <table></table> : 표 태그

- 예전에는 레이아웃을 구성할 때 표 태그를 사용했었지만 속도가 느려지는 등 여러가지의 이유로 table 태그는 표를 그릴 때만 사용한다.

- <tr></tr> : table row

- <td></td> : table data

- <th></th> : table head, 표의 제목을 쓸 때 사용


2) div / span 태그

- <div></div> : 하나의 면을 구성할 때 사용한다.

- <span></span> : 안의 내용에 의해서 크기가 달라진다.


3) style 적용 예시 (inline 작성)

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
<html>
    <head>
    </head>
    <body>
           <div style="width: 100%; height: 50px; background-color: rgb(200, 200,200); text-align: center;">
            <h1>회원 명부</h1>
        </div>
        <div style="width: 100%; height: 500px; background-color: white;">
            <table style="width: 100%; border: 1px solid black; border-collapse: collapse;">
                <tr>
                    <th>순번</th>
                    <th>이름</th>
                    <th>성별</th>
                    <th>전화번호</th>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">1</td>
                    <td style="border: 1px solid black;">김씨</td>
                    <td style="border: 1px solid black;">여자</td>
                    <td style="border: 1px solid black;">010-0000-0000</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">2</td>
                    <td rowspan="2" style="border: 1px solid black;">이씨</td>
                    <td style="border: 1px solid black;">남자</td>
                    <td style="border: 1px solid black;">010-1111-1111</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">3</td>
                    <td colspan="2" style="border: 1px solid black;">남자</td>
                </tr>
            </table>
        </div>
</html>
cs
- colspan : 행 병합
- rowspan : 열 병합


2. 레이아웃 작업

1) css 문법

- 속성이름 : 속성값;

- ex) width : 100%;

- ex) height : 50px;

- ex) background-color : white; 


2) style 태그 형태의 작성

- ex)

<style>

table {

border : 1px solid black;

background-color: yellow;

}

</style>

- 위의 style 적용 예시에서 inline으로 적용했던 것을 style 태그를 사용하여 똑같이 적용해보자.

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
<html>
    <head>
        <style>
            table {
                width: 100%;
                border: 1px solid black;
                border-collapse: collapse;
            }
            table td {
                border: 1px solid black;
            }
            div.header {
                width: 100%;
                height: 50px;
                background-color: rgb(200, 200,200);
                text-align: center;
            }
            div.content {
                width: 100%;
                height: 500px;
                background-color: white;
            }
        </style>
    </head>
    <body>
           <div class="header">
            <h1>회원 명부</h1>
        </div>
        <div class="content">
            <table>
                <tr>
                    <th>순번</th>
                    <th>이름</th>
                    <th>성별</th>
                    <th>전화번호</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>김씨</td>
                    <td>여자</td>
                    <td>010-0000-0000</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td rowspan="2">이씨</td>
                    <td>남자</td>
                    <td>010-1111-1111</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">남자</td>
                </tr>
            </table>
        </div>
</html>
cs


3) tagname / class / id

- 속성을 지정하고 싶을 때 사용

- tagname : tagname

- class : .class

- id : #id

- 크기 : tagname > class > id



3. 글과 이미지 스타일

1) font-size / color / font-weight / text-decoration / font-family

- font-size : 글자 크기 설정

ex) 1.0em(기본), 1.1em, 1.5em ...

- color : 글자 색상 설정 - 3가지 방법

ex) color : red;

ex) color : rgb(200, 10, 20);

ex) color : #245f80

- font-weight : 글자 굵기 설정

ex) font-weight: 100

ex) font-weight: 900

ex) font-weight: normal;

ex) font-weight: bold;

- font-decoration : 글자 밑줄 설정

ex) font-decoration : underline;

- font-family : 글씨체 설정

ex) font-famaily : "Times New Roman";
ex) font-famaily : "Times New Roman", Malgun Gothic, Serif;

- 폰트 이름에 공백이 있을 경우, 따옴표로 감싸줘야 한다.


2) 웹 폰트 적용하기

- 해당 사용자가 가지고 있는 폰트만 화면에 그려진다는 점과 폰트의 제한의 문제점을 개선한 것이 웹 폰트다.

- https://fonts.google.com/earlyaccess 에서 Korean을 검색하여 한글 폰트를 찾아 링크를 복사한다. 

- 아래의 링크를 <style> 태그 안에 넣고 font-famaily 속성에 지정하여 사용할 수 있다.

@import url(https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
font-family: 'Nanum Myeongjo';

4. 여백 스타일

1) padding / margin

- padding : 안 쪽 여백

- margin : 바깥 쪽 여백


2) box-sizing (border-box, content-box)

- 우리가 지정한 height 값에 맞춰서 padding과 border을 재조정하여 산출하는 것을 의미한다.

- 모든 브라우저에서 정확하게 동작하려면 아래의 세 줄을 전부 적어줘야 한다.

-webkit-box-sizing : border-box;

-moz-box-sizing : border-box;

box-sizing : border-box;


3) 여러 개의 class 적용

- 여러 개의 class를 적용할 때는 띄어쓰기를 사용하여 클래스명을 적어준다.

- ex) <div class="class1 class2"></div>

'STUDY > Fullstack-Bootcamp' 카테고리의 다른 글

[풀스택 부트캠프] 섹션 6. jQuery 사용하기  (0) 2018.02.06
[풀스택 부트캠프] 섹션 5. 자바스크립트 기본  (0) 2018.02.03
[풀스택 부트캠프] 섹션 4. 웹퍼블리싱  (0) 2018.01.31
[풀스택 부트캠프] 섹션 2. HTML 기초  (0) 2018.01.25
[풀스택 부트캠프] 섹션 1. 웹 기본  (0) 2018.01.24

'STUDY/Fullstack-Bootcamp' Related Articles

티스토리툴바