반응형

1. 부트스트랩이란?

-> 오픈소스 html, css, javascript 프레임 워크 /프론트 엔드 프레임 워크(이미 만들어진)


<html>

1
2
3
4
5
6
7
8
9
10
11
12
<head>
<-- 가져왔던 css 앞에 붙임>
<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">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<-- 끝부분에 붙여줌 -->
<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>
 
cs


-> 이 방법 말고도 많은 방법들이 있다. 


-> component에서 내가 쓰고 싶은 요소 가져와서 <body>태그에 넣으면 만들어 줌.


-> bootstrapk.com (한국어 버전으로 해석해 놓음)


2. 기본 구성원(컨테이너(container) / 행(row) / 열(column) )


-기본 규칙 : 행(<div class="row">)은 꼭 컨테이너(<div class="container")>안에 넣어주기

열(<div class="col">)은 꼭 행(<div class="row")>안에 넣어줌 / 오직 열만 행의 직속 자식이 될 수 있음

콘텐츠(우리가 그리드에 넣고 싶은 내용) 은 꼭 열(<div class="col">)안에 넣어줌


-기본 사용법 : 부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다고 생각/

 한 줄을 정확히 3등분 하고 싶으면 4칸을 차지하는 열 3개를 사용 => <div class="col-4">


ex) 다양한 방식으로 12칸 나눔

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
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
 
<body>
  <div class="container">
    <div class="row">
      <!-- 정확히 3등분 -->
      <div class="col-4 first">first</div>
      <div class="col-4 second">second</div>
      <div class="col-4 third">third</div>
    </div>
 
    <div class="row">
      <!-- 정확히 2등분 -->
      <div class="col-6 first">first</div>
      <div class="col-6 second">second</div>
    </div>
 
    <div class="row">
      <!-- 1대 5 비율 -->
      <div class="col-2 first">first</div>
      <div class="col-10 second">second</div>
    </div>
 
    <div class="row">
      <!-- 1대 2대 1 비율 -->
      <div class="col-3 first">first</div>
      <div class="col-6 second">second</div>
      <div class="col-3 third">third</div>
    </div>
  </div>
</body>
cs


<결과>

=> 12칸을 넘어가면 새로운 줄로 넘어감

=> 왜 하필 12?

: 12는 상당히 많은 숫자들(1, 2, 3, 4, 6, 12)로 나누어지기 때문에 굉장히 유연


-중첩(nesting) : 열을 또 여러 열로 나누는 것

=> <div class="col-6"> 안에 <div class="row">을 써야함

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
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
 
<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        <div class="row"> <!-- 중첩을 위한 새로운 행 -->
          <div class="col-3 first">1</div>
          <div class="col-3 second">2</div>
          <div class="col-3 third">3</div>
          <div class="col-3 fourth">4</div>
        </div>
      </div>
 
      <div class="col-6">
        <div class="row"> <!-- 중첩을 위한 새로운 행 -->
          <div class="col-3 first">5</div>
          <div class="col-3 second">6</div>
          <div class="col-3 third">7</div>
          <div class="col-3 fourth">8</div>
        </div>
      </div>
    </div>
  </div>
</body>
 
cs


<결과>


3. 그리드 시스템 => 반응현 웹 디자인 할 때 빛을 발함


- 정해둔 구간

  1. Extra Small (< 576px): 모바일
  2. Small (≥ 576px): 모바일
  3. Medium (≥ 768px): 타블릿
  4. Large (≥ 992px): 데스크탑
  5. Extra Large (≥ 1200px): 와이드 데스크탑


-컨테이너(container)

<div class="container"> : 구간별로 그리드에 고정된 width를 설정

=> 고정된 가로값 설정해주고 싶다면 사용


<container 클래스 사용시 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
.container {
  width: 100%; /* extra small */
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/* small */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
/* medium */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
/* large */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
/* extra large */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
cs

<div class-"container-fluid"> ; 그리드는 항상 width: 100%

1
2
3
4
5
6
7
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
cs


-열(column) : 반응형 구간별(12칸) 열을 차지하는 칸의 개수도 다르게 할 수 있다


=ex) 구간별로 모두 설정되어 있는 경우 

