반응형

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

티스토리툴바