변형
요소의 크기나 위치를 바꾸는 것(요소의 x축과 y축을 기준으로 함)
transform 속성: 좌표 평면 상에서 각 축의 값을 변경
transition: 스타일 속성을 완전히 다른 스타일로 변형 가능. 다양한 애니메이션 효과. 실행 시간, 방벙
등 변환 가능함
transition 속성: property duration delay timing-function
transition에 의한 변화 실행될 때는 실행 시간을 지정해 원하는 시간 동안 변화가 이어나게 할 수 있음
<style>
.parent{
display: inline-block;
margin: 0 20px;
}
.child{
width:150px;
height: 150px;
background-color: teal;
}
.parent:nth-child(1) > .child{
transform: translate(30px,50px);
}
.parent:nth-child(2) > .child{
transform: scale(1.2, 0.8);
}
.parent:nth-child(3)> .child{
transform: skew(45deg);
}
.parent:nth-child(4)> .child{
transform: rotate(90deg);
}
.parent:nth-child(4) > .child:hover{
width: 300px;
height: 300px;
background-color: orange;
transition-property: width;
transition-duration: 5s;
transition-delay: 2s;
transition-timing-function: ease-in;
transition: background-color 2s 0s linear;
height 2s 0s linear;
/*2초동안 delay없이*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</body>
애니메이션
css는 웹페이지 상에 표시되는 콘텐츠가 TV 애니메이션과 같은 동적 움직임 구현할 수 있도록
@keyframes 모듈과 animation 속성 지원함
0%: 시작할 때
100%: 끝날 때
from: 시작
to: 끝
속성 이름: animation(단축 속성)
<style>
.eyes{
width: 480px;
margin: auto;
}
.eye{
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 100px;
position: relative;
}
.eye:nth-child(1){float: left;}
.eye:nth-child(1){float: right;}
.ball{
width: 50px;
height: 50px;
background-color: black;
border-radius: 25px;
position: absolute;
top: 80px;
left: 30px;
animation-name: moving;
animation-duration: 3s;
animation-delay: 0;
animation-timing-function: linear;
animation-iteration-count: 3;
animation-direction: alternate;
/*몇번 진행되는지. infinite하면 무한번*/
/*alternate 왔다갔다*/
animation-play-state: paused;
/*hober로 하나만 멈추게 할 수도 있음*/
}
@keyframes moving {
from{left: 30px;}
to{left: 120px;}
}
</style>
상속
하위 요소가 상위 요소의 스타일 속성값을 물려받는 것
상위요소로부터 상속이 이루어지는 속성이 있는 반면, 그렇지 않은 속성도 있다.
(보통 글자가 상속이 쉬움)
css에서는 스타일 속성의 상속 여부를 제어할 수 있는 3개의 키워드를 별도로 지원
ex) 공용 키워드, 전역 키워드
*속성의 상속 여부 확인 가능한 페이지
https://www.w3.org/TR/CSS21/propidx.html
Full property table
www.w3.org
inherit, initial은 모든 스타일 속성에 줄 수 있다.
unset: 상속받을 것이 있으면 받고, 없으면 받지 않겠다.
.list{
color: brown;
font-style: italic;
font-weight: 900;
border: 3px dashed green;
padding: 0;
/*상속이 안 된 상태에서*/
}
ul{
border: inherit;
}
*웹페이지가 모바일이나 태블릿에서 보여지는 경우 생각할 필요 있음*
반응형 웹
다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해서 사용하는 기법
뷰포트: 현재 화면에 보여지는 영역
기기 별로 뷰포트가 다르기 때문에 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생-> 화면의 크기가 다르게 보임
뷰포트 설정하기
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 단위도 있음
개발자 도구에서 시작 옆 버튼 누르면 모바일 화면 확인 가능함
<meta name="viewport" content="width=device-width, initial-scale=1.0">
주어진 기기에 따른 조절을 해겠다. 배율은 1로 하겠다.
<style>
p{
margin:0;
font-size: 10vw;
/*vh, vmax*/
}
미디어 쿼리
조건에 따라 스타일을 추가할지 말지 결정하는 것
미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)
-미디어 타입
-조건에 대한 물음(쿼리)
미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양함
div.box{
width: 150px;
height: 150px;
background-color: teal;
}
@media screen and (max-width: 800px){
div.box{
background-color: orange;
/*~800까지에만 적용되는 것*/
}
}
모듈화 디자인
반응형 웹 개발의 대세 : '페이지 만들기' => '컴포넌트 만들기'
웹 개발에 있어 컴포넌트란 독립적으로 재사용이 가능한 모듈을 뜻함
따로따로 조립하여 조합하면 효율이 좋아진다
구성 요소에 대한 디자인을 미리 해두기
스타일 재사용이 용이하며, 필요한 경우 추가 스타일 적용하면 됨
페이지의 일관성을 유지하기가 용이하다