1
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
cs

        1. Extra Small (< 576px): 12칸을 모두 차지
        2. Small (≥ 576px): 6칸 차지
        3. Medium (≥ 768px): 4칸 차지
        4. Large (≥ 992px): 3칸 차지
        5. Extra Large (≥ 1200px): 2칸 차지



=ex2) 특정 구간만 설정( 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지)

1
<div class="col-12 col-lg-3">
cs

        1. Extra Small (< 576px): 12칸을 모두 차지
        2. Small (≥ 576px): 12칸을 모두 차지
        3. Medium (≥ 768px): 12칸을 모두 차지
        4. Large (≥ 992px): 3칸 차지
        5. Extra Large (≥ 1200px): 3칸 차지


=ex3)

1
<div class="col-6">
cs

        1. Extra Small (< 576px): 6칸 차지
        2. Small (≥ 576px): 6칸 차지
        3. Medium (≥ 768px): 6칸 차지
        4. Large (≥ 992px): 6칸 차지
        5. Extra Large (≥ 1200px): 6칸 차지


반응형
저작자표시 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

11. 반응형 웹  (0) 2019.03.23
10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
반응형

1. 반응형 웹이란?

-> 브라우저의 사이즈에 따라 레이아웃이 바뀌는 웹 / 따로 모바일, 타블릿 버전 만들 필요가 없음


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
h1{
    font-size: 24px;
}
p{
    font-size: 16px;
}
@media (min-width: 768px){ //최소 너비 768이 넘어가면 폰트크기가 커지게 된다.
    h1{
        font-size: 36px;
    }
    p{
        font-size: 24px;
    }
@media(min-width: 992px;){
    h1{
        font-size: 48px;
    }
    
    p{
        font-size: 32px;
    }
cs


반응형
저작자표시 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

12. 부트스트랩  (0) 2019.03.23
10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
반응형

1. list 종류

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<ol type="a(소문자),A(대문자),i(로마 소문자),I(로마 대문자),1(숫자=default)">
    <li></li>
    <li></li>
</ol>
 
<ul>
    <li></li>
    <li></li>
</ul>
</body>
 
 
//ol: ordered list
//li: list
//ul: unordered list
 cs

 

2. list 스타일링

//li 태그 검사 -> display : list-item인 걸 확인해 볼 수 있음 ->block으로 바꿀 시 없앨 수 있음

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul{
    padding left: 0;
    width: 200px;
    
}
li{
    list-style-type: square; //square모양
     list-sytle: none;
    margin-bottom: 10px;
    background-color: #77abff;
    color: white;
    padding: 10px 20px;
}
    
 cs

 

<결과>

반응형
저작자표시 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

12. 부트스트랩  (0) 2019.03.23
11. 반응형 웹  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
반응형

1. float

<기본 float 설정 X>



<blue -> float  :right; 설정>


##float 로 오른쪽으로 옮겨지고 밑에 3차원적으로 남아있던 자리에 div class로 채워짐


<multiple floats>

- blue:left/ yellow: right


-blue.yellow : left;(blue먼저 left-> yellow 왼쪽 움직이다가 blue에 막혀서 옆으로 붙어짐)



2. clear ( 방향 설정 시 , 그 방향에 아무것도 없게 만들어줌)

1
2
3
.col{
    clear: left;
}
cs


<그리드 border 넣기 위해>


반응형
저작자표시 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

11. 반응형 웹  (0) 2019.03.23
10. list  (0) 2019.03.23
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
6. CSS 활용  (0) 2019.03.12
반응형



## 모든 요소들의 기본 position :  static(원래 있어야 할 곳에 배치한다)


1. Relative position

-> 기존 static 위치 기준으로 top/right/bottom/left 방향으로 주어진 픽셀만큼 이동

-> z-index : 태그들이 겹칠 때 누가 더 위로 올라가는지 결정하는 속성 / 기본값 0


2. absolute position

-> 가장 가까운 포지셔닝이 된 조상 요소 기준

-> 부모 포지션이 relative, absolute, fixed 태그가 없었다면, 가장 위의 태그(body)가 기준


3. fixed position

-> 브라우저 윈도우가 기준 / 항상 특정 위치에 고정되어 있음


반응형
저작자표시 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
7. display  (0) 2019.03.19
6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
반응형

### 모든 요소는 딱 한 개의 display 값을 갖고 있다!

 

1. display 종류 

 

- inline display : 다른 요소들과 같은 줄에 머무르려고 하는 성향, 필요한 만큼의 가로 길이만 차지하는 성향

=> 기본 display : inline ==> <span> / <a> / <b> / <i> / <img> / <button>

 

-block display : 다른 요소들과 독단적인 줄에 가려고 하는 성향, 최대한 많은 가로 길이를 차지하는 성향

=> 기본 display : block ==> <div> / <h1> ~ <h6> /  <p> / <nav> /  <ul>  / <li> 

 

 

- display  바꾸기 (css 에서 바꿀 수 있음)

=> inline -> block

 

1
2
3
4
i {
  display: block; /* <i> 태그를 block으로 바꾸기 */
  background-color: green;
}
 cs

 

 

=> block -> inline

 

1
2
3
4
5
6
7
8
9
10
11
12
div {
  display: inline; /* <div> 태그를 inline으로 바꾸기 */
}
 
.div1 {
  background-color: green;
}
 
.div2 {
  background-color: blue;
}
 
 cs

 

 

2. inline-block 

 

## block 요소에는 가로 , 세로 길이 직접 설정가능하지만 / inline 요소는 자동으로 설정 

 

- inline요소처럼 다른 요소와 같은 줄에 머물며 block 요소처럼 가로, 세로 길이도 설정해주고 싶다면? 

=> inline-block 사용

1
2
3
4
5
6
7
i {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: green;
}
 
 cs

 

3. <img> 태그의 비밀

1
<div class="container">아이스크림<img src="images/ice_cream.png" height="100">먹고싶다!</div>
 cs

 

## 사실 , <img>태그는 대체요소(replaced element)라고 함

    -> 가로, 세로를 정할 수 있는 특별한 inline

-> 텍스트처럼 다룰 수 있음 (vertical-align)

-> 상위 class 또한 text-align으로 사용 가능 

 

##다시 한번 이미지를 가운데 정렬하는 방법/부모에게 text-align을 줘도 가운데 정렬 가능하지만 조금 부적합함

1
2
3
4
5
img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 cs

 

4. 다양한 링크 

    

<html>

1
2
3
4
5
<a class="google-link" href="https://google.com" target="_blank">
<img src="images/google.png" width="200">
<h1>구글</h1>
<p>이걸 누르면 구글로 갑니다!</p>
</a>
 cs

<css>
1
2
3
4
5
.google-link{
    display:block;
    color: black;
    text-decoration:none;
}
 cs

 

5. Baseline

## text : 바로 밑이 baseline

## img : 사진 바로 밑이 baseline

 

6. vertical-align 

 

-base line : vertical-align의 조건들을 충족시키면서, 줄의 높이를 최소화시키는 곳에 위치

 

7. 세로 가운데 정렬 꿀팁

 

<가로 가운데 정렬>

- inline & inline-block 요소 : 부모 태그에 text-align:center;

1
2
3
4
.container {
  text-align: center;
  background-color: lime;
}
 cs

 

-block 요소 : margin-left: auto; , margin-right: auto;

1
2
3
4
5
6
7
.block-element {
  width: 100px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  background-color: lime;
}
 cs

 

<세로 가운데 정렬>

#vertical-align 속성은 인라인, 인라인 블록에서만 적용 

-가짜 요소 더하기(세로 길이 100%인 요소 생성 -> 그 요소에 vertical-align: middle; -> 띄어쓰기 공간만큼 마이너스여백 주기)

<html>

1
2
3
4
5
6
7
8
<div class="container">
  <div class="helper"></div>
  <div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>
 
 cs

<css>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}
 
.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
 
.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
 
  /* 이 경우 띄어쓰기는 5px 정도였습니다! */
  margin-left: -5px;
}
 cs

 

