Skip to content

Commit f17efe4

Browse files
skypentumskypentum
committed
css3 내용 추가
1 parent 0a60ed3 commit f17efe4

16 files changed

+1168
-10
lines changed

‎document/CSS3/docs/flex-basis.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
## flex-basis
22

3-
작성자 : 김동일
3+
작성자 : 김동일
44

5-
작성일 : 2015-10-30
5+
작성일 : 2015-10-30
66

7-
css 레퍼런스 설명:
8-
- flex-basis : div 영역 내 flex item 의 크기를 설정한다.
7+
css 레퍼런스 설명:
8+
- flex-basis : div 영역 내 flex item 의 크기를 설정한다.
99

1010
- syntax :
1111
```sh
1212
flex-basis: number|auto|initial|inherit;
1313
```
1414

15-
number : 영역 내 flex item 크기를 정의 한다. (auto, inherit, %, px, em 등)
15+
number : 영역 내 flex item 크기를 정의 한다. (auto, inherit, %, px, em 등)
1616

17-
auto : 기본 값, div 영역 내에 flex item의 개수 만큼 크기를 같게 나눈다.
17+
auto : 기본 값, div 영역 내에 flex item의 개수 만큼 크기를 같게 나눈다.
1818

19-
initial:기본 값으로 set되어 있는 값을 불러온다.(10px)
19+
initial:기본 값으로 set되어 있는 값을 불러온다.
2020

21-
inherit:부모 element에 설정되어 있는 값을 상속 받는다.
21+
inherit:부모 element에 설정되어 있는 값을 상속 받는다.
2222

2323
sample code :
2424
```sh
@@ -68,11 +68,11 @@ sample code :
6868

6969
```
7070

71-
결과
71+
결과
7272

7373
![flex-basis](../images/flex-basis.jpg)
7474

75-
### 목록
75+
### 목록
7676
* [align-content](align-content.md)
7777
* [align-items](align-items.md)
7878
* [align-self](align-self.md)

