부트스트랩 css 우선순위 - buteuseuteulaeb css useonsun-wi

Question

🎨 CSS 덮어쓰기, 어떤 것을 사용해야하나?

CSS를 직접 작성하다 보면 덮어써야하는 경우가 발생하곤 한다.
부트스트랩 같은 라이브러리를 사용하더라도 내가 원하는 스타일링을 추가하고 싶을 때
다양한 방법 중 어떠한 방법이 가장 적합할 지 알아보기로 했다.
목차 Show

🎨 CSS 덮어쓰기, 어떤 것을 사용해야하나?
1. 기존 스타일보다 더 하단에 작성하기
2. css 우선순위를 이용하기
인라인 스타일
.class 또는 pseudo클래스
태그 선택자
3. Specificity 점수 높이기
▣ 서론
▣ 코드의 구성
▣ 실행 방법
□ 태그 내 실행(Inline CSS)
□ HTML 내부 실행(Internal CSS)
□ HTML 외부 실행(External CSS)
※ CSS 실행 우선순위
▣ 프레임워크 이용 실행(Framework)
□ 부트스트랩(Bootstrap)
□ 머티리얼라이즈(Materialize)

먼저 작성된 기존 CSS 파일을 덮어쓰는 방식에는 3가지가 존재했다.

덮어 쓰고자 하는 것을 기존 클래스명, id명, 태그명, 스타일 등 보다 더 하단에 작성하는 방법이다.
CSS의 적용 우선순위를 이용한다.
Specificity 점수를 높인다.

1. 기존 스타일보다 더 하단에 작성하기

해당 방법은 먼저 작성한 것보다 밑에 있을 수록 우선적으로 적용된다는 점을 이용한다는 것이다. css media query가 이런 방식으로 동작한다.

2. css 우선순위를 이용하기

css는 속성별 점수가 부여되어 높은 점수를 가진 스타일이 적용된다.

우선순위	선언 방식	점수
1	!important	10,000
2	style="" (html 요소에 직접 스타일 넣기)	1,000
3	#id	100
4	.class 또는 pseudo 클래스 (가상 클래스 선택자)	10
5	html 태그명	1

점수가 부여되는 선언 방식은 위 표와 같다.
그 외에는 전체선택자(*)와 상속이 있으나 점수가 없는 것과 같기 때문에 표에는 넣지 않았다.

!important

/* CSS */

p {
	color: aliceblue; !important
}

!important가 붙은 스타일은 당장 우선순위로 급하게 적용해야 할 때만 사용하고 가급적 사용하지 않는 것이 좋다. 점수가 너무 높아 최우선적으로 적용되는 속성이기 때문에 웬만하면 피하도록 하자.
본인은 css 접한지 얼마 안되어 잘 모를 때 같은 학부생이 사용하는 것을 보고 '오 뭐야 이런 것도 써도 되는 건가?' 하고 따라 쓰다가 낭패를 본 경험이 있다. 😥😥😥

인라인 스타일

<div style="color: aliceblue">
</div>

!important 다음으로 높은 점수를 가졌다. html 요소 자체에 직접 style 속성을 부여하는 것인데 html이 지저분해질 뿐만 아니라 우선순위 또한 높아서 사용하지 않는 편이 좋다.
물론, 귀찮을 때 한번씩 쓴 적이 있긴 하다..

#id

#reason {
	color: aliceblue;
}

id 선택자를 사용하여 스타일을 주는 방법이다. id의 점수는 100점으로 class를 10개 사용한 것과 동일한 점수이다.
요즘엔 id 속성으로 직접적으로 스타일을 넣지 않는 경우가 많다고 한다. (자바스크립트 등에서 사용하기 때문에)

.class 또는 pseudo클래스

.reason{
	color: aliceblue;
}

.reason:hover{
	color: blue;
}

class에 스타일을 넣는 방법이 가장 많이 사용되는 방법일 것이다. 역시 제일 무난한게 최고!

태그 선택자

p {

}

css reset 파일에서 자주 볼 수 있다.
가끔 스타일 지정할 때 class와 혼용하여 사용하기도 한다. 점수가 낮기 때문에 단독으로 사용할 때는 중첩된 스타일이 있는지 확인해야할 수도 있다.

3. Specificity 점수 높이기

우선 순위 점수를 이용한 스타일 덮어쓰는 방법이다.

2번에서 살펴본 우선 순위 점수를 이용해서 css를 덮어쓰기 하는 방법을 말한다. 셀렉터를 여러개 사용할 수록 점수가 높아지는 방식을 이용하는 것이다.
예를 들면 다음과 같다.

.test.reason {
	color : red;
	/* 20점 */
}

p.reason {
	color : blue;
	/*이것은 11점*/
}

reason이라는 이름을 가진 class는 blue가 아닌 red가 적용된다. css 작성 순서로만 보면 밑에 작성된 것이 더 우선적으로 적용되야 하지만, 우선순위 점수로 인해 class 2개(10+10=20)가 더 높은 토탈 점수로 인해 color : red가 적용된다.