-line-height으로 해결(info를 인라인 블록으로 설정 -> 부모에 line height -> info에 line-height: normal;(자식들에게 상속되기에)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
  line-height: 400px;
}
 
.info {
  background-color: lime;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}
 
 cs

 

반응형
저작자표시 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03
반응형

1. 선택자 정리 

 -> CSS에서는 스타일링 해줄 요소를 선택자로 결정 

 

 -태그 이름 

1
2
3
4
/* 모든 <h1> 태그 */
h1 {
  color: orange;
}
 cs

 

 

-클래스 / 아이디 선택자

1
2
3
4
5
6
7
8
9
/* 'important'라는 클래스를 갖고 있는 모든 태그 */
.important {
  color: orange;
}
 
/* 'favorite'라는 아이디를 갖고 있는 태그 */
#favorite {
  color: blue;
}
 cs

 

-자식 선택자

1
2
3
4
5
/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
  color: orange;
}
 
 cs

 

-직속 자식(direct children)

1
2
3
4
/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}
 cs

 

-복수 선택

1
2
3
4
/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
  color: orange;
}
 cs

 

-여러 조건 

1
2
3
4
5
6
7
8
9
10
/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}
 
/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}
 
 cs

 

-Pseudo-class (가상 클래스) -> :(클론) 사용하여 가상 클래스 선택

 