‎document/CSS3/docs/justify-content.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
## justify-content
2+
3+
작성자 : 김동일
4+
5+
작성일 : 2015-10-30
6+
7+
css 레퍼런스 설명:
8+
- justify-content : div 영역 내 flex item 가로 크기를 정의한다.
9+
10+
- syntax :
11+
```sh
12+
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
13+
```
14+
15+
flex-start : 기본 값, flex item들이 영역 시작 부분으로 정의한다.
16+
17+
flex-end : flex item들이 영역 끝 부분으로 정의한다.
18+
19+
center : flex item들이 영역 가운데 부분으로 정의한다.
20+
21+
space-between : flex item들이 서로간에 간격을 띄어 정의한다.
22+
23+
space-around : flex item들이 영역 시작과 끝 부분에 간격을 띄면서, 서로간에 간격을 띄어 정의한다.
24+
25+
initial:기본 값으로 set되어 있는 값을 불러온다.
26+
27+
inherit:부모 element에 설정되어 있는 값을 상속 받는다.
28+
29+
sample code :
30+
```sh
31+
<!DOCTYPE html>
32+
<html>
33+
<head>
34+
<style>
35+
#main {
36+
width: 400px;
37+
height: 150px;
38+
border: 1px solid #c3c3c3;
39+
display: -webkit-flex; /* Safari */
40+
-webkit-justify-content: space-around; /* Safari 6.1+ */
41+
display: flex;
42+
justify-content: initial;
43+
}
44+
45+
#main div {
46+
width: 70px;
47+
height: 70px;
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
53+
<div id="main">
54+
<div style="background-color:coral;"></div>
55+
<div style="background-color:lightblue;"></div>
56+
<div style="background-color:khaki;"></div>
57+
<div style="background-color:pink;"></div>
58+
</div>
59+
60+
<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the justify-content property.</p>
61+
62+
<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-justify-content property.</p>
63+
64+
</body>
65+
</html>
66+
67+
```
68+
69+
결과
70+
71+
![justify-content](../images/justify-content.jpg)
72+
73+
### 목록
74+
* [align-content](align-content.md)
75+
* [align-items](align-items.md)
76+
* [align-self](align-self.md)
77+
* [@keyframes](@keyframes.md)
78+
* [animation](animation.md)
79+
* [animation-name](animation-name.md)
80+
* [animation-duration](animation-duration.md)
81+
* [animation-timing-function](animation-timing-function.md)
82+
* [animation-delay](animation-delay.md)
83+
* [animation-iteration-count](animation-iteration-count.md)
84+
* [animation-direction](animation-direction.md)
85+
* [animation-play-state](animation-play-state.md)
86+
* [backface-visibility](backface-visibility.md)
87+
* [background-clip](background-clip.md)
88+
* [background-origin](background-origin.md)
89+
* [background-size](background-size.md)
90+
* [border-bottom-left-radius](border-bottom-left-radius.md)
91+
* [border-bottom-right-radius](border-bottom-right-radius.md)
92+
* [border-image](border-image.md)
93+
* [border-image-outset](border-image-outset.md)
94+
* [border-image-repeat](border-image-repeat.md)
95+
* [border-image-slice](border-image-slice.md)
96+
* [border-image-source](border-image-source.md)
97+
* [border-image-width](border-image-width.md)
98+
* [border-radius](border-radius.md)
99+
* [border-top-left-radius](border-top-left-radius.md)
100+
* [border-top-right-radius](border-top-right-radius.md)
101+
* [box-shadow](box-shadow.md)
102+
* [box-sizing](box-sizing.md)
103+
* [column-count](column-count.md)
104+
* [column-gap](column-gap.md)
105+
* [column-rule](column-rule.md)
106+
* [column-rule-color](column-rule-color.md)
107+
* [column-rule-style](column-rule-style.md)
108+
* [column-rule-width](column-rule-width.md)
109+
* [column-span](column-span.md)
110+
* [column-width](column-width.md)
111+
* [columns](columns.md)
112+
* [flex](flex.md)
113+
* [flex-basis](flex-basis.md)
114+
* [flex-direction](flex-direction.md)
115+
* [flex-flow](flex-flow.md)
116+
* [flex-grow](flex-grow.md)
117+
* [flex-shrink](flex-shrink.md)
118+
* [flex-wrap](flex-wrap.md)
119+
* [@font-face](@font-face.md)
120+
* [font-feature-settings](font-feature-settings.md)
121+
* [hyphens](hyphens.md)
122+
* [justify-content](justify-content.md)
123+
* [opacity](opacity.md)
124+
* [order](order.md)
125+
* [outline-offset](outline-offset.md)
126+
* [overflow-wrap](overflow-wrap.md)
127+
* [overflow-x](overflow-x.md)
128+
* [overflow-y](overflow-y.md)
129+
* [@page](@page.md)
130+
* [perspective](perspective.md)
131+
* [perspective-origin](perspective-origin.md)
132+
* [resize](resize.md)
133+
* [tab-size](tab-size.md)
134+
* [text-align-last](text-align-last.md)
135+
* [text-overflow](text-overflow.md)
136+
* [text-shadow](text-shadow.md)
137+
* [transform](transform.md)
138+
* [transform-origin](transform-origin.md)
139+
* [transform-style](transform-style.md)
140+
* [transition](transition.md)
141+
* [transition-delay](transition-delay.md)
142+
* [transition-duration](transition-duration.md)
143+
* [transition-property](transition-property.md)
144+
* [transition-timing-function](transition-timing-function.md)
145+
* [word-break](word-break.md)
146+
* [word-wrap](word-wrap.md)

