HTML/CSSベース

3.生命をサイトに入れる

01. Transform

<style>
	.transition {
		transform: scale(2, 3);

		-webkit-transform: scale(2, 3);  // 크롬, 사파리
		-moz-transform: scale(2, 3);      // 파이어폭스
		-ms-transform: scale(2, 3);      // 익스플로러 9.0
		-o-transform: scale(2, 3);         // 오페라
	}
</style>

<style>
	.transform {
		transform: scale(2, 3);
		transform: translate(100px, 150px);  
		transform: rotate(45de);      
		transform: skew(10deg, 30deg);      
	}
</style>

02. Transition

<style>
	.transition{
		transition-property: background-color;  // 배경 색이 변하는 걸 사용자에게 보여주겠다는 표시
		transition-duration: 3s;  // 3초동안 변함
	}
</style>

<style>
	.transition{
		transition-timing-function: linear;  // 일정한 속도로 변화
		transition-delay: 0.5s; // 0.5초 후 변화
	}
</style>

<style>
	.trans:hover { height: 100px; } // trans라는 클래스 영역에 마우스 올리면 높이를 100px로 바꿔라
</style>

<style>
	.trans{ 
		transition: height 3s linear 2s; //3s가 duration, 2s가 delay
	}

	.trans:hover { height: 200px; }
</style>

03. Animation

.anim {
	animation-name: changeHeight; // 개발자 임의로 이름 설정
	animation-duration:10s; // 10초 동안 애니메이션
	animation-timing-function: linear; // 속도의 성격 규정
	animation-delay: 2s; // 웹 사이트 접속 후 몇초 이후에 진행할지
	animation-iteration-count: 5; // 애니메이션 반복 횟수
	animation-direction: normal; // 애니메이션 진행 방향
}

@keyframes changeHeight { // 변화 줄 실제 결과 값. 애니메이션 사용시 필수 세트로 써주자
	from { height: 300x; } // 시작
	to { height: 600px; }  // 끝
} 

.anim { // 위의 애니메이션과 같은 코드! 한 줄로 작성한 것
		// 순서는 상관 x but 앞선 숫자가 duration, 뒤 숫자는 delay
    animation: changeHeight 10s linear 2s 5 normal; 		
}

04.アニメーションの適用

.box{
	animation: skewing 1500ms linear infinite alternate; // 1500ms : 1.5초
}

@keyframes skewing {
	from { transform: skew(-20deg, 10deg); }
	to { transform: skew(20deg, -10deg); }
}

.box{
	-webkit-animation: rotation 5s linear 1s 4 alternate;
}

@-webkit-keyframes rotation {
	from { -webkit- transform: rotate(-20deg); }
	to { -webkit- transform: rotate(20deg); }
}

4.モバイル対応Webサイトの作成

01.メディアクエリの概要

.myImg {
	width: 1000px;
}

/* 브라우저 가로폭이 최소 320px, 최대 800px이 되면 해당 css적용 */
@media (min-width: 320px) and (max-width: 800px) { 
	.myImg {
		width: 300px;
	}
}

02.メディアクエリを使用する際の注意事項

<meta name="viewport" content="width=device-width, initial-scale=1">

grid

<style>
	#container {
		display: grid;
		grid-template-columns: 1fr 1fr; /* columns: 왼쪽부터 오른쪽으로 쌓임. 
																			1대 1로 비율 설정. 
																			100px 1fr 처럼 왼쪽 영역 100px, 
																			나머지는 모두 오른쪽 영역으로 설정할 수도 있다. */
	}
</style>

...

<div id="container">
	<ol>
    <li>First</a></li>
    <li>Second</a></li>
  </ol>
	<div>
		<a href="index.html">Hello</a>
		This is grid layout practice.
	</div>
</div>

役立つサイトとショートカット