20241120 D41
Layout (레이아웃)
- 사전적 의미 : 배치 / 정리
- 기술적 의미 : html의 구성 요소를 효율적으로 "배치" 하는 것
A. display : 화면 배치 방법
- html 요소가 화면에 어떻게 출력될지 형식을 지정하는 속성
- block : 요소를 block요소로 만드는 속성. 특징 : 화면을 수직(행)으로 분할
- inline : 요소를 inline 요소로 만드는 속성. 특징 : 화면을 수평(열)으로 분할
- inline-block : inline의 수평분할 기능 block요소의 크기 조정이 결합
- none : 화면에 요소를 보여주지 않는 속성.
- flex : 요소의 정렬 방향, 간격을 유연하게 처리하는 속성
1. block요소를 inline요소로 변경
<!--div.block.area$.inline{$번째 영역}*5--> <div class="block area1 inline">1번째 영역</div> <div class="block area2 inline">2번째 영역</div> <div class="block area3 inline">3번째 영역</div> <div class="block area4 inline">4번째 영역</div> <div class="block area5 inline">5번째 영역</div>.css
- 각 area1~5 클래스에 적용 색상을 지정
.area1{background-color: red;} .area2{background-color: orange;} .area3{background-color: yellow;} .area4{background-color: green; } .area5{ background-color: blue; } .block{ border :1px solid black; width: 150px; height: 150px; color: white; }
2. inline요소를 block요소로 변경
<!--span.area$.block{$번째영역}*5--> <span class="area1 block">1번째영역</span> <span class="area2 block">2번째영역</span> <span class="area3 block">3번째영역</span> <span class="area4 block">4번째영역</span> <span class="area5 block">5번째영역</span>.css파일
.block{ border :1px solid black; width: 150px; height: 150px; color: white; }3. inline-block
<!-- div.area$.block.inline-block{$번째영역}*5--> <div class="block area1 inline-block">1번째 영역</div> <div class="block area2 inline-block">2번째 영역</div> <div class="block area3 inline-block">3번째 영역</div> <div class="block area4 inline-block">4번째 영역</div> <div class="block area5 inline-block">5번째 영역</div>.css 파일
.inline-block{ display: inline-block; }
4. 상 하 2분할
<div id="container1">
<div class="div-1">1번</div>
<div class="div-1 ">2번</div>
</div>.css 파일
#container1{
border: 3px solid black;
width: 300px;
height: 400px;
}
.div1{
width: 100px;
height: 250px;
}
#container1 > .div-1:first-of-type{
background-color: red;
height: 30%;
}
#container1 > .div-1:last-of-type{
background-color: blue;
height: 70%;
}
5. 상하 3분할
<div id="container2"> <div class="div-2"></div> <div class="div-2"></div> <div class="div-2"></div> </div>.css 파일
#container2{ border: 3px solid black; width: 200px; height: 500px; } #container2 > .div-2:nth-of-type(1){ /* width : 100%; block요소의 기본값 */ background-color: red; height: 20%; } #container2 > .div-2:nth-of-type(2){ background-color: black; height: 30%; } #container2 > .div-2:nth-of-type(3){ background-color: blue; height: 50%; }
6. 좌우 2분할
<div id="container3"> <div class="div-3">1</div><div class="div-3">1</div> </div>.css 파일
#container3{ border: 3px solid red; width: 400px; height: 200px; } .div-3{ height: 100%; width: 50%; display: inline-block; } #container3 > .div-3:first-child{ background-color: grey; } #container3 > .div-3:last-child{ background-color: red; }
7. display : none;
- 요소는 존재 하지만 화면에는 보이지 않는다.
<div class="div-4">test1</div> <div class="div-4" id="none">test2</div> <div class="div-4">test3</div>.css 파일
.div-4{ border: 3px solid black; height: 100px; width: 200px; } #none{ background-color: hotpink;}
- display : none;
: 요소는 존재하지만, 화면에는 보이지 않는다(영역도 차지 하지 않는다)- visibility: hidden;
: 요소를 투명하게 변경(영역은 차지한다) opacity: 0;
: 0~1사이의 값으로 요소의 투명도를 설정(영역은 차지한다)
B. 요소의 영역(여백)과 관련된 속성들
- HTML 요소는 총 4가지의 영역으로 구성되어 있다.
1). content 영역 : 요소의 내용이 작성 되어 지는 영역
2). padding 영역 : content 영영과 border영역 사이의 공간
3). border 영역 : 요소의 테두리 영역 content영역보다 바깥쪽에서 content를 감싸고 있다.
4). margin 영역 : 다른 요소와의 간격을 나타내는 영역기준을 잡아주는 박스 생성
<div class="box">내용입니다</div> - /*.css 파일*/ .box{ width: 100px; height: 100px; background-color: lightblue; }content 영역
<div class="box content">내용입니다</div> - /*.css 파일*/ .content{ width: 150px; height: 150px; } /* width/height속성을 통해 content영역의 사이즈를 지정한다. */border 영역
<div class="box border">내용입니다</div> - /*.css 파일*/ .border{ border: 10px solid red; }padding 영역
<div class="box padding border">내용입니다</div> - /*.css 파일*/ .padding{ padding:30px; /* content와 border 사이의 간격을 상하좌우 30 px만큼 벌림 */ }margin 영역
<div class="box content border padding margin">내용입니다</div> <div class="box content border padding margin" id="m1">내용입니다</div> - /* .css 파일*/ .margin { margin : 50px } #m1 { margin : 100px; }
C. padding, border, margin 방향성 부여하기
- padding, border, margin은 방향에 따라 크기를 별도로 지정 가능
(000-top, 000-bottom, 000-left, 000-right)- 작성법에 따라 특정 방향성을 부여할 수 있다.
1. padding
<div class="box padding-test">내용</div>.CSS 파일
1). padding에 값을 1개만 작성한 경우 = 상하좌우 = padding : 30px; 2). 값이 2개인 경우 : 상하, 좌우 = padding : 50px 100px; 3). 값이 3개인 경우 : 상, 좌우, 하 = padding 10px 50px 100px; 4). 값이 4개인 경우 : 상, 우, 하, 좌(시계방향) = padding : 10px 20px 30px 40px;2. margin (padding 작성법이 동일)
3. border 작성법
<div class="box bor-test">내용입니다</div> - /* border속성으로는 상하좌우에 별도의 방향성을 지정할 수 없다. */ /* border : 1px 2px 3px 4px solid red; 문법상 오류 */ /* border의 두께를 지정하는 경우, 상하좌우 별도의 방향성 지정이 가능하다. */ /* .css파일*/ - border : 4px solid red; border-width : 1px 2px 3px 4px; - /* border-top : 1px solid black; border-bottom : 5px dashed magenta; border-left: 10px dotted blue; border-right : 7px double orange; */4. margin : auto;
<div style="width: 500px; height: 300px; border: 2px solid black;"> <div class="box margin-auto"> </div> </div> - /* .css 파일*/ /* margin : auto 테스트 요소를 부모기준으로 가운데 정렬 */ .margin-auto { /* margin-left: 200px; */ /* margin-top: 100px; */ /* auto : 좌,우 요소의 간격을 자동으로 정렬*/ margin : 100px auto; }
D. box-sizing 속성
요소의 영역중 실제로 화면상에 보여지는 부분인 contrnt, padding, border는
각 크기를 지정할수 있다
(각 크기를 따로 지정하다 보면 전체적인 크기를 한눈에 가늠할 수 없어 ui를 설정 어렵다)<div class="box" in="box-sizing">내용입니다</div> - /* .css 파일*/ /* 테두리는 10px, 패딩은 20px, 내용부분(content) */ /* 합쳐서 전체 요소의 크기가 가로/세로 300px인 정사각형 만들기 */ - #box-sizing{ - border : 10px solid black; padding: 20px; - /* width, hieght값을 구하기 위해서는 항상 border와 padding의 크기를 감안하여 계산해야한다. */ /* width: 240px; height: 240px; */ - /* box-sizing 사용시 content영역의 값을 자동 계산하여 적용 - box-sizing : content-box(기본값) - width/height값 지정시 content영역에만 적용된다. - * border-box - width/height값 지정시 content+padding+border의 크기를 합한 결과 자동 적용.*/ box-sizing: border-box; width: 300px; height: 300px; }
E. 요소를 정렬하는 스타일(float / clear)
- float(뜨다, 띄우다) : 요소를 띄워서 좌/우로 정렬하는 속성
- clear : float로 인해 띄워져 있는 상태를 해제하는 속성
기본 형태
<div class="test"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>Hello</div> <div>World</div> <div>5</div> </div> - /* .css 파일 */ div{ box-sizing: border-box; border: 1px solid black; } .test{ width: 300px; height: 200px; background-color: #eee; }
2. float: left
<div class="test"> <div class="float-left">1</div> <div class="float-left">2</div> <div class="float-left">3</div> <div class="float-left">4</div> <div>Hello</div> <div class="clear">World</div> <div class="float-left">5</div> </div> - /* .css 파일 */ .float-left{ width: 50px; height: 50px; /* 요소를 화면에 띄워서 좌/우로 흐름을 주어 정렬한다 */ /* 한줄로 정령 되는 과정에서 block형식의 margin과 공백이 제거된다. */ float: left; } .clear{ background-color: red; color: white; /* 현재 요소부터 "겹쳐지는" float 상태해제 속성 */ /* clear는 left/right나눠서 적용가능. both를 통해 left, reight 동시해제 가능.*/ - clear: both; /* both : left, right 모드 해제함을 의미*/ }3. float: right
<div class="test"> <div class="float-right">1</div> <div class="float-right">2</div> <div class="float-right">3</div> <div class="float-right">4</div> <div>Hello</div> <div class="clear">World</div> <div class="float-right">5</div> </div> - /* .css 파일 */ .float-right{ width: 50px; height: 50px; background-color: yellow; float : right; }
※ float를 활용한 다양한 분할 하기
css파일에 설정한 색상 및 박스크기 설정
.container{ width: 400px; height: 200px; } - .bg-1{background-color: red;} .bg-2{background-color: orange;} .bg-3{background-color: yellow;} .bg-4{background-color: green;} .bg-5{background-color: lightblue;} .bg-6{background-color: navy;} .bg-7{background-color: violet;}a). 2분할
<div class="container"> <div class="div-1 bg-1"></div> <div class="div-1 bg-3"></div> </div> - /* css 파일*/ .div-1{ width: 50%; height: 100%; float:left }b). 4분할
<div class="container"> <div class="row-2"> <div class="div-1 bg-2"></div> <div class="div-1 bg-4"></div> </div> <div class="row-2"> <div class="div-1 bg-3"></div> <div class="div-1 bg-1"></div> </div> </div> - /* css 파일 */ .div-1{ width: 50%; height: 100%; float:left } .row-2{ height: 50%; }c. 복합분할
<div class="container-3"> <div class="row-2"> <div class="div-1 bg-1"> <div class="row-2 bg-1"></div> <div class="row-2 bg-4" ></div> </div> <div class="div-1 bg-5"></div> </div> <div class="row-2 bg-3"></div> <!--부모 자시관게 열관계를 확인하자--> </div> /* css 파일 */ .div-1{ width: 50%; height: 100%; float:left } .row-2{ height: 50%; } .container-3{ width: 400px; height: 400px; } row-2{ width: 100%; }
F. 배치 관련 스타일(position)
- position : 요소의 위치를 지정하는 속성
position : relative;
1). 지정된 요소 내부에 자식 요소들의 기준이 되게 만들어주는 속성
2). 내부에 작성되는 요소에 위치 지정시 top, bottom, left, right속성들을 사용 할수 있다position : absolute;
1). 기본 요소들의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치position : fixed;
1). 항상 고정된 위치에 요소를 배치.(화면이 움직이더라도)
3. 요소별 영역 배치
<div class="container-1">
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>
</div>2. 요소를 영역 정가운데에 배치
<div class="container-2"> <div id="center"></div> </div>3. 요소를 화면(우측하단)에 고정배치
<div class="fixed-area"> <a href="#body-top">맨위로 올라가기</a> </div>css 파일
div{ border: 1px solid black; box-sizing: border-box; } .container-1{ border: 2px dashed red; position: relative; /*내부에 작성되는 자식요소들의 "상대적인"기준점이 되게 하는속성 */ } - .first{ width: 300px; height: 300px; background-color: yellow; } .second{ width: 200px; height: 200px; background-color: green; /* 배치순서 무시할때 사용 top, bottom, left, right와 함꼐 사용 */ /* 최상위 태그에 기준점을 제시해야한다 */ position:absolute; top : 50px; left: 50px; } .third{ width: 100px; height: 100px; background-color: red; position: absolute; top: 100px; left: 100px; } - /* 요소를 정중앙 배치*/ .container-2{ width: 300px; height: 300px; position: relative; } #center{ width: 50px; height: 50px; background-color: pink; position: absolute; top : 0; bottom : 0; left : 0; right : 0; margin: auto; /* 중앙배치법: 어디로도 이동할수 없는 상황을 맞추고 마진오토를 사용한다 */ } /* 요소를 고정(우측하단) 배치 */ .fixed-area{ width: 120px; text-align: center; position: fixed; /* fixed요소는 화면(모바일화면, pc화면)기준으로 배치된다. */ bottom: 50px; right: 50px; }
G. 글자관련스타일
1. color : 글자 색을 지정하는 속성
선택자{ color : 색상명(영문) 16진수 숫자, rgb(#fff, #FFFF) rgb(255, 255, 255), rgb(255, 255, 255, 1) hsl(360, 100, 100), hsla(360, 100, 100, 1) } *rgba, hsla에서 a는 투명도(0:투명, 1:불투명) *hsl : (색조, 채도, 밝기) *6개의 색상 지정 방법은 색과 관련된 모든 css속성에서 사용 가능 - <ul id="color-ul"> <li>색상명</li> <li>16진수(rgb)</li> <li>rgb</li> <li>rgba</li> <li>hsl</li> <li>hsla</li> </ul>css 파일
#color-ul>li:nth-child(1){color: red;} #color-ul>li:nth-child(2){color: #d42828;} #color-ul>li:nth-child(3){color: rgb(rgb(32, 191, 219));} #color-ul>li:nth-child(4){color: rgba(0, 255, 0, 0.3);} #color-ul>li:nth-child(5){color: hsl(360, 100%,50%);} #color-ul>li:nth-child(6){color: hsla(360, 100%,50%,0.3);}2. text-decoration : 텍스트에 줄 생성
<ul id="deco-ul"> <li>아랫줄</li> <li>중간줄</li> <li>윗줄</li> <li><a href="#">줄삭제</a></li> </ul>css 파일
#deco-ul>li:nth-child(1){text-decoration: underline;} #deco-ul>li:nth-child(2){text-decoration: line-through;} #deco-ul>li:nth-child(3){text-decoration: overline;} #deco-ul>li:nth-child(4)>a{text-decoration: none} /* #deco-ul a{text-decoration: none} 후손 표현방식도 가능*/3. text-align : inline 정렬(왼쪽, 오른쪽, 양쪽, 가운데)
<div id="align-test"> <p>안녕하세요?<span>제이름은 페스토에요.</span>오늘 점심은 모죠</p> <p>안녕하세요?<span>제이름은 페스토에요.</span>오늘 점심은 모죠</p> <p>안녕하세요?<span>제이름은 페스토에요.</span>오늘 점심은 모죠</p> <p> Hello World!Hello World!Hello World!Hello World! Hello World!Hello World!Hello World!Hello World! Hello World!Hello World!Hello World!Hello World! </p> <div id="div1"> <div>inline-block</div> </div> </div>css 파일
#align-test{ width: 350px; border: 2px solid black; } #align-test > p:nth-child(1){ text-align: left; /*기본값*/ } #align-test > p:nth-child(2){ text-align: right; } #align-test > p:nth-child(3){ text-align: center; } #align-test > p:nth-child(4){ text-align: justify } #div1{text-align: center;} #div1 > div{ width: 50px; height: 50px; background-color: yellow; display: inline; }
4. line-height : 줄 간격 지정
- 줄 사이 간격(높이)을 지정하는 속성.
줄 높이가 글자의 크기보다 큰 경우 글자는 해당 줄의 가운데에 배치<div id="line-test"> <p> 동해물과 백두산이 마르고 닳도록<br> 하느님이 보우하나 우리 나라 만세<br> 무궁화 삼천리 화려 강산<br> 대한 사람 대한으로 길이 보전하세 </p> <p> 동해물과 백두산이 마르고 닳도록<br> 하느님이 보우하나 우리 나라 만세<br> 무궁화 삼천리 화려 강산<br> 대한 사람 대한으로 길이 보전하세 </p> </div>css파일
#line-test>p:last-child{ line-height: 30px; } #center-test{ width: 200px; height: 200px; border: 1px solid black; text-align: center; line-height: 200px; }
5. 글자를 요소 정중앙에 배치
<div id="center-test"> <div>정중앙</div> </div> - /*★ css 폴더*/ #center-test> div{ background-color: hotpink; width: 50px; height: 50px; display: inline; }
6. letter-spacing : 글자 사이 간격 지정
<p id="letter-test"> Hello World!! </p> - /* scc 파일 */ #letter-test{ font-size: 24px; font-weight: bold; letter-spacing: 15px; }7. text-shadow : 텍스트에 그림자효과 추가
<div id="shadow-test"> <p>HTML5</p> <p>HTML5</p> <p>HTML5</p> <p>DIABLO</p> </div> - /* ★ css 파일*/ #shadow-test{ background-color: black; padding: 30px; } #shadow-test{ font-size: 75px; font-weight: bold; } #shadow-test>p:nth-child(1){ color: orange; text-shadow: 3px 3px white; /* 가로 세로 그림자 색상 */ } #shadow-test>p:nth-child(2){ color: white; text-shadow: 5px 5px 5px #bbb; /* 가로 세로 번짐정도 그림자 색상 */ } #shadow-test>p:nth-child(3){ color: rgba(255, 255, 255, 0.9); text-shadow: 0px 0px 10px magenta; /* 가로 세로 그림자 색상 */ } #shadow-test>p:nth-child(4){ text-shadow: 0px 0px 4px #ccc, 0px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -20px 18px #f20 /* 가로 세로 그림자 색상 */ }
H. 글꼭 관련 스타일
1. font-size : 글꼴의 크기를 지정
- px : 픽셀(화면 해당도 기준)
- pt : 포인트(1pt = 0.72)
- % : 상위요소 크기에 대한 백분률
- em : 1em == 100%
<ul id="size-test"> <li>픽셀</li> <li>포인트</li> <li>퍼센트</li> <li>em</li> </ul>2. font-weight : 글꼴의 굵기를 지정
1.숫자로 굵기 지정 : 100 ~ 900
2.normal : 기본두꼐 (400)
3.bold : 굵은 글꼴(700)
4.bodler : 상속 받은 굵기보다 굵게
5.ligher : 상속 받은 굵기보다 더 앏게<ul id="weight-test"> <li>테스트1</li> <li>테스트2</li> <li>테스트3</li> <li>테스트4</li> <li>테스트5</li> </ul> - /* ★css 파일 */ #size-test > li:nth-child(1){font-size: 24px;} #size-test > li:nth-child(2){font-size: 18pt;} #size-test > li:nth-child(3){font-size: 150%;} #size-test > li:nth-child(4){font-size:1.5em;} /* 크롬브라우저 기준 기본 글꼴 크기 : 16px */ - #weight-test{ font-weight:100;} #weight-test > li{ font-size:34px; } - #weight-test > li:nth-child(1){font-weight: 100;} #weight-test > li:nth-child(2){font-weight: bold;} #weight-test > li:nth-child(3){font-weight: bolder;} #weight-test > li:nth-child(4){font-weight: lighter;} #weight-test > li:nth-child(5){ font-weight: normal; font-style:italic; /* 폰트에서 제공하는 기울임 속성이 있는 글꼴을 사용 */ }3. font-family : 글꼴을 지정하는 속성
<ul id="family-test1" class="cls"> <li>가나다라, ABCD, abcd, $#@!</li> <li>가나다라, ABCD, abcd, $#@!</li> <li>가나다라, ABCD, abcd, $#@!</li> </ul> /* css 파일 적용 */ #family-test1>li:nth-child(1){ font-family: 궁서; /* 내장 폰트 바로 적용 가능*/ } #family-test1>li:nth-child(3){font-family: 'GmarketSansMedium';} /* 존재하지 않으면 기본폰트 적용*/ #family-test1>li:nth-child(2){ font-family: '경민체', '민주체', '굴림체',;}4. 웹 폰트 사용
<p>웹 폰트 제공 사이트1 : <a href="http://fonts.google.com">구글 웹폰트</a></p> <p>웹 폰트 제공 사이트2 : <a href="http://noonnu.cc">눈누 상업용 무료 한글폰트 사이트</a></p> <ul id="family-test2" class="cls"> <li>가나다라, ABCD, abcd, $#@!</li> <li>가나다라, ABCD, abcd, $#@!</li> <li>가나다라, ABCD, abcd, $#@!</li> </ul> /* 웹사이트 폰트 사용시 */ /* 다음과 해드 부분에 링크를 이용하여 사용가능 */ /* 인터넷 연결이 필요하다 인터넷연결이 없을경우 다운로드하여 적용하는 방법도 있다*/ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
I. 변형 관련 스타일
- transform : 변형과 관련된 속성
css속성 작성시 브라우저마다 처리 방법이 달라 문제 발생 가능.
※해결 방안 (키워드를 이용)
-ms- : 마이크로소프트
-webkit- : 크롬 사파리
-o- : 오페라
-moz- : 파이어폭스1. 2차원 좌우 변형
<!-- 적용 이미지 파일 --> <img src="../resources/image/bono.jpg" class="trans-x-2d"> /*.css 좌우*/ .trans-x-2d:hover{ -webkit-transform: translateX(100px) ; -ms-transform: translateX(100px); transform: translateX(100px); /* '-'로 왼쪽이동 */ }2. 2차원 상하 변형
<img src="../resources/image/bono.jpg" class="trans-y-2d"> /*.css 상하*/ .trans-y-2d:hover{ transform: translateY(100px);}3. 2차원 대각선 변형
<img src="../resources/image/bono.jpg" class="trans-d-2d"> /*.css 대각선*/ .trans-d-2d:hover{ transform: translate(100px, -100px);}4. 2차원 좌우 확대/축소
<img src="../resources/image/bono.jpg" class="trans-x-scale-2d"> /*.css 가로축(x) 기준 확대*/ .trans-x-scale-2d:hover{ transform: scaleX(1.5); }5. 2차원 상하 확대/축소
<img src="../resources/image/bono.jpg" class="trans-y-scale-2d"> /*.css 세로축(y) 확대*/ .trans-y-scale-2d:hover{ transform: scaleY(2); }6. 요소 확대 / 축소
<img src="../resources/image/bono.jpg" class="trans-scale-2d"> /*.css 요소 확대 및 축소*/ .trans-scale-2d:hover{transform: scale(1.5, 1.5);}7. 요소 회전
<img src="../resources/image/cat.jpg" class="trans-rotate"> /*.css 회전*/ .trans-rotate:hover{transform: rotate(180deg); /*deg = 각도*/}8. 3차원 x, y, z축(적용순서) 이동
<img src="../resources/image/peng.jpg" class="trans-3d"> /*3차원 이동 x,y,z 순서로 입력*/ /* perspective = 원근감 조절 z축의 최대길이*/ .trans-3d:hover{transform: perspective(300px) translate3d(50px, 50px, 100px);}9. 3차원 x 축 이동
<img src="../resources/image/peng.jpg" class="trans-rotate-x-3d"> /*.css x축 회전 */ .trans-rotate-x-3d:hover{ transform: perspective(300px) rotateX(45deg); }10. 3차원 y 축 이동
<img src="../resources/image/peng.jpg" class="trans-rotate-y-3d"> /*.css y축 회전 */ .trans-rotate-y-3d:hover{ transform: perspective(300px) rotatey(45deg);}11. x,y,z 축 회전
<img src="../resources/image/peng.jpg" class="trans-rotate-3d"> /*.css x,y,z,각도(deg) 축 회전 */ .trans-rotate-3d:hover{ transform: perspective(300px) rotate3d(0.5,0.5,0.5, 45deg) ;}12. 요소의 변형시 지연시간 추가(trasnsition)
<div class="box test1"></div> <div class="box test2"></div> /*.css 지연시간 추가 */ .box{ width: 150px; height: 150px; border: solid 1px black; background-color: red; transition-duration: 1s; /* 스타일 변형 지연시간 지정 */ } .test1:hover{ transform: rotate(720deg); background-color: yellow; width: 100px; height: 100px; } /*.css 테스트2 색과 모양을 원으로 변형*/ .test2{ transition-duration: 3s;} .test2:hover{ transform: rotate(360deg); /* 회전 각도 */ background-color: skyblue; /* 색상 변형 */ border-radius: 50%; /* 원형으로 변형*/ }a. 스타일 변형 진행 속도 조절
<div class="box test3"></div> <!-- https://cubic-bezier.com/ 관련 웹페이지 --> <!-- 홈페이지에서 진행속도 등을 다양하게 조절해서 사용 가능--> /*.css 스타일 변형 진행 속도 조절 */ .test3{ transition-duration: 3s; /* transition-timing-function: ease; */ /* linear(선형적으로) | ease(기본값) | ease-in | ease-out... */ transition-timing-function: cubic-bezier(.44,-1.26,.67,1.7); } .test3:hover{ background-color: springgreen; transform: perspective(300px) rotate3d(0.5,0.5,0.5,90deg); }b. 스타일 변형 딜레이 설정
<div class="box test4"></div> /*.css 스타일 변형 딜레이 설정 */ .test4{ transition-delay: 2s; transition-duration: 2s; } .test4:hover{ transform: rotate(720deg); }c. 스타일 적용 속성 설정
<div class="box test5"></div> /*.css 스타일 적용 속성 설정 */ .test5{ transition-duration: 3s; transition-delay: 0.5s; transition-property: all; /* transition-property: 특정속성키값을 입력해서 지정가능; */ } .test5:hover{ background-color: yellow; width: 50px; }d. 모든 속성 적용 테스트
<!-- 체크박스 활성화시 속성 변화--> <input type="checkbox" name="trasnsition-btn"> <div class="trasnsition box"></div> /*.css 모든 속성 적용 */ .trasnsition{ transition-property: all; /*모든 CSS 속성에 대해 전환 효과를 적용*/ transition-duration: 4s ; /*전환 효과가 완료까지 걸리는 시간*/ transition-timing-function: ease-in; /*전환 효과의 속도 곡선을 설정*/ transition-delay: 0.1s; /*전환 효과가 시작되기 전에 지연 시간*/ } input[name=trasnsition-btn]:checked+div{ transform: translateX(2000px); /*<div>요소를 수평 2000픽셀 (R)이동.*/ background-color: lime; border-radius: 50%; /*<div>요소 모서리를 원형으로*/ }
