■ transion
transition 이란?
.box {
opacity : 0;
transition : all 1s;
}opacity는 투명도 조절,
transition은 모든 스타일이 변할 때 1초에 걸쳐 서서히 변하라는 코드입니다.
transition에도 다양한 효과를 주는 방법이 있습니다.
.box {
transition-delay: 1s; /* 시작 전 딜레이 */
transition-duration: 0.5s; /* transition 작동 속도 */
transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */
transition-timing-function: ease-in; /* 동작 속도 그래프조정 */
}
transition을 활용한 애니메이션 만드는 순서
1. 시작 스타일 정하기 : 시작 레이아웃 만들기
2. 최종 스타일 정하기 : 최종 레이아웃 만들기
3. 언제 최종스타일로 변할지 트리거 주기 : 마우스를 올리거나 클릭했을 때 변하게 끔 트리거를 줌, 보통 자바스크립트로 만듬
4. transition 으로 서서히 동작하게 만들기 : 시작 스타일에서 최종 스타일로 서서히 변하면 완료
■ Bootstrap
Bootstrap 설치
https://getbootstrap.kr/docs/5.2/getting-started/introduction/
Bootstrap 시작하기
Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요.
getbootstrap.kr
사이트의 시작하기를 따라하면 간편히 설치 가능
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script><head> 태그에 위의 <link> 태그를 넣고
<body> 태그 끝에 <script> 태그를 넣으면 시작할 준비가 완료됩니다.
Bootstrap 사용
Bootstrap 사이트에서 검색을 통해 원하는 스타일을 찾고 코드를 복붙만 하면 따로 CSS 설정할 것 없이 원하는 스타일을 가져올 수 있습니다.
Utility Class
<div class="container"></div> // 여백 박스 주기
<div class="mt-5"></div> // margin top 설정
<div class="pb-5"></div> // padding top 설정
<div class="fs-3"></div> // font size 설정
<div class="text-center"></div> // font 가운데 정렬
<div class="fw-bold"></div> // font weight 설정위와 같이 Bootstrap 에서 미리 설정해놓은 간편한 CSS 클래스들이 있기 때문에 사이트에서 참고하거나 미리 익혀 놓으면 간편히 커스텀도 할 수 있습니다.
Grid 레이아웃
<div class="row">
<div class="col-4"> 1 </div>
<div class="col-4"> 2 </div>
<div class="col-4"> 3 </div>
</div>
위와 같이 row 클래스 안에서 col-x 클래스를 부여하는 것으로 간편히 디자인이 가능합니다.
원래는 display: flex 등의 방법으로 가로열 배치가 가능했지만 bootstrap 에서는 굉장히 편하게 배치가 가능합니다.
1열에 총 12 칸으로 col-4 클래스를 부여하면 총 3등분하여 div 박스가 배치됩니다.
<div class="row">
<div class="col-md-4"> 1 </div>
<div class="col-md-4"> 2 </div>
<div class="col-md-4"> 3 </div>
</div>클래스명 중간에 조건문을 추가해주는 것도 가능합니다.
위의 코드는 화면폭 md 사이즈(768px) 이상에서만 적용해달라는 의미입니다.
'Html' 카테고리의 다른 글
| 12. HTML/CSS(Pseudo-element, Shadow DOM) (0) | 2023.05.10 |
|---|---|
| 11. HTML/CSS(CSS 수정 Tip) (0) | 2023.05.09 |
| 9. HTML/CSS(media query와 아이콘) (0) | 2023.05.06 |
| 8. HTML/CSS(emmet와 head 태그, meta 태그) (0) | 2023.05.05 |
| 7. HTML/CSS(웹 폰트와 flex 속성) (0) | 2023.05.03 |
