1-3 : 웹 프로그래밍 기초 (엘리스 AI 트랙)

20215 단어 웹프로그래밍기초CSS웹프로그래밍엘리스AI트랙htmlCSS

[엘리스 AI 트랙] 1주차 - 3

  • 온라인 이론 강의, 실습 강의, 실시간 강의 내용 정리본
  • 9/16 목요일

HTML/CSS 기초

3. 웹사이트에 생명 넣기

웹 사이트에 생명을 넣기 위해서는 css3 속성 Transform, Transition, Animation을 기억하자!

01. Transform

: 웹사이트 특정 영역에서 오브젝트 각도 틀거나 크기 조절, 위치 변경할 때 사용하는 속성

1) rotate, scale

  • rotate(30deg)
    : 입력한 각도만큼 특정 오브젝트 회전 효과 줌. (평면적 회전.) 음수도 입력 가능
  • scale(2, 10)
    : 선택 오브젝트를 확대 or 축소 → width 2배, height 10배 확대시키겠다! 축소시 0.5 등의 소숫점 사용하면 됨.

2) skew, translate

  • skew(10deg, 30deg)
    : 입체적으로 각도 비틀때 사용. (3차원적으로 x축 기준 10도 y축 기준 30도 틀어줌)
  • translate(100px, 200px)
    : 선택 오브젝트 위치 변경 (x축으로 100px, y축으로 200px 옮김). margin, padding 대신 사용도 많이 함.

3) prefix 접두사

: css3은 최신 언어라 ie최신 버전에선 사용 못함. → prefix 사용시 브라우저 하위 버전에서도 동작 가능

<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>

  • 위와 같은 접두사가 붙은 코드를 기본 코드와 함께 작성해두어야 함!! (위 경우엔 transform: scale(2, 3);)

  • 여러개의 transform 적용시 마지막 하나만 적용됨. (아래의 경우 skew만 적용)

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


02. Transition

: 변화하는 과정 보여주고자 할 때 사용

1) property, duration

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

2) timing-function, delay

  • timing-function : 변화하는 속도. linear (일정하게)
  • delay : 효과 바로 발생 시키지 않고 일정 시간 지연
<style>
	.transition{
		transition-timing-function: linear;  // 일정한 속도로 변화
		transition-delay: 0.5s; // 0.5초 후 변화
	}
</style>

3) 가상 선택자 : hover

  • hover : css에서 미리 만들어 둔 선택자. 마우스를 올렸을 때를 의미

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

4) Transition 종합

: transition 효과적 작성법.

  • 순서 상관 없이 작성 가능하지만 duration은 delay보다 먼저 나와야 한다!! (먼저 나오는 숫자가 duration으로 적용. 숫자가 하나인 경우에도)
<style>
	.trans{ 
		transition: height 3s linear 2s; //3s가 duration, 2s가 delay
	}

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

→ transition 클래스 영역에 마우스 올리면 2초 후에 높이를 200px로 3초동안 일정한 속도로 변하는 애니메이션 적용!



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; 		
}

  • 애니메이션 진행 방향 (direction)

    1. 시작 → 끝 : normal
    2. 끝 → 시작 : reverse
    3. 시작 → 끝 → 시작 : alternate

  • 적용할 애니메이션 이름과 @keyframes는 같은 이름을 가져야 함!



04. 애니메이션 응용

1) Transform & Animation

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

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

2) prefix 작성시 유의 사항

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

@-webkit-keyframes rotation {
	from { -webkit- transform: rotate(-20deg); }
	to { -webkit- transform: rotate(20deg); }
}
  • 애니메이션에서도 prefix 사용할 때 각각에 맞는 prefix를 keyframes에 하나하나 붙여 주어야 함. (webkit, moz 등 따로!! from to 속성에서 transform 쓸 경우에 transform 앞에도 붙여 주자.)





4. 모바일에 대응되는 웹사이트 만들기

01. 미디어쿼리 소개

1) 미디어쿼리란?

  • 웹 사이트를 PC 뿐 아니라 태블릿, 모바일 환경에서도 자연스럽게 표현되도록 하는 CSS 구문
  • 레이아웃, 폰트 크기 등을 조절하는 등의 반응형/적응형 웹 사이트 제작에 사용
  • 반응형 : 브라우저 폭 줄이거나 늘렸을 때 자연스러운 resizing 일어나는 것
  • 적응형 : 브라우저 폭 줄이거나 늘렸을 때 뚝뚝 끊기면서 레이아웃 변하는 것

2) 미디어쿼리 media

  • @media ( ) and ( ) { } 의 형태
  • min-width와 max-width
    : 브라우저 가로폭 설정
.myImg {
	width: 1000px;
}

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

3) 미디어쿼리의 정상 출력 확인 방법

  • 크롬 개발자도구 : f12 누르고 아래 이미지의 노란색 부분 클릭!

  • Troy Labs ( 찾아보니 현재는 서비스하지 않는 것 같다. )

    : 도메인 주소 있을 때(결과물이 서버에 등록돼 있을 때) 사용 가능



02. 미디어쿼리 사용시 주의사항

1) viewport

  • 미디어쿼리 사용할 때 viewport라는 아래의 메타 태그 속성을 꼭 작성해야 함!
<meta name="viewport" content="width=device-width, initial-scale=1">
  • viewport : 기기 화면 영역을 의미. 너비와 배율 설정시 사용
  • initial-scale : 제작된 화면의 비율

2) CSS 속성 상속

  • 미디어쿼리 내부에선 미디어쿼리 외부 영역의 CSS 속성을 상속받음
  • 외부와 내부에서 적용될 CSS가 다르다면 항상 명시해주자! (속성 값 없애려면 none으로. ex. background-color: none; )

grid

  • 웹 페이지의 여러 영역을 쉽게 배치시키는 레이아웃. float 사용 대신 간편하게!
  • 배치할 영역의 부모를 display: grid; 로 설정하고 grid-template 속성으로 비율 설정
<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>

유용한 사이트 및 단축키

마이크로소프트 플로우의 무료 방안은 HTTP(Webhook)를 사용할 수 없습니다.
Debian GNU/Linux로 복합 관리자 picom 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage