22.06.21 - [ CSS 스타일 ] 반응형, 애니메이션, 부트스트랩, flex

 

 

 

1. 반응형이란?

 

 

 

• 다른 화면으로 볼 때 display사이즈에 맞춰서 보여주는 것!
• pc화면을 --- 모바일 화면에 맞춰서 보여주는 것

 

 

 

• pc화면에서는 div가 가로로 3개 있었으면
• 모바일 화면으로 볼때는 div 가 저렇게 세로로 배치되는 형식

 

 

 

---

 

 

반응형 실습

 

 

 

기본세팅

 

 

 

---

 

@media

• 반응형의 키워드
• style시트 안에서 사용
• @media( ) { }

 

 

• #1 - max-width :1000px -  화면 크기가 1000px 보다 작다면 스타일 적용

 

 

---

 

• 화면 크기가 1000px 넘어가면 스타일 적용 안된다.
• 전체화면하면 적용 안된다!

 

 

---

 

 

• 사이즈별로 다른 효과를 주고 싶을 때 @media여러개 사용 가능~ (크기/가로모드/등)
• 미디어별로 다른 효과를 주고싶을 때 @media사용

 

 

• @media로 해서 상황별로 다 작성해서 - 맞춰서 작동하려면 번거롭다.

 

 

 

 

---

 

 

 

 

2. 애니메이션

 

 

 

• 요소의 효과 변환 - transition  
• 요소의 형태 변환 - transform
• 아쉬웠던 부분을 채워줄 수 있는 것이 애니메이션!

 

 

---

 

 

#실습

 

기본 세팅

 

 

---

 

 

1. @keyframes{ } – from{ }  to{ }

• 처음에는 이런 CSS가지는 애 – from
• 마지막에는 이런 CSS가지는 애 – to

 

 

 

from 과 to는

• 0%와 100%를 의미하는 것으로 - 대체 가능하다.
• 50% 100% 이런 식으로 다른 지점도 지정 가능

 

 

 

 

---

 

 

 

2. animation - 여러 효과들 

• .box{ } 안에 적용
• animation - 효과

 

animation -

• - name: [ 내가 @keyframes 지정한 이름 사용하여서 스타일 적용 ]
• - duration : 2s; [ 애니메이션이 한 사이클 완료하는데 걸리는 시간 지정 ]
• - delay: 1s; [ 애니메이션이 시작할 시점을 지정 - ( 즉시 ,잠시 후 -일부 진행한 시점 ) ]
• - iteration-count: 3s; - 애니메이션 몇 번 반복할 것인지 지정
• - direction: alternate-reverse; - 애니메이션 흘러가는 방향 지정
• - play-state: running; - 런닝/정지(paused;) 가능
• - timing-function: cubic-bezier(0, 0.25, 0.75, 1); :

 

 

 

 

 

#animation-iteration-count: 3s; 

• 애니메이션 몇 번 반복할 것인지 지정

 

 

animation-direction: alternate-reverse;

• 애니메이션 흘러가는 순서 지정
• normal – 빨초파 / 빨초파 순서 이런식으로
• reverse – 파초빨 /　파초빨 순서
• alternate – 빨초파 파초빨 빨초파 ~~ 이런 식으로
• alternate-reverse – 파초빨 빨초파 파초빨 ~~ 이런 식으로

 

 

 

# animation-timing-function:

• 애니메이션 흘러가는 동안 속도 조절
• # 사이트 참조해서 속성 값 적용 - https://cubic-bezier.com/#.17,.67,.83,.67

 

 

 

 

 

---

 

 

 

 

3. 부트스트랩

 

 

 

부트스트랩이란?

• 웹 사이트 개발 프레임워크
• 각종 레이아웃, 버튼, 입력창, 스타일 등의 디자인을 CSS와 Javasctipt로 만들어 놓은 프레임워크
• #프레임워크 - 재사용이 가능한 요소들의 집합, 정해진 구조와 틀 안에서 확장 가능한 코드로 이루어진 것

 

 

