CSS3 그라데이션, box, 배경 이미지
다단편집
. CSS3에서 float, position을 이용하지 않고 다단 편집을 할 수 있다
. 속성
- column-count : 3; >> 박스의 내용을 3단으로 나눈다
- column-gap : 20px >> 각 단의 간격을 20px로 한다
- column-rule: 2px dotted brown; 구분선의 두께를 2px, 점선, 브라운색으로 지정
<style type="text/css">
*{margin: 0; padding:0 }
body{color: #333}
h1,p{padding:15px}
.gmother {
font: 12px Arial, Gulim;
background: beige;
text-align: justify;
width: 900px;
box-shadow: 2px 2px 3px orange;
다단편집
column-count: 4;
column-gap: 2em;
column-rule: 2px dotted brown;
}
</style>
</head>
<body>
<h1>할머니 이야기</h1>
<p class="gmother">
우리 동네에는 말이죠. 두 눈이 멀어버린 할머니가 한 분 살고 계세요. 아니, 정확하게 말하자면 그 할머니가
우리 동네에 사는 건 확실하지 않지만 우리 동네의 어느 집에 사는지는 잘 몰라요. 한 번도 그 할머니의 집을 가
본 적이 없으니까요. 그리고 아무도 그 할머니의 집을 궁금해 하지 않았으니까요.<br>
우리는 그 할머니를 '옛날이야기 할머니'라고 불렀어요. 왜냐하면, 매주 일요일 오후만 되면 어김없이 지팡이
를 집고 마을 어귀에 있는 옛날 우물터 곁 나무의자에 앉아서 우리들에게 이야기를 들려주곤 했거든요. 솔직히
말해서 그 애기들이 한결같이 재미있기만 한 건 아니었어요. 옛날애기 할머니의 애기는 처음에 재미있게 시작
했던 애기도 점점 이야기가 진행되면서 할머니의 장환한 잔소리로 이어지는 경우가 많았거든요. 우리들중 그
넋두리를 이해하는 애들은 별로 많지 않았을 거예요. 예를 들면 이런 식이었지요.<br>
'......아무리 생각해봐도 그 작고 약한 부족의 어린애들과 여자들을 그렇게 무참히 학살하는 건 아니 될 말이
었어. 그 벌을 받아서 그 영화롭던 왕국은 멸망하고 그 토록 아름답던 왕궁의 터전은 잿더미로 화해 버린 거야.
모두 부처님의 뜻이지. 신은 사라졌다고, 혹은 존재하지 않는다고 말들 하지만, 난 그렇게 생각하지 않아. 단
지 인간의 우매함을 조용히 지켜보고 있을 뿐이야......아, 나로서는 가슴아픈 일이다'<br>
이런 식으로 이어지는 애기들을 누가 귀담아듣겠어요? 이런 식으로 혼자 중얼거리는 할머니의 모습은 숫제 보이지
않는 어른을 상대로 열심히 이야기하는 것처럼 보여서 우리들의 기분이 종종 언짢아질 때가 있었어요. 하지만
할머니의 애기 중에는 그래도 꽤 재미있는 애기들도 간혼 있었기 때문에 우리는 일요일 오후만 되면 적을 무찌르고
영토를 넓혔던 위대한 대왕 이야기, 용맹한 장군들의 무용담이나 장군을 사랑하는 예쁜 공주이야기 등은 귀담아
들을 만했지요.
</p>
</body>
font 속성
- font에 대한 속성들을 일괄로 지정
font: font-style font-variant font-weight font-size/line-height font-family
(스타일) (굵기) (크기) (줄간격) (글자체)
. font-style: 이탤릭체 등
. font-weight: 글꼴의 두께 (border, bold 등)
. font-size : px, em, % 등
. font-family
- 글꼴의 이름이 한 단어 이상으로 이루어졌다면, 반드시 따옴표로 묶어서 사용
- 여러개의 글꼴을 나열할 경우엔 ,(콤마)로 구분짓는다
>> font-family : Arial, Hevetica,"Time sans"
. 세로정렬: vertical-align: top | middle | bottom
. 이미지, 폼요소를 위, 가운데, 하단 등으로 세로로 정렬시킴
. top, middle, bottom
. 주로 img, input, select, th, td등에서 함께 사용됨
선형그라데이션
. 문법: linear-gradient(방향, 색상1 %, 색상2 %..)
- 방향은 각도 또는 지정된 방향을 적용한다
0도
to top
to top left | to top right
|
270도 | 90도
to left ---------------------- to right
|
|
| to bottom right
180도
to bottom
시작점 0 ----------그라데이션---------------종료점
(ex) red 0% orange 10% yellow 40% blue 100%
<style type="text/css">
div{
margin: 10px;
width: 250px;
height: 120px;
color: #ffff00;
font-family: Helvetica, sans-serif;
font-weight: bold;
box-shadow: 2px 2px 5px black;
}
#sample1{
background: linear-gradient(teal,navy,red,yellow);
}
#sample2{
background: linear-gradient(to bottom right,teal, navy);
}
#sample3{
background: linear-gradient(315deg, teal, navy);
}
#sample4{
background: linear-gradient(to right,white, teal 20%, navy 70%, black);
}
</style>
</head>
<body>
<div id="sample1">sampe1</div>
<div id="sample2">sampe2</div>
<div id="sample3">sampe3</div>
<div id="sample4">sampe4</div>
</body>
원형(방사형) 그라데이션
.문법 : radial-gradient( 원/타원, 크기, at 시작점, 색상1, 색상2,,, )
- circle, ellipse (원, 타원)
- 크기
. closet-side : 중심점에서 가까운 박스의 변에 내접
. farthest-side: 중심점에서 가장 먼 박스의 내접
. closet-corner: 중심점에서 가까운 박스 모서리에 내접
. farthest-corner: 중심점에서 가장 먼 박스의 모서리에 내접
<style type="text/css">
#circle1{
width: 400px; height: 200px;
position: absolute;
left: 10px; top: 10px;
color: white;
text-align: center;
background: radial-gradient(circle 40px at 60px 50px, white, black); 원, 반지름, x, y, 색상1, 색상2
}
#circle2{
width: 400px; height: 200px;
position: absolute;
left: 450px; top: 10px;
color: white;
text-align: center;
background: radial-gradient(circle closest-side at center, white, red 55%, black);
}
#ellipse1{
width: 400px; height: 200px;
position: absolute;
left: 10px; top: 250px;
color: white;
text-align: center;
background: radial-gradient(ellipse 150px 80px at 20% 90%, white, black);
}
#ellipse2{
width: 400px; height: 200px;
position: absolute;
left: 450px; top: 250px;
color: white;
text-align: center;
background: radial-gradient(ellipse farthest-corner at center, white, red 55%, yellow 20%, black);
}
</style>
</head>
<body>
<div class="container">
<div id="circle1">위치와 크기지정 원</div>
<div id="circle2">가장 가까운 변에 내접하는 원</div>
</div>
<div class="container">
<div id="ellipse1">위치와 크기지정 원</div>
<div id="ellipse2">가장 먼 모서리에 내접하는 원</div>
</div>
</body>
<style type="text/css">
h1{
width: 600px; height: 200px; background: #f0f0f0;
font-size: 40px;
position: relative;
margin: 2px auto;
}
#t1{text-shadow: 2px 2px 3px #999}
#t2{color: #fff; text-shadow: -1px -1px 0 #fff, 1px 1px 0 #999;}
#t3{color: #ccc; text-shadow: -1px -1px 0 #fff, 1px 1px 0 #aaa;}
#t4{color: #ccc; text-shadow: -1px -1px 0 #aaa, 1px 1px 0 #fff;}
#t5{color: #fff; text-shadow: 1px 1px 0 #999,
-1px 1px 0 #999,
1px -1px 0 #999,
-1px -1px 0 #999
}
#t6{color:white; background: black;
text-shadow: 0 0 5px #fff,
0 0 13px #f03,
0 0 13px #f03,
0 0 13px #f03,
0 0 13px #f03;
}
</style>
</head>
<body align="center">
<h1 id="t1">Drop Shadow(그림자)</h1>
<h1 id="t2">Grow(광채)</h1>
<h1 id="t3">Bevel(도드라짐)</h1>
<h1 id="t4">Embos(오목새김)</h1>
<h1 id="t5">Stroke</h1>
<h1 id="t6">Neon(발광)</h1>
</body>
박스(Box)
; 컨텐츠가 차지하는 영역이다.
- width/height : content의 영역
- padding: 안쪽여백
- border : 선
- margin : 바깥여백
. margin : 10px - 상,하,좌,우 모두 10px
margin : 10px 5px - 상/하10px, 좌/우5px
margin : 5px 10px 3px - 상 5px, 좌/우 10px, 하 3px
margin : 4px 5px 6px 7px - 상 4px, 우 5px, 하 6px, 좌 7px
. 박스가 상하로 있을 때, margin은 큰쪽으로 선택된다
. 박스가 옆으로 있을 때, margin은 합산된다
박스 실습
<style type="text/css">
body{
background-image: url("img/11.gif");
border: 20px solid blue;
margin: 10px; padding: 10px;
}
div{
margin: 0; padding: 30px; border-width: 0;
background-color: green;
width: 500px; height: 500px;
opacity: 0.5;
box-shadow: 10px 10px 1px yellow;
}
#p1{
color:white; font-size: 300%; text-align: center;
width: 400px; height: 60px;
background: #abc;
margin: 0; padding: 0;
margin-bottom: 20px;
}
#p2{
color: white; font-size: 300%; text-align: center;
width: 400px; height: 60px; background-color: #abc;
margin: 0; padding: 0;
margin: 10px;
margin-top: 30px;
/* outline-width: 10px;
outline-style: solid;
outline-color: blue; */
}
</style>
</head>
<body>
<div>
<p id="p1">BOX1</p>
<p id="p2">BOX2</p>
</div>
</body>
배경이미지를 출력하는 위치기준
.background-origin: padding-box: 패딩왼쪽 위를 기준으로 출력
border-box : border선부터 출력
content-box: 콘텐츠박스 왼쪽위부터 출력
<style type="text/css">
div{
margin: 10px;
padding: 20px;
border: 15px solid rgba(0, 128, 128, 0.5);
width: 350px;
height: 50px;
background-image: url("img/5.png")
}
code{
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
}
#sample1{background-clip: border-box;}
#sample2{background-clip: padding-box;}
#sample3{background-clip: content-box;}
</style>
</head>
<body>
<div id="sample1"><code>border-box</code></div>
<div id="sample2"><code>padding-box</code></div>
<div id="sample3"><code>content-box</code></div>
</body>
배경이미지
background-size:
contain - 너비와 높이의 비율을 유지한 채 이미지 전체가 표시
cover - 너비와 높이의 비율을 유지한 채 해당 이미지 하나만으로 전체영역을 덮는다
auto - 너비와 높이의 비율을 유지한 채로 이미지의 크기가 변경된다
실수값, % - 너비 높이 : 지정한 너비와 높이로 출력
<style type="text/css">
div{
margin: 20px;
padding: 20px;
border: 15px solid rgba(139, 0, 0, 0.5);
width: 350px;
height: 50px;
background-image: url("img/11.gif");
background-repeat: no-repeat;
}
code{
color: #FA8072;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
}
#sample1{background-size: contain;}
#sample2{background-size: cover;}
#sample3{background-size: auto 90px;}
#sample4{background-size: 100% 100%;}
</style>
</head>
<body>
<div id="sample1"><code>contain</code></div>
<div id="sample2"><code>cover</code></div>
<div id="sample3"><code>auto 90%</code></div>
<div id="sample4"><code>100% 100%</code></div>
</body>