[CSS]과구 CSS분석 1
<!-- Bootstrap Css --> 1개
1. <link href="bootstrap-assets/css/bootstrap.css" rel="stylesheet">
<!-- Style --> 8개
2. <link href="plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
3. <link href="plugins/owl-carousel/owl.theme.css" rel="stylesheet">
4. <link href="plugins/owl-carousel/owl.transitions.css" rel="stylesheet">
5. <link href="plugins/Lightbox/dist/css/lightbox.css" rel="stylesheet">
6. <link href="plugins/Icons/et-line-font/style.css" rel="stylesheet">
7. <link href="plugins/animate.css/animate.css" rel="stylesheet">
8. <link href="css/main.css" rel="stylesheet">
+ 사용자 usersetting 추가
ctrl + F -> chap. + 원하는 챕터숫자
<!-- Icons Font -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
우선순위에 따라 분석
chap.8 1순위 main.css
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
를 임포트 하기 때문에 인터넷이 연결 안될 경우 불러오지 못한다.
메뉴바 색상, 글자크기 바꾸기
navigation bar 에 있는
글자 크기 바꾸기 = main.css -> .navbar-default .nav > li > a 검색 -> font-size 숫자 바꾸기
메뉴바 글자 색상 바꾸기 = main.css -> .navbar-default .nav > li > a 검색 -> color 바꾸기
메뉴바 색상 바꾸기 = main.css -> .navbar-default 검색 -> background 바꾸기
메뉴바 스크롤 해서 내렸을 경우 메뉴바 크기 = main.css -> .top-nav-collapse .navbar-brand -> height 바꾸기
메뉴바 드롭다운 눌렸을때 드롭다운필드의 색깔 -> bootstrap.css -> dropdown-menu -> background-color: rgba(13,13,13,0.5)
그냥 color 글자색깔
ex) #FFF(하얀색)
#000(검은색)
슬라이드에 왼쪽 오른쪽 이동 화살표 배경색, 화살표 색
main.css ->
#owl-hero .owl-buttons .owl-prev,
#owl-hero .owl-buttons .owl-next {
position: absolute;
border: 1px solid transparent;
background: rgba(13,13,13,0.5);
preloader
main.css에 정의된 버튼 모양이 3가지 있는데
순서대로 Light버튼, Transparent버튼, block버튼
.btn-light .btn-transparent .btn-block
chap.6 로그인 페이지의 아이콘(plugins\Icons\et-line-font\style.css)
아이콘 모양은
plugins -> Icons -> et-line-font -> index.html 을 크롬으로 열면 코드와 모양들이 나옵니다 참고!
icon-profile-male icon-flag icon-video icon-basket 밑에 순서대로
chap.1 bootstrap.css
carousel에 대한 수정
left, right 버튼의 이상한 그라데이션을 지우려면
bootstrap.css에 .carousel-control.right 랑 .carousel-control.left
주석처리 or 주석처리한 부분 지우면 됨
배경화면 main.css
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #000000;
/* original color : #0d0d0d */
background-image:url("../img/testimonials/couple_2.jpg");
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
overflow-x: hidden;
}