위 방법들을 참고해서 CSS 파일을 덮어쓰면 된다.
단, 몇가지 유의할 사항이 있었다.

1번의 경우 계속 하단에 작성하게 되면 코드의 길이가 길어질 뿐더러 지저분해질 것이다. (계속 하단에 같은 셀렉터를 반복해서 작성해야 하니까)

2번은 사실 정말 특수한 경우 아니면 class나 html 태그명을 통한 스타일 적용을 주로 사용하기 때문에 다른 점수가 높은 선언 방식을 사용할 때만 주의해서 쓰면 될 것 같다.

3번 에서 살펴본 specificity 점수를 높일때 너무 많은 셀렉터를 사용하게 되면 어떤 요소에 스타일을 주는 것인지 알아보기 힘드므로 class, html 태그명을 이용해서 1~3개 정도 사용하는 것이 좋은 것 같다.

재사용성이나 확장성, 유지보수를 고려한 코드를 작성하는 것이 올바른 코드 작성 방법이다.

▣ 서론

CSS(Cascading Style Sheets)는 HTML, 자바스크립트와 함께 웹 개발의 핵심 기술 중 하나입니다. 웹 페이지 만드는 것을 건축에 비유하자면 HTML은 구조를 담당하고 자바스크립트는 작동 가능한 기기나 장치 등을 제어하며, CSS는 인테리어나 익스테리어 정도로 파악할 수 있습니다. 즉, CSS는 스타일링을 담당하여 사용자가 좀 더 편안하고 쾌적하게 웹 서비스를 경험할 수 있도록 환경을 제공하는 역할을 합니다.

향후 진행할 내용에서는 최대한 실습 내용을 중심으로 코드들을 설명할 예정이며,프레임 워크를 이용하지 않고 순수하게 CSS만을 이용한 스타일링에 초점을 맞추도록 하겠습니다.프레임워크에 대해서는 간단하게 설명하고 향후에 별도로 다루도록 하겠습니다.

기본적인 CSS에 대한 다양한 용어와 개념 정의는 모질라 개발자 네트워크를 참고하길 바라며, 이 외에도 자세한 설명이 필요한 부분은 참고 자료나 문서로 갈음하겠습니다. 그리고 대체 불가한 경우를 제외하고는 가급적 전문 용어를 지양하여 일반적인 어휘로 설명하도록 하겠습니다.

학습을 시작하기 전에 실습 환경 설치 및 설정과 기본적인 HTML에 대하여 먼저 살펴보길 바랍니다.

[자바스크립트] VS Code와 크롬 웹 브라우저를 이용한 JavaScript, HTML, CSS 코딩 준비

▣ 시작하기 전에 향후 진행할 내용 중 문법 관련은 최소한의 설명만 덧붙일 예정이며 가급적 모질라 개발자 네트워크 문서를 참조할 것입니다. 그리고 프로젝트에서는 라이브러리(Library) 또는

charlie-lyc.tistory.com

▣ 코드의 구성

이후에 설명할 실행 방법의 차이는 조금 있지만, 기본적으로 CSS의 코드 구성은 위와 동일합니다. 가장 왼쪽에는 '선택자(Selector)'가 위치하고, 선택된 대상에 대한 '선언(Declaration)'부분은 '{ }' 기호로 둘러싸여 있습니다. 그리고 그 안에는 속성의 이름과 값(Property/Value)을 작성하며, 이때 여러 개의 속성이 선언될 경우 서로 구분하기 위한 ' ; ' 기호가 포함됩니다.

▣ 실행 방법

지금부터는 CSS 코드가 실행되는 방법 몇 가지에 대해 살펴보겠습니다. 태그 내, HTML 내부 또는 외부 등 실행 방식이 조금씩 다르지만 기본적으로 속성의 이름과 값을 선언하여 이용한다는 큰 틀에서 문법상 차이는 없습니다. 다만 프레임워크를 이용할 경우에는 제작사로부터 제공되는 링크와 클래스 이름들을 활용합니다.

기초적인 내용을 다룰 때는 HTML 내부 실행 방식을 주로 이용하고, CSS 코드의 양이 많아질수록 HTML 외부 실행 방식을 주로 이용합니다.

□ 태그 내 실행(Inline CSS)

<html>
  <head>
  
  </head>
  <body>
  
    <!-- Inline CSS -->
    <h2 style="color: red;">First Heading</h2>
      
  </body>
</html>

태그 내에서 'style' 속성을 이용하여 작성하는 방식으로 설정해야 할 속성의 종류가 많아질수록 태그의 길이가 길어져서 가독성이 떨어지므로 잘 사용되지는 않습니다. 하지만 이후에 설명하게 될 다른 실행 방법보다 실행 우선순위가 높습니다. 즉, 하나의 HTML 요소에 대하여 다른 방식으로 중복되어 스타일링 될 경우 가장 우선적으로 적용됩니다.

