본문 바로가기
IT/CSS

CSS: Selectors and Visual Rules

by 무녈 2021. 5. 2.

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

SELECTORS AND VISUAL RULES

SETUP AND SYNTAX

Intro to CSS

CSS(Cascading Style Sheets)는 웹 개발자들이 웹 페이지의 HTML 콘텐츠를 스타일링하기 위해 사용하는 언어이다.

CSS를 통해 색, 글꼴, 글꼴 크기, 이미지, 요소 위치 등을 수정할 수 있다.

CSS Anatomy

CSS ruleset vs CSS inline style / 출처: https://static-assets.codecademy.com/Courses/Learn-CSS/Setup-and-Syntax/CSS_Anatomy-v2-nobgfill.svg

CSS 코드 작성을 위한 두 가지 다른 방법

CSS를 Ruleset과 Inline Style 두 가지 작성 방법이 있다.

 

Declaration은 선택한 요소에 스타일을 적용하는 CSS의 핵심이다.

<p> 요소는 두 구문 모두에서 선택되었으며, 텍스트를 파란색으로 표시하도록 스타일링된다.

 

선택한 요소의 스타일을 지정하기 위해 declaration이 사용된다는 것을 이해하는 것은 CSS로 HTML 문서의 스타일을 지정하는 방법을 배우는 데 핵심이다.

 

Ruleset 용어:

  • Selector: 스타일을 지정할 요소를 대상으로 하는 데 사용되는 ruleset의 시작
  • Declaration Block: CSS 선언을 포함하는 컬리 브레이스({ }) 사이의 코드
  • Declaration: 선택한 요소에 스타일을 적용하는 속성 및 값 쌍의 그룹 이름
  • Property: 요소의 시각적 특성을 수정하는 선언(declaration)의 첫 번째 부분
  • Value: 속성 값을 나타내는 선언의 두 번째 부분

 

Inline Style 용어:

  • Opening tag: HTML 요소의 시작으로 스타일링될 요소
  • Attribute: 스타일 속성은 CSS inline style을 HTML 요소에 추가하는 데 사용
  • Declaration: 선택한 요소에 스타일을 적용하는 속성 및 값 쌍의 그룹 이름
  • Property: 요소의 시각적 특성을 수정하는 선언의 첫 번째 부분
  • Value: 속성 값을 나타내는 선언의 두 번째 부분

Inline Styles

inline styles을 사용하여 HTML 코드 내에서 직접 CSS 코드를 작성할 수 있다.

 

HTML 요소를 스타일링하기 위해 스타일 속성을 opening tag에 직접 추가한다.

속성을 추가한 후 해당 요소에 적용할 CSS 스타일과 동일하게 설정한다.

 

inline styling의 사용 방법

<p style='color: red;'>I'm learning to code!</p>

 

문단 요소에는 opening tag 내에 style attribute가 있다.

다음으로, 스타일 속성은 color: red; 과 동일하게 설정되며, 이는 브라우저 내에서 읽을 문단 텍스트의 색상을 설정한다.

 

Inlie style을 사용하여 스타일을 두 개 이상 추가하려면 스타일 속성에 계속 추가하기만 하면 된다.

세미콜론(;)으로 스타일을 끝내는 것이 중요하다.

<p style='color: red; font-size: 20px;'>I'm learning to code!</p>

Inline style은 HTML 요소를 직접 스타일링하는 빠른 방법이지만 웹 사이트를 만들 때는 거의 사용되지 않는다.

그러나 inline styling이 필요한 상황에 직면할 수 있으므로 어떻게 작동하는지 이해하고 HTML 코드로 인식하는 하는지 알아두도록 하자.

Internal Stylesheet

HTML을 사용하면 <head> 요소 안에 중첩된 <style> 요소를 사용하여 CSS 코드를 자체 전용 섹션에 작성할 수 있다.

<style> 요소 내부의 CSS 코드는 internal stylesheet라 한다.

 