-> n번째 자식

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
/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
  color: blue;
}
 
/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
  color: red;
}
 
/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
  color: green;
}
 
/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
  font-size: 150%;
}
 
/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
  text-decoration: line-through;
}
 
 cs

 

-> 마우스 오버(hover)

1
2
3
4
5
6
7
8
h1 {
  color: orange;
}
 
/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
  color: green;
}
 cs
 
2. CSS 상속(부모 요소의 속성들을 자식들한테 넘겨줌 -> div에 속성을 주면 밑에있는 자식들 까지 상속되어 모두 바뀜)

 

-상속되는 속성들 color/ font-family/ font-size/ font-weight/ line-height/ list-style/ text-align/ visibility

-항상 상속되는 것은 아님 (ex) <a>태그에는 color속성 상속 X => 억지로 받아오려면 inherit 값 사용

 

1
2
3
4
.div2 a {
  color: inherit;
}
 
 cs

 

3. CSS 우선 순위 

-순서 : 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어 쓰게 됨

 

-명시도(specificity)에 따라 우선순위 결정

a.인라인 스타일 (가장 우선순위 높음)

b. 선택자에 id 多 우선 순위 높음

c. 선택자에 class , attribute , pseudo-class 多 우선 순위 높음

d. 그냥 요소(가상요소) 많은 순 

 

 

4. CSS 다양한 단위

-px : 절대적인 값 / 다른 요소의 값에 영향 x

 

-rem : 상대적인 값 / html 태그의 font-size 영향 받음 / 2rem : html 태그의 font-size X2

 

-em : 상대적인 값/ 자기 자신의 font-size 기준/ 자기의 size를 따로 정해주지 않았다면 상위 요소에서 상속받은 값 기준

 

-%(퍼센트) : 상대적인 값 / 어떤 항목에 쓰이냐에 따라 다른 기준 적용 / ex) font-size에서 %사용 시 곱해주는 방식 계산

 

1
2
3
4
5
6
7
8
9
10
11
.container {
  font-size: 20px;
  background-color: lime;
}
 
