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

}