internal stylesheet은 inline style에 비해 일부 장점이 있지만, 또한 CSS를 코드 작성에 좋은 방법은 아니다.

하지만 internal stylesheet를 사용하는 방법을 이해하는 것은 유용하기 떄문에 알아두도록 한다.

 

internal stylesheet를 만들기위해 <style> 요소를 <head> 요소 내부에 배치한다.

<head>
  <style>
 
 
  </style>
</head>

헤드 섹션에 opening 및 closing <style>태그를 추가한 후 CSS 코드를 작성한다.

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

예에서 CSS 코드는 모든 단락 텍스트의 색상을 빨간색으로 변경하고 텍스트 크기를 20픽셀로 변경한다.

CSS 코드의 구문이 inline styling에 사용한 구문과(대부분의 경우) 비교할 때, 주요 차이점은 스타일을 적용할 요소를 지정할 수 있다는 점이다.

External Stylesheet

개발자들은 HTML과 CSS 코드를 별도의 파일에 저장함으로써 코드를 혼합하는 것을 피한다

(HTML 파일은 HTML 코드만 포함하고 CSS 파일은 CSS 코드만 포함한다).

 

.css 파일 이름 확장명을 사용하여 external stylesheet를 생성한다.

ex) style.css

 

external stylesheet를 사용하면 HTML 파일의 가독성과 유지 보수성을 유지하면서 페이지 스타일링에 필요한 모든 CSS 코드를 작성할 수 있다.

Linking the CSS File

<link> element

HTML 파일에서 CSS 코드를 찾을 수 없고 스타일링이 적용되지 않기 때문에, HTML과 CSS 코드가 별도의 파일에 있을 때, 파일은 링크되어야 한다.

 

<link> 요소를 사용하여 HTML과 CSS 파일을 함께 연결할 수 있으며, <link> 요소는 HTML 파일의 head 내에 위치해야 한다.

self-closing tag이며 다음 속성이 필요하다.

  1. href: (anchor 요소와 마찬가지로) 이 속성의 값은 CSS 파일의 주소 또는 경로
  2. rel: 이 속성은 HTML 파일과 CSS 파일 사이의 관계(relationship)를 설명함. 스타일시트에 연결 중이므로 값을 'stylsheet'로 설정한다.

HTML 파일과 CSS 파일을 함께 연결할 때, <link>요소의 예:

<link href='https://www.codecademy.com/stylesheets/style.css' rel='stylesheet'>

위의 예에서 스타일시트의 경로는 URL이다.

https://www.codecademy.com/stylesheets/style.css

URL을 사용하여 스타일시트의 경로를 지정하는 것도 스타일시트를 연결하는 한 가지 방법이다..

CSS 파일이 HTML 파일과 동일한 디렉토리(directory)에 저장된 경우 다음과 같이 URL 대신 상대 경로(relative path)를 지정할 수 있다.

<link href='./style.css' rel='stylesheet'>

주로 상대 경로(relative path)를 사용하여 스타일시트(stylesheet)를 연결한다.

SELECTORS

Type

type selector

declaration(선언)은 선택한 요소에 스타일을 적용하므로 CSS의 기본 요소이다.

 

selector는 선언에 의해 스타일링될 특정 HTML 요소를 대상으로 하는 데 사용된다.

이미 익숙할 수 있는 selector는 type selector(유형 선택자)이다.

type selector는 HTML 문서의 요소 유형과 일치한다.

 

p {
  color: green;
}

 

요소 유형은 HTML <p> 태그에서 가져온 p 이다.

 

type selector에 대한 몇 가지 중요 참고 사항:

  • type selector에는 꺾쇠 괄호(<>)이 포함되지 않는다.
  • element type은 opening tag 이름으로 불리기 때문에, type selector는 tag name 또는 element selector로 불린다.

Universal

Universal Selector

Universal selector(범용 선택자)는 모든 유형의 요소를 선택한다.

 