.text {
  font-size: 180%; /* 상위 요소인 container의 font-size * 1.8 = 36px */
  background-color: skyblue;
  margin: 0;
}
 
 cs

 

     / margin, padding 단위로 사용 -> 상위 요소 width 기준 계산 , margin-top , padding-bottom 등 상하 속성 조절 시 상위요소 height가 아닌 width 기준으로 계산

1
2
3
4
5
6
7
8
9
.container {
  width: 200px;
  background-color: lime;
}
 
.text {
  padding-left: 30%; /* 상위 요소의 width * 0.3 = 60px */
}
 
 cs

 

-참고 : https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

반응형
저작자표시 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
5. BOX Model -(2)  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03
4. text 스타일링  (0) 2019.02.27
반응형

1. 박스 꾸미는 다른 방법 

 

-border-radius : 요소 모서리 둥글게 만듬 /크면 클 수록 더 둥글게 /개별 설정도 가능 

1

2

3

4

5

6

.div1 {

  border: 1px solid green;

  border-radius: 5px;

  margin-bottom: 20px;

}

 

cs

 

-background-color : 배경색 지정 

    

1

2

3

h1 {

  background-color: #4d9fff;

}

cs

 

-페이지 전체 배경색 : <body>태그 -> background-color 속성 /투명 : transparent 값 설정

    

1

2

3

4

5

6

7

h1 {

  background-color: white;

}

h2 {

  background-color: transparent

}

cs

 

-box-shadow : 요소에 그림자 /기본 : none / 위치 설정(가로, 세로 위치) /기본 색(검정) 변경하고 싶을 시 색 써줌

 

    

1

2

3

4

5

6

.div1 {

  background-color: #eeeeee;

  width: 400px;

  height: 300px;

  box-shadow: 40px(가로) 10px(세로) 10px(흐림정도:blur) 20px(그림자 크기:spread) #4d9fff(색);

}

Colored by Color Scripter

cs

2. box-sizing

-box sizing 에서 항상 테두리와 패딩을 고려해서 게산을 해줘야 한다

-> 해결책 : box-sizing 속성 : border-box

                 따로 설정해주지 않으면 기본값은 content-box -> 이걸 border-box

               -> width와 height가 테두리와 패딩 , 내용물을 모두 포함한 길이가 됨

               -> 모든 요소에 나타내는 *속성 사용

1
2
3
4
5
6
7
8
9
10
* {
  box-sizing: border-box;
}
.div1 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}\
 
cs

3. background 이미지
- background-repeat : 이미지 반복시킬 것인지, 아닌지, 어떻게 반복할지 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div{
/*반복하지 않음*/
background-repeat: no-repeat;
/*가로 방향으로만 반복*/
background-repeat: repeat-x;
/*세로 방향으로만 반복*/
background-repeat: repeat-y;
/*가로와 세로 모두 반복*/
background-repeat: repeat;
/*반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분*/
background-repeat: space;
/*반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분*/
background-repeat: round;
}
cs


- background-size
1
2
3
4
5
6
7
8
9
10
11
12
13
div{
/* 원래 이미지 사이즈대로 출력 */
background-size: auto;
/* 화면을 꽉 채우면서, 사진 비율을 유지 */
background-size: cover;
/* 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력 */
background-size: contain;
/* 픽셀값 지정 (가로: 30px, 세로: 50px로 설정) */
background-size: 30px 50px;
/* 퍼센트값 지정 (가로: 부모 요소 width의 60%, 세로: 부모 요소 height의 70%로 설정) */
background-size: 60% 70%;
}
 
cs


-background-position : 배경 이미지의 위치를 정해주는 속성 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */
/* 아래와 같은 총 9개의 조합이 가능 */
div{
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
/* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */
background-position: 25% 75%;
/* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */
background-position: 100px 200px;
}
cs

반응형
저작자표시 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

7. display  (0) 2019.03.19
6. CSS 활용  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03
4. text 스타일링  (0) 2019.02.27
2. class & id & div  (0) 2019.02.27

+ Recent posts

티스토리툴바