부트스트랩3 페이지 평가
1. 나만의 소스를 관리할 줄 안다
(이미지, 스타일, 자바스크립트)
2. 스타일 (반응형 소스, 폰트)
- 나만의 소스 유지 보수 및 관리
- 협업을 위한 소스들의 효율적인 디지털 네이밍 (플러그인 버전 노출 등)
- 가상 선택자 활용
- 웹 접근성을 반응형에 맞춰 진행
- 효율적인 플러그인 커스터마이징
CSS 설정
css는 상대경로 html은 절대경로 (가 좋다)
css 원본 파일 변경 불가할 때
내 css 파일을 더 밑에다 놓고
똑같이 복사해와서 설정 변경하면 내것이 더 앞서게 됨
font awesome
font awesome 폰트 크기 한 번에 조절 할 때 부모태그 조절해도 한 번에 가능
em인지 rem인지 사이즈 확인하고 클래스 넣어서 한 번에 제어하는 것도 좋다
wow animate
wow : 화면이 넘어올 때 객체의 움직임 담당
움직임을 넣고 싶은 객체에 클래스 삽입
wow, animate 3버전(현재 사용 중)의 클래스 명으로 삽입해야 한다data-wow-delay=".5s" 또는 "5ms" 처럼 작성해야 함
시간만큼은 절대 단위 생략 불가!!
col
col-사이즈-숫자(1~12사이의 정수)
col-md-6 col-md-offset-3 =>
relative객체의 가운데 정렬
col-md-6 col-md-push-3 =>absolute객체의 가운데 정렬offset > margin
push > left
미디어쿼리
css 작성 순서
min-width작은 거 > 큰 거 순서로
ex. min-width: 320px > 768 > 992
max-width큰 거 > 작은 거 순으로
ex. max-width: 992px > 768 > 320
페이지 제작
(1)네비게이션 클릭 > 스크롤 이동
a태그- page-scroll 클래스
- href="#해당섹션아이디"
(2) d-none, h0 공통클래스 만들기
(3) mixup 플러그인 다루기
tab객체에게 반드시 filter 클래스 삽입 후
data-filter=".identity"를 통해 .identity라는 클래스 삽입
대상 썸네일은 mix 클래스 반드시 있어야 하고
tab객체의 data-filter 클래스로 걸러낸다