페이지의 모든 요소를 대상으로 하는 것은 기본 브라우저 스타일 재설정 또는 상위 요소의 모든 하위 항목 선택과 같은 몇 가지 특정 사용 사례가 있다.

 

universal selector는 ruleset에서 type seletor를 지정한 동일한 위치에서 * 문자를 사용한다.

* { 
  font-family: Verdana;
}

위의 코드에서 페이지의 모든 텍스트 구성요소는 글꼴을 Verdana로 변경한다.

Class

HTML과 CSS로 작업할 때 class 속성은 요소를 선택하는 가장 일반적인 방법 중 하나

 

ex) HTML

<p class='brand'>Sole Shoe Company</p>

위의 예에서 문단 요소는 <p> 요소의 opening tag 내에 class 속성을 가지고 있다.

class 속성이 'brand'로 설정된다.

CSS를 사용하여 이 요소를 선택하려면 .brand의 class selector를 사용하여 ruleset을 만들 수 있다.

.brand {
 
}

class 별로 CSS를 사용하여 HTML 요소를 선택하려면 마침표(.)를 class 이름에 붙여야 한다.

위의 예에서 class는 brand이므로 해당 c;ass의 CSS seletor는 .brand이다.

Multiple Classes

HTML 요소의 클래스 속성에 두 개 이상의 클래스 이름을 추가할 수 있다.

ex) 녹색의 굵은 표제 요소(heading element), 두 개의 CSS ruleset 작성

.green {
  color: green;
}
 
.bold {
  font-weight: bold;
}

하나의 HTML 요소에 두 개의 클래스를 모두 포함

<h1 class='green bold'> ... </h1>

여러 클래스를 공백(space)으로 구분하여 HTML 요소의 클래스 속성에 추가할 수 있다.

이를 통해 CSS 클래스를 혼합하고 일치시켜 필요한 모든 스타일 조합에 대한 사용자 지정 클래스를 작성하지 않고도 많은 고유한 스타일을 만들 수 있다,

ID

id attribute

CSS가 있는 단일 요소를 선택하여 고유한 스타일을 제공하는 것이 중요하다.

HTML 요소를 고유하게 스타일링해야 한다면 id 속성을 사용해서 ID를 줄 수 있다.

<h1 id='large-title'> ... </h1>

HTML 문서 전체에 걸쳐 광범위하게 사용될 수 있는 여러 값을 수용하는 class와는 달리, 요소의 ID는 단일 값을 가질 수 있으며, 페이지당 한 번만 사용할 수 있다.

CSS로 요소의 ID를 선택하려면 숫자 기호(#)가 있는 ID 이름을 앞에 붙인다.

 

위의 예에서 HTML 요소를 선택하고자 한다면 다음과 같다.

#large-title {
 
}

ID 이름은 large-title이므로, CSS selector는 #large-title이다.

Attribute

HTML 요소는 속성을 사용하여 요소에 추가 세부 정보 또는 기능을 추가할 수 있다.

(href와 src, class와 id 등등)

(참고: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)

 

attribute selector를 사용하여 이미 attribute이 포함된 HTML 요소를 대상으로 지정할 수 있다.

동일한 유형의 요소를 속성 또는 속성 값에 따라 다르게 지정할 수 있다.

이렇게 할 경우, class 또는 id 속성과 같은 새 코드를 추가할 필요가 줄어든다.

 

type, class, id와 유사하게 속성을 선택할 수 있다.

[href]{
   color: magenta;
}

가장 기본적인 구문(syntax)은 대괄호([])로 둘러싸인 속성이다.

예에서 [href]는 href 속성을 가진 모든 요소를 대상으로 하고 색상을 자홍색으로 설정한다.

 

또한 유형(type) 및/또는 속성 값(attribute value)을 추가하여 세분화할 수 있다.

한 가지 방법은 type[attribute*=value]을 사용하는 것이다.

이 코드는 속성이 지정된 값의 instance를 포함하는 요소를 선택한다.