□ HTML 내부 실행(Internal CSS)

<html>
  <head>
  
    <!-- Internal CSS -->
    <style>
        h2 {
            color: green;
        }
    </style>
  
  </head>
  <body>
  
    <!-- Internal CSS : using <style> -->
    <h2>Second Heading</h2>
    
  </body>
</html>

위의 코드에서 볼수 있듯이 <head> 태그 내에 <style> 태그를 생성하여 그 안에서 작성하는 방식으로 태그 내 실행 방식보다 가독성이 높지만 코드가 길어질수록 HTML 문서가 필요 이상으로 길어질 수 있습니다. 실행 우선순위는 태그 내 실행 방식보다 낮으며, <head> 태그 내에서 <style> 태그의 위치에 따라 달라집니다.

□ HTML 외부 실행(External CSS)

<html>
  <head>
  
    <!-- External CSS -->
    <link rel="stylesheet" href="css/style.css">
  
  </head>
  <body>
  
    <!-- External CSS : using <link> -->
    <h2>Third Heading</h2> 
    
  </body>
</html>

HTML 문서 외에 ' .css '확장자를 가지는 파일을 별도로 작성하는 방식으로, 실제 작업 환경에서 주로 활용하는 방식입니다. 위의 코드에서 볼 수 있듯이 <head> 태그 내에 <link> 태그를 생성하여 'rel' 속성의 값을 'stylesheet'으로 설정하고, 'href' 속성의 값은 ' .css '파일이 존재하는 경로를 설정합니다.

아래의 실행결과를 보면 'style.css' 파일을 css 폴더에 넣어 두었기 때문에 경로 값은 'css/style.css' 또는 './css/style.css' 입니다. 그리고 실행 우선순위는 태그 내 실행 방식보다 낮으며, <head> 태그 내에서 <link> 태그의 위치에 따라 달라집니다.

※ CSS 실행 우선순위

앞서 설명한 대로 CSS의 실행 우선순위에 대한 결과를 아래와 같이 나타낼 수 있습니다.

위와 아래의 결과를 보면 동시에 세 가지의 다른 방식으로 <h2> 태그에 대하여 스타일링을 설정하고 있지만 태그 내 실행은 HTML 내부 또는 외부 실행과 관계없이 명확하게 해당 태그를 우선적으로 스타일링하고 있습니다.(빨간색)

반면에 HTML 내부 또는 외부 스타일링은 적용되는 <style> 또는 <link> 태그의 위치에 따라 녹색 또는 파란색으로 바뀌는데 이때 <head> 태그 내에서 아래쪽에 있을수록 최종적인 스타일로 적용됩니다.

▣ 프레임워크 이용 실행(Framework)

본 내용에서 깊이 있게 다루지는 않지만, HTML 문서에서 링크 설정하는 방법과 간단한 예시를 들어 설명하도록 하겠습니다.

□ 부트스트랩(Bootstrap)

<!doctype html>
<html lang="en">
  <head>

    <!-- Bootstrap CSS -->
    <link 
      href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" 
      crossorigin="anonymous">

  </head>
  <body>

    <!-- Bootstrap Bundle with Popper -->
    <script 
      src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" 
      integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" 
      crossorigin="anonymous"></script>
      
  </body>
</html>

부트스트랩 프레임워크를 사용하고자 할 때는 HTML 문서의 <head> 태그 내에 사이트에서 제공되는 'Bootstrap CSS' <link> 태그를, <body> 태그 내의 마지막 부분에 'Bootstrap Bundle with Popper' <script> 태그를 각각 추가하여 아래와 같이 부트스트랩에서 제공되는 기능을 활용할 수 있습니다.

예시로 표시된 디자인은 '카드(Card)'이며, 이미지는 임의로 경로를 추가하였습니다. 자세한 사항은 링크를 참조하기 바랍니다.

□ 머티리얼라이즈(Materialize)

<!DOCTYPE html>
<html>
  <head>

    <!--Import Google Icon Font-->
    <link 
      href="https://fonts.googleapis.com/icon?family=Material+Icons" 
      rel="stylesheet">

    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  
      media="screen,projection"/>

  </head>
  <body>

    <!--JavaScript at end of body for optimized loading-->
    <script type="text/javascript" src="js/materialize.min.js"></script>
    
  </body>
</html>

머티리얼라이즈 프레임워크는 부트스트랩과 달리 사이트에서 파일을 다운로드하여 HTML 문서와 동일한 경로의 위치에서 css 폴더에 'materialize.min.css' 파일을, js 폴더에는 'materialize.min.js' 파일을 둠으로써 제공되는 기능을 활용할 수 있습니다. 특히 '구글 아이콘 폰트(Google Icon Font)'가 링크로 제공되므로 이를 활용하여 스타일링을 할 수 있습니다.

예시로 표시된 디자인은 '카드(Card)'이며, 자세한 사항은 링크를 참조하기 바랍니다.