CSS - 속성 정리 (2)
Position :
static(기본값); => 요소가 순서대로 배치된다. 위치 지정이 필요 없다.
absolute => 순서와 상관없이 브라우저 창 내에서 지정한 위치에 나타난다.
relative => 직전 요소에 이어서 상대 위치에 배치된다.
fixed => 현재 보이는 브라우저 화면 내에서 절대위치에 배치된다. 현재 보이는 브라우저 화면 내에서 항상 같은 위치에 나타난다. 화면을 스크롤 해도 같은 위치에 나타난다. ( 상담, 쪽지 등과 같은 항상 동일위치에 있어야 하는 창을 만들 때 많이 사용된다.)
z-index : 여러개의 콘텐츠를 겹쳐서 배치할 때 앞뒤 순서를 결정해주는 속성이다. 큰 수를 지정할수록 앞쪽에 배치된다. 이 속성은 position이 absolute나 fixed로 설정된 경우에만 작동된다.
<style>
#box1{
position:absolute;
top:0px; left:0px;
width:100px; height:100px;
background:blue;
z-index:200;/*숫자 클수록 앞쪽에 배치*/
}
#box2{
position:absolute;
top:30px; left:30px;
width:100px; height:100px;
background:yellow;
z-index:100;
}
#box3{
position:absolute;
top:60px; left:60px;
width:100px; height:100px;
background:green;
z-index:-1;
}
</style>
overflow :
콘텐츠 박스의 크기보다 내용이 더 많을 경우 해당 내용이 초과된다. 이처럼 콘텐츠 내용이 박스크기를 초과할 때 처리하는 방법을 저장할 때 사용한다.
visible(기본값) : 박스 아래쪽에 초과된 내용이 계속 나타난다.
hidden : 박스 크기를 초과한 내용은 잘려서 보이지 않는다.
scroll : 스크롤 바가 있어서 초과한 내용을 볼 수가 있다. 박스의 크기가 커진 경우에도 항상 스크롤 바가 있는 것을 볼 수 있다.
auto : 코넨츠 내용이 박스를 초과한 경우 스크롤 바가 나타난다. 박스의 크기가 충분하면 스크롤 바가 사라진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
background:lightgreen;
width:200px; height:50px;
}
#target{
width:300px; height:100px; border:1px solid black;
overflow:scroll;/*스크롤바가 보임*/
}
</style>
</head>
<body>
<div id="target">
<p>block #1</p>
<p>block #2</p>
<p>block #3</p>
<p>block #4</p>
<p>block #5</p>
</div>
</body>
</html>
opacity : 투명도. 값이 0.0일 때 완전히 투명하고 1.0일 때 완전히 불투명하다.
visibility :
특정 요소를 보이거나 혹은 보이지 않게 지정할 수 있다.
visible(기본값) : 콘텐츠를 보이게 한다.
hidden : 콘텐츠를 보이지 않게 한다. 보이지는 않지만 자리는 차지한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#a{
border:3px solid red;
visibility:hidden;/*해당 영역은 보이지 않지만 자리는 차지한다.*/
}
#b{
border:3px dotted red;
visibility:visible;/*해당 영역을 보이게함*/
}
</style>
</head>
<body>
<h1>Visibility 속성</h1>
<img src="../Images/coffee.jpg" id="a" width="150" height="120" alt="coffee"/>
<img src="../Images/coffee.jpg" id="b" width="150" height="120" alt="coffee"/>
</body>
</html>
transition : 전환효과를 준다. 전환이란 객체의 속성 변화가 시간을 가지고 점진적으로 진행되는 것을 말한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100px; height:50px; border:1px solid black;
background:yellow; transition:width 5s;/*5초간 너비가 변경됨. 전환효과를 준다.
전환이란 객체의 속성 변화가 시간을 가지고 점진적으로 진행되는 것을 말한다. css3에서 추가된 것.*/
}
div:hover{
width:200px; /*마우스 오버하면 크기가 200픽셀로 서서히 커진다.*/
}
</style>
</head>
<body>
<div>마우스를 올려주세요.</div>
</body>
</html>
transform :
css3에서서 추가된 변환효과
translate(x,y) : x, y만큼 이동
scale(x,y) : x, y만큼 확대
rotate(deg) : deg만큼 회전
skew(deg, deg) : deg만큼 비틀기 전환
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:50px; height:50px;
background-color:yellow;
border:1px solid black;
text-align:center;
/*글자 수직 중앙 정렬*/
line-height: 50px;/*. 수직간의 문장 사이의 줄 간격. 택스트 줄의 높이를 지정. 높이가 총 50px */
}
#box2{
transform:translate(100px,0px);/*왼쪽에서 오른쪽 100픽셀만큼 평행이동>css3에서 추가된 변환효과*/
background:blue;
}
#box3{
transform:scale(1.2,1.2);/*x방향 1.2배, y방향 1.2배로 확대 >css3에서 추가된 변환효과*/
background:red;
}
#box4{
transform:rotate(30deg);/*30도 만큼 박스를 회전시킨다.*/
background:orange;
}
#box5{
transform:skew(30deg, 20deg);/*30도, 20도만큼 비틀기 전환 효과 > css3에서 추가된 효과.*/
background:purple;
}
</style>
</head>
<body>
<div id="box1">Box1</div>
<div id="box2">Box2</div>
<div id="box3">Box3</div>
<div id="box4">Box4</div>
<div id="box5">Box5</div>
</body>
</html>
css3 애니메이션
- 키프레임(keyframe)이란 애니메이션 중간 중간에 객체의 위치와 크기를 지정해주는 프레임이다. 사람이 키프레임에만 작성해주면 컴퓨터는 그 사이의 프레임은 자동으로 생성한다. 이것을 키프레임 애니메이션이라고 한다.
- css3에서는 실제로 애니메이션을 생성할 수 있다.
animation: 지속시간 키프레임명 ;
animation-iteration-count: 몇번 반복되는지 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 애니메이션 효과</title>
<style>
#anim{
width:100px; height:100px; background:red;
position:relative; animation:2s myanim;/*애니메이션 지속시간과 키프레임 이름myanim을 지정*/
animation-iteration-count:10;
}/*2초동안 지속되고 10번 반복*/
#back{
width:300px; height:100px; background:green;
}
@keyframes myanim/*myanim 키프레임 이름 정의*/
{
0%{background:red; left:0px; top:0px;}
25%{background:red; left:100px; top:0px;}
50%{background:yellow; left:200px; top:0px;}
75%{background:blue; left:100px; top:0px;}
100%{background:blue; left:0px; top:0px;}
}
</style>
</head>
<body>
<div id="back">
<div id="anim"></div>
</div>
</body>
</html>
'언어공부 > CSS' 카테고리의 다른 글
| CSS - 속성 float (div 수평정렬) (0) | 2021.07.16 |
|---|---|
| CSS - 속성 정리 (1) / 타입 선택자 css (0) | 2021.07.14 |
| CSS 스타일 시트 / CSS 선택자 문법 / CSS를 삽입하는 방법 (외부 스타일 시트방법, 내부 스타일 시트 방법, 인라인 스타일 시트방법) (0) | 2021.07.13 |
| (생활코딩) CSS 코드의 재사용 <link> (0) | 2021.04.05 |
| (생활코딩) CSS 미디어 쿼리 (0) | 2021.04.05 |