(참고: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax)

 

예시)

<img src='/images/seasons/cold/winter.jpg'>
<img src='/images/seasons/warm/summer.jpg'>

위의 HTML 코드는 두 개의 <img> 요소를 렌더링하며, 각각은 이미지 파일에 대한 링크와 동일한 값을 가진 src 속성을 포함하고 있다.

img[src*='winter'] {
  height: 50px;
}
 
img[src*='summer'] {
  height: 100px;
}

 

attribute selector는 각 이미지를 개별적인 대상으로 지정하는 데 사용된다.

  • 첫 번째 규칙 집합은 문자열 'winter'를 포함하는 src 속성을 가진 img 요소를 찾고 높이를 50px로 설정
  • 두 번째 규칙 집합은 문자열 'summer'를 포함하는 src 속성을 가진 img 요소를 찾고 높이를 100px로 설정

새로운 HTML 마크업(class or id 등)을 추가할 필요가 없고, 각 이미지의 스타일을 독립적으로 수정할 수 있다.

이것은 attribute seletor의 한 가지 장점이다.

Pseudo-class

특정 user interaction 후 특정 요소의 모양이 어떻게 변경되거나 다른 상태에 있을 수 있는지 관찰했을 것이다.

예:

  • <input>요소를 클릭하면 파란색 테두리가 추가되어 포커스가 있음을 나타낸다.
  • 파란색 <a> 링크를 클릭하여 다른 페이지로 이동할 때 링크 텍스트를 반환하면 보라색이 된다.
  • 양식을 작성할 때 제출 단추가 회색으로 표시되고 비활성화된다. 그러나 모든 필드가 입력되면 버튼에 활성 상태인 색상이 표시된다.

:focus, :visited, :disable, :active는 모두 pseudo-class이다.

user interaction, 사이트 탐색 및 DOM에서의 위치와 같은 요인은 모두 요소들에게 pseudo-class의 다른 상태를 제공할 수 있다

 

pseudo-class는 모든 selector에 연결할 수 있다.

pseudo-class 항상 colon(:)으로 쓰이고, 그 뒤에 이름이 붙는다.

예: p:hoover.

p:hover {
  background-color: lime;
}

위의 코드에서 마우스가 단락 요소 위로 이동할 때마다 해당 단락은 라임색 배경을 갖는다.

Classes and IDs

CSS는 HTML 요소를 type, class 및 ID별로 선택할 수 있다.

CSS class와 ID는 서로 다른 용도를 가지므로 HTML 요소를 스타일링하는 데 사용하는 용도에 영향을 줄 수 있다.

 

CSS class는 많은 요소에서 재사용됩니다.

CSS class를 작성하면 class를 혼합하여 다양한 방법으로 요소를 스타일링할 수 있다.

 

두 개의 headline이 있는 페이지를 상상해 보아라.

한 headline은 굵고 푸른 색이어야 하고, 다른 headline운 굵고 녹색이어야 한다.

서로 코드를 반복하는 각각의 헤드라인에 대해 별도의 CSS 규칙을 쓰는 대신 .bold CSS 규칙, .green CSS 규칙, .blue CSS 규칙을 쓰는 것이 좋다.

그런 다음 headline에는 bold green classes를, 다른 headline에는 bold blue classes를 표시할 수 있다.

 

class는 여러 번 사용하도록 되어 있지만 ID는 한 요소만 스타일링하도록 되어 있다.

Specificity

Specificity는 브라우저가 표시할 CSS 스타일을 결정하는 순서이다.

CSS에서 가장 좋은 방법은 요소들이 새로운 스타일을 필요로 할 때 쉽게 재정의할 수 있도록 특수성의 낮은 정도를 사용하는 것이다.

 

specificity는 ID > class > type 순서이다.

<h1 class='headline'>Breaking News</h1>
h1 {
  color: red;
}
 
.headline {
  color: firebrick;
}