사용방법은?

• 이전에 < style 태그 >에 클래스명으로 .red{background-color: red } 스타일 만들어놓고
• 스타일 적용할 곳에다가 class= “red”만 추가해서 사용했던 것 체크
• 이렇게 미리 만들어놓은 스타일들을 다른 css파일로 저장해놓고
• 그것을 불러다가 지금의 파일에서 class = “red” 만 추가하는 방식으로 사용

 

 

실습

• 이런 방식으로 미리 만들어 놓은 css파일을 모아놓은 것이 부트스트랩 
• https://getbootstrap.kr/ 사이트 참고-

 

 

 

1. 파일을 다운로드하여서 사용해도 되지만– 링크를 복사, 붙여 넣기 해서 주로 사용

 

 

---

 

 

2. CSS 파일은 - < head 태그 > 안에 복사 붙여넣기 

 

3. JS 파일은 - < script 태그 > 안에 복사 붙여넣기

 

• 경로만 써주면 링크타고 해당 파일 찾아가서
• 스타일 만들어 놓은거 현재 내 파일로 가져올 것이고
• 가져온 스타일을 현재 내 파일에 적용해줄 것이다. - 스타일 지정해주면 적용됨!

 

 

 

 

---

 

 

 4. 링크주소 마지막에 min.css 체크

 

 

• .min 의 역할은 – 줄바꿈 / 띄어쓰기 / 공백 없애고 보여주는 애-
• (조금이라도 크기를 줄이기 위해서 – 데이터 통신 비용을 아끼기 위해서 ( 돈이 아닌 데이터 관련 소모비용 )
• .min 부분 빼고 접속해보면 – 이쁘게 세팅된 - 줄바꿈/띄어쓰기/공백 적용된 모습의 스타일 확인 가능

 

 

---

 

 

 

5. 부트스트랩 다른 효과 적용한 것들 확인은 밑에 글에서 확인  ↓↓↓

 

• https://giggs.tistory.com/188

[ CSS 스타일 ] [ 부트 스트랩 ] - 기본태그, 버튼태그, 캐러셀, 모달창

 

 

 

 

 

---

 

 

 

4. flex

 

 

 

 

정렬을 편리하게 사용할 수 있게 해주는 flex박스

• display: flex;
• 알아야 할 키워드 : container / item / main 축 / cross 축
• main 축 ( flex-direction의 값 ) – row/column

 

 

 

flex 내용 확인하기  ↓↓↓

• https://giggs.tistory.com/187

[ CSS 스타일 ] [ flex ]

 

 

 

 

 

---

 

 

 

 

review



반응형과 애니메이션도 신기하고 새로웠지만.
부트스트랩은 신세계였다.
웹 페이지 만들기에서 구현하지 못했던
화면 넘기기 -> 캐러셀 스타일
복-붙해서 스타일 적용해주니 뙇!
수정이나 문제 발생 시 어려운 점이 있지만
적재적소에 활용하면
퀄리티면에서도 작업 속도면에서도
너무 좋을 듯!

그동안 사용하던 정렬하던 방법인
float과 positon과는 다르게
여러 가지 정렬 방법을 원하는 대로
여러가지로 쉽게 적용할 수 있었다.
float을 사용할 때도 편리하다 생각했었는데
아마도 flex를 많이 사용하게 될 듯? ㅎㅎ

스타일 적용하고 사용하고
레이아웃을 구성하는 것도 만만치 않음을
느껴가는 중.

----------------------------------------------------------

# Check Point #

-- 다양한 디바이스에 맞춰 적용해 줄 수 있는 --
반응형 = @media(){ }


-- CSS 스타일에 효과 적용 --

1. 애니메이션
animation -
@keyframe{ }

2. 부트스트랩 -
CSS 적용 = < link href=" " > 
JS 적용 =<script src = " ">


-- 정렬을 더 편하게 해주는 --
display : flex;