• CSS 는 위에서부터 순차적으로 스타일이 적용되어, 최종적으로는 마지막의 스타일로 덮어씌워진다. (Cascading)

• 기본적으로 뒤에 나오는 CSS가 우선순위가 높다.

• CSS 우선순위 (높은 순)

  • !important
  • inline style attribute
  • id
  • class
  • tag, element
  • 우선순위가 같으면 개수가 많은 css가 우선순위가 높다.

• 다음과 같은 이슈는 CSS가 Casscading 형식으로 순차적으로 실행되어서 bootstrap이 모든 css 를 덮어씌우는 이슈 예제이다.

#6 부트스트랩의 style이 comon.css 보다 먼저 적용되는 이슈

• 부트스트랩 로드과정에서 문제있을 가능성
  • 로드하는 코드를 주석처리로 분석

web/src/main/webapp/WEB-INF/tiles/frontend/main-header.jsp

• 기존 CSS 로드하는 순서
• bootstarp 이 가장 나중에 로드되어 CSS 적용되는 순서가 다음과 같이 됨
  • coomon.css 적용
  • coomon.css 위에 덮어씌어서 common-1.css 적용
  • common-1.css 적용된 상태에서 위에 덮어씌워서 custom.css 적용
  • custom.css 적용된 상태에서 위에 덮어씌워서 bootstrap.min.css 적용
  • 따라서 가장 나중에 bootstarp 이 로드되어 모든 style 위에 bootstarap 스타일이 덮어씌워져서 우선순위가 bootstrap 스타일이 적용됨

<!-- 리뉴얼 CSS -->
    <link href="/resources/frontend/css/common.css" rel="stylesheet">
    <link href="/resources/frontend/css/common-1.css" rel="stylesheet">
    <link href="/resources/frontend/css/custom.css" rel="stylesheet">
    <link href="/resources/frontend/css/bootstrap.min.css" rel="stylesheet">

• 수정후 CSS 로드하는 순서