예제 코드에서, class selector은 type selector보다 더 구체적이기 때문에, 머리글의 색은 firebrick으로 설정된다.

위의 코드에 ID attribute(및 selector)가 추가된 경우, ID selector의 본문 내에 있는 스타일은 heading에 대한 다른 모든 스타일을 재정의한다.

 

코드와 함께 파일이 증가함에 따라, 많은 요소들이 ID를 가질 수 있는데, 이것은 요소의 스타일을 바꾸기 위해 새롭고 더 구체적인 스타일이 만들어져야 하기 때문에 CSS를 편집하는 것을 어렵게 만들 수 있다.

 

스타일을 쉽게 편집하려면 가능하면 type selector로 스타일을 지정하는 것이 가장 좋다.

그렇지 않은 경우 class selector를 추가하고, 이 방법이 충분히 구체적이지 않다면 ID selector를 사용하는 것을 고려한다.

Chaining

CSS 규칙을 작성할 때, 동시에 둘 이상의 CSS selector를 가지기 위해 HTML 요소가 필요하다.

 

Chaining: 여러 selector를 결합하여 수행하는 것

예를 들어, 만약 <h1> 요소에 대한 speical 클래스가 있다면, CSS는 아래와 같을 것이다.

h1.special {
 
}

위의 코드는 special 클래스가 있는 <h1> 요소만 선택한다.

<p> 요소에 special 클래스도 있는 경우, 예제의 규칙은 문단을 스타일링하지 않는다.

Descendant Combinator

selector를 연결하여 요소를 chaining하는 것 외에도, CSS는 하위 항목(descendant)이라 하는 다른 HTML 요소 내에 중첩된 요소 선택을 지원한다.

예시:

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

중첩된 <li> 요소는 <ul> 요소의 하위 요소이며 다음과 같은 하위 조합(descendant combinator)으로 선택할 수 있다.

.main-list li {
 
}

위의 예에서 .main-list는 .main-list class(<ul> 요소)로 요소를 선택

하위 <li>는 selector에 li 를 추가하고 공백으로 구분하여 선택

이렇게 하면 .main-list li가 최종 selector가 된다.

 

이러한 방식으로 요소를 선택하면 selector가 원하는 컨텍스트에 나타나도록 함으로써 selector가 더욱 구체적으로 나타난다.

Chaining and Specificity

둘 이상의 tag, class 또는 ID를 CSS selector에 추가하면 CSS selector의 특수성이 향상된다.

 

예시:

p {
  color: blue;
}
 
.main p {
  color: red;
}

이 두 CSS 규칙은 모두 <p> 요소의 모양을 정의한다.

.main p는 selector로 class 및 p 타입을 가지므로 .main 요소 안에 있는 <p> 요소만 빨간색으로 표시된다.

이것은 <p> 요소가 파란색이어야 한다는 또 다른 일반적인 규칙이 있음에도 불구하고 발생한다.

Multiple Selecotrs

CSS를 좀 더 간결하게 만들기 위해 CSS 스타일을 여러 CSS selector에 한꺼번에 추가하여, 반복 코드 쓰기를 방지할 수 있다.

 

예시:

h1 {
  font-family: Georgia;
}
 
.menu {
  font-family: Georgia;
}

두 개의 selector에 대해 두 번 font-family: Georgia를 쓰는 대신 다음과 같이 selector를 쉼표(,)로 구분하여 동일한 스타일을 적용할 수 있다.

h1, 
.menu {
  font-family: Georgia;
}

CSS 선택자를 쉼표(,)로 분리함으로써, <h1> 요소와 menu 클래스가 있는 요소 모두 font-family: Georgia 스타일링을 받게 된다.

VISUAL RULES

Introduction To Visual Rules

CSS의 목적은 웹 페이지에 스타일을 추가하는 것이고, 페이지의 각 요소는 많은 스타일 속성을 가질 수 있다.

일부 기본 property는 요소의 크기, 스타일 및 색상과 관련이 있다.

