/* 폰트 선언 "consola" */
@font-face {
font-family: "consola";
src: url("/HeukKellLab/Resource/Font/consola.ttf");
}
/* 폰트 선언 "AppleGhothic" */
@font-face {
font-family: "AppleGhothic";
src:url("/HeukKellLab/Resource/Font/Apple_산돌고딕_Neo/AppleSDGothicNeoM.ttf")
}
body{
/* 사용하고 싶은 폰트 이름으로 사용 */
font-family: 'AppleGhothic';
}
#rotatex:hover{
transform : rotatex(180deg);
}
#rotatey:hover{
transform : rotatey(180deg);
}
#rotatez:hover{
transform : rotatez(180deg);
}
상태가 변화할때 일정 시간을 두고 서서히 변화하도록 설정하는 방법이 있다.
#sq_1{
display: inline-block;
width: 100px;
height: 100px;
background-color:aqua;
transition: all 0.5s linear; /* 모든 상태전환에 대해 0.5 초의 애니메이션이 진행되도록 설정 */
}
#sq_1:hover{
transform : rotate(50deg);
}
/* 애니메이션 선언, 정의 */
@keyframes HighlightKeyword {
0%{
color: yellow;
}
50%{
color: white;
}
100%{
color: yellow;
}
}
/* 애니메이션 사용 */
.KeywordHasDetail{
animation: HighlightKeyword 1s infinite;
}
특정 조건에서 변화를 주기위한 속성
주로 화면의 전체 크기를 계산해서 특정 값 이하일때 배치를 바꾸는 식으로 활용합니다.
화면의 가로와 세로 길이를 비교해서, 가로가 더 길면 landscape 세로가 더 길면 portrait mobile 기기의 경우 Landscape 와 Portrait 개념이 있는데, ( 기기 눕히면 Landscape, 세우면 : Portrait) PC 의 경우 윈도우 창의 사이즈에 따라 정해진다.
div{
@media (orientation : portrait){
// 세로가 더 길때의 내용
background-color : red;
}
@media (orientation : landscape)
{
// 가로가 더 길때의 내용
background-color : blue;
}
}
/* 역으로, 이런것도 가능하다 */
@media (orientation : portrait)
{
div{
}
div{
}
}
기본상태로 있다가 화면의 크기가 1600px 이하가 되면, 오른쪽 상단에 고정되도록 설정하는 예시
#TagId
{
position : relative;
left : 0px;
top : 0px;
@media (max-width:1600px) {
position : fixed;
right: 0px;
top : 0px;
background-color : rgba(255,255,255,0.6);
}
}
<div id="container_1">
<div id="FlexElem1" style="background-color: red;">
</div>
<div id="FlexElem2" style="background-color: green;">
</div>
</div>
#flexContainer_1{
display: flex;
width: 500px;
height: 500px;
}
#flexElem1{
flex :1;
}
#flexElem1{
flex : 2;
}