‎document/CSS3/docs/opacity.md‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
## opacity
2+
3+
작성자 : 김동일
4+
5+
작성일 : 2015-10-30
6+
7+
css 레퍼런스 설명:
8+
- opacity : div 영역 내 투명도를 설정한다.
9+
10+
- syntax :
11+
```sh
12+
opacity: number|initial|inherit;
13+
```
14+
15+
number : 투명도를 명시한다. (값 범위 : 0.0~1.0)
16+
17+
initial:기본 값으로 set되어 있는 값을 불러온다.
18+
19+
inherit:부모 element에 설정되어 있는 값을 상속 받는다.
20+
21+
sample code :
22+
```sh
23+
<!DOCTYPE html>
24+
<html>
25+
<head>
26+
<style>
27+
div {
28+
background-color: red;
29+
opacity: 0.5;
30+
filter: Alpha(opacity=50); /* IE8 and earlier */
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
36+
<div>This element's opacity is 0.5! Note that both the text and the background-color are affected by the opacity level!</div>
37+
38+
</body>
39+
</html>
40+
41+
```
42+
43+
결과
44+
45+
![opacity](../images/opacity.jpg)
46+
47+
### 목록
48+
* [align-content](align-content.md)
49+
* [align-items](align-items.md)
50+
* [align-self](align-self.md)
51+
* [@keyframes](@keyframes.md)
52+
* [animation](animation.md)
53+
* [animation-name](animation-name.md)
54+
* [animation-duration](animation-duration.md)
55+
* [animation-timing-function](animation-timing-function.md)
56+
* [animation-delay](animation-delay.md)
57+
* [animation-iteration-count](animation-iteration-count.md)
58+
* [animation-direction](animation-direction.md)
59+
* [animation-play-state](animation-play-state.md)
60+
* [backface-visibility](backface-visibility.md)
61+
* [background-clip](background-clip.md)
62+
* [background-origin](background-origin.md)
63+
* [background-size](background-size.md)
64+
* [border-bottom-left-radius](border-bottom-left-radius.md)
65+
* [border-bottom-right-radius](border-bottom-right-radius.md)
66+
* [border-image](border-image.md)
67+
* [border-image-outset](border-image-outset.md)
68+
* [border-image-repeat](border-image-repeat.md)
69+
* [border-image-slice](border-image-slice.md)
70+
* [border-image-source](border-image-source.md)
71+
* [border-image-width](border-image-width.md)
72+
* [border-radius](border-radius.md)
73+
* [border-top-left-radius](border-top-left-radius.md)
74+
* [border-top-right-radius](border-top-right-radius.md)
75+
* [box-shadow](box-shadow.md)
76+
* [box-sizing](box-sizing.md)
77+
* [column-count](column-count.md)
78+
* [column-gap](column-gap.md)
79+
* [column-rule](column-rule.md)
80+
* [column-rule-color](column-rule-color.md)
81+
* [column-rule-style](column-rule-style.md)
82+
* [column-rule-width](column-rule-width.md)
83+
* [column-span](column-span.md)
84+
* [column-width](column-width.md)
85+
* [columns](columns.md)
86+
* [flex](flex.md)
87+
* [flex-basis](flex-basis.md)
88+
* [flex-direction](flex-direction.md)
89+
* [flex-flow](flex-flow.md)
90+
* [flex-grow](flex-grow.md)
91+
* [flex-shrink](flex-shrink.md)
92+
* [flex-wrap](flex-wrap.md)
93+
* [@font-face](@font-face.md)
94+
* [font-feature-settings](font-feature-settings.md)
95+
* [hyphens](hyphens.md)
96+
* [justify-content](justify-content.md)
97+
* [opacity](opacity.md)
98+
* [order](order.md)
99+
* [outline-offset](outline-offset.md)
100+
* [overflow-wrap](overflow-wrap.md)
101+
* [overflow-x](overflow-x.md)
102+
* [overflow-y](overflow-y.md)
103+
* [@page](@page.md)
104+
* [perspective](perspective.md)
105+
* [perspective-origin](perspective-origin.md)
106+
* [resize](resize.md)
107+
* [tab-size](tab-size.md)
108+
* [text-align-last](text-align-last.md)
109+
* [text-overflow](text-overflow.md)
110+
* [text-shadow](text-shadow.md)
111+
* [transform](transform.md)
112+
* [transform-origin](transform-origin.md)
113+
* [transform-style](transform-style.md)
114+
* [transition](transition.md)
115+
* [transition-delay](transition-delay.md)
116+
* [transition-duration](transition-duration.md)
117+
* [transition-property](transition-property.md)
118+
* [transition-timing-function](transition-timing-function.md)
119+
* [word-break](word-break.md)
120+
* [word-wrap](word-wrap.md)

0 commit comments

Comments
 (0)