이 과정에서는 웹 페이지 요소를 스타일링하는 데 사용할 수 있는 몇 가지 기본적인 CSS 시각적 규칙에 대해 배우게 된다.

Font Family

웹 페이지에서 텍스트의 서체를 변경하려면 font-family property(속성)을 사용한다.

h1 {
  font-family: Garamond;
}

위의 예에서 모든 주요 heading 요소에 대한 font familiy가 Garamond로 설정된다.

 

웹 페이지에서 서체를 설정 시 고려사항

  • 지정한 글꼴은 사용자의 컴퓨터에 설치하거나 사이트와 함께 다운로드해야 한다.
  • Web safe fonts은 대부분의 브라우저 및 운영 체제에서 지원되는 글꼴 그룹이다. 
    (참고: https://www.cssfontstack.com/)
  • Web safe fonts을 사용하지 않는 한 선택한 글꼴이 모든 브라우저와 운영 체제 간에 동일하게 표시되지 않을 수 있다.
  • 서체의 이름이 두 개 이상의 단어로 구성된 경우, 다음과 같이 서체의 이름을 따옴표로 묶는다.

 

h1 {
  font-family: 'Courier New';
}

Font Size

글꼴 크기(font size)를 수정하여 웹 페이지의 다른 섹션이 강조 표시된다.

웹 페이지의 텍스트 크기를 변경하려면 글꼴 크기 속성(font-size property)을 사용한다.

p {
  font-size: 18px;
}

모든 문단의 글꼴 크기는 18px로 설정되었으며,px는 픽셀을 의미하며, 이것은 글꼴 크기를 측정하는 한 방법이다.

Font Weight

CSS에서 글꼴 가중치 속성(font-weight property)은 굵거나 얇은 텍스트를 표시하는 방법을 제어한다.

p {
  font-weight: bold;
}

위의 예에서는 웹 페이지의 모든 단락이 굵게 표시된다.

 

font-weight property에는 value: normal이 있다.

웹 페이지의 모든 텍스트를 굵게 표시하려면 모든 텍스트 요소를 선택하고 font-wiehgt를 굵게 변경할 수 있다.

그러나 텍스트의 특정 섹션이 normal으로 나타나야 하는 경우, 특정 요소의 글꼴 가중치를 normal으로 설정하여 해당 요소의 굵은 글꼴을 차단할 수 있다.

Text Align

텍스트(서체, 크기, 무게 등)에 적용되는 스타일링에 관계없이 텍스트는 항상 텍스트에 있는 컨테이너의 왼쪽에 나타납니다.

 

텍스트를 정렬하기 위해 텍스트 정렬 속성(text-align property)을 사용한다.

텍스트 정렬 속성은 텍스트를 고정하는 요소에 텍스트를 정렬한다(상위 속성, parent이라고도 함).

h1 {
  text-align: right;
}

텍스트 정렬 속성은 일반적으로 사용되는 다음 값 중 하나로 설정할 수 있다.

  • left - 텍스트를 상위 요소의 왼쪽에 정렬
  • center - 텍스트를 상위 요소 내부에 가운데 정렬
  • right - 텍스트를 상위 요소의 오른쪽에 정렬
  • justify - 상위 요소의 오른쪽과 왼쪽을 정렬하기 위해 텍스트를 공백으로 띄워써 표시

Color and Background Color

색에 대해 두 가지 구별을 하는 것이 중요

색상은 다음과 같은 설계 측면에 영향을 미칠 수 있다.

  • Foreground color(전경색)
  • Background color(배경색)

Foreground color는 요소가 나타나는 색이다.

예를 들어, heading이 녹색으로 보이도록 스타일링된 경우, heading의 foreground color(전경색)가 스타일링된다.

반대로, heading의 배경이 노란색으로 보이도록 스타일을 지정할 때, heading의 background color(배경색)가 스타일링된다.

 

CSS에서 이 두 가지 설계 측면은 다음 두 가지 property으로 스타일링할 수 있다.

  • color: 이 property는 요소의 전경색 스타일링
  • backgorund-color: 이 property은 요소의 배경색을 스타일링
h1 {
  color: red;
  background-color: blue;
}

위의 예에서는 heading 텍스트가 빨간색으로 표시되고 heading 배경이 파란색으로 표시된다.

Opacity

Opacity(불투명도)는 요소의 투명도를 측정하는 측도이다.

이값은 0에서 1까지 측정되며, 1은 100%를 나타내고, 1은 완전 가시 및 불투명도를 나타내며,

0은 0%를 나타내거나 완전히 보이지 않는다.

 

불투명도는 좋은 오버레이 효과를 위해 요소가 다른 요소로 희미해지도록 만드는 데 사용될 수 있습니다.

요소의 불투명도를 조정하기 위해 syntax는 다음과 같다.

.overlay {
  opacity: 0.5;
}

위의 예에서 .overlay 요소는 50% 볼 수 있으므로 뒤에 위치한 모든 요소가 표시된다.

Background Image

CSS는 요소의 배경을 변경할 수 있다.

이 작업은 CSS property background-image를 통해 수행된다.

syntax는 다음과 같다.

.main-banner {
  background-image: url('https://www.example.com/image.jpg');
}
  1. background-image property은 이미지를 표시하도록 요소의 배경을 설정한다.
  2. background-image에 제공된 값은 URL이다. URL은 이미지에 대한 URL이어야 한다. URL은 프로젝트 내의 파일일 수도 있고 외부 사이트에 대한 링크일 수도 있다. 기존 프로젝트 내의 이미지에 연결하려면 상대 파일 경로(relative file path)를 제공해야한다. 프로젝트에 mountains.jpg라는 이름의 이미지가 있는 이미지 폴더가 있으면 상대 파일 경로는 다음과 같습니다.
    (참고: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
.main-banner {
  background-image: url('images/mountains.jpg');
}

Important

!important는 전체 규칙 대신 특정 declaration에 적용할 수 있다.

구체적인 어떤 스타일보다 우선시 되기 때문에, 거의 사용하지 않으며

!important이 사용되면, 최우선적으로 적용이된다.

p {
  color: blue !important;
}
 
.main p {
  color: red;
}

!important는 p selector의 color attribute에 사용되므로, color attribute을 빨간색으로 설정하는 좀 더 구체적인 .main p selector가 있더라도, 모든 요소들은 파란색으로 표시된다.

 

!important 사용하는 경우는, 한 가지 방법은 여러 스타일시트로 작업할 때이다.

예를 들어, 부트스트랩 CSS 프레임워크를 사용하고 있고 하나의 특정 HTML 요소에 대한 스타일을 재정의하고 싶을 떄, !important 을 사용할 수 있다.

 

 

 

참고

 

Web Development Fundamentals: Learn CSS: Selectors and Visual Rules Cheatsheet | Codecademy

In this course, you will learn how to style individual and groups of elements using various visual CSS rules.

www.codecademy.com

 

 

 

HTML attribute reference - HTML: HyperText Markup Language | MDN

Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.

developer.mozilla.org

 

Attribute selectors - CSS: Cascading Style Sheets | MDN

The CSS attribute selector matches elements based on the presence or value of a given attribute.

developer.mozilla.org

 

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

Join to access discussion forums and premium features of the site.

www.cssfontstack.com

 

Dealing with files - Learn web development | MDN

A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get

developer.mozilla.org

 

CSS: Cascading Style Sheets | MDN

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech

developer.mozilla.org

 

반응형

'IT > CSS' 카테고리의 다른 글

CSS: Display and Positioning  (0) 2021.05.07
CSS: Box Model -2  (0) 2021.05.04
CSS: Box Model -1  (0) 2021.05.04
CSS: Typography  (0) 2021.05.03
CSS: Colors  (0) 2021.05.03

관련글

댓글

티스토리툴바