취미와 밥줄사이

[CSS] CSS이란 무엇인가? / 문법 / 선택자 본문

카테고리 없음

[CSS] CSS이란 무엇인가? / 문법 / 선택자

취미와 밥줄사이 2021. 11. 16. 17:00

CSS이란 무엇인가?

CSS는 웹 페이지의 스타일을 지정하는 데 사용하는 언어입니다.

  • CSS는 Cascading Style Sheets의 약자입니다.
  • CSS는 HTML 요소가 화면, 종이 또는 기타 미디어에 표시되는 방식을 설명합니다.
  • CSS는 많은 작업을 줄일 수 있습니다. 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.
  • 외부 스타일시트는 CSS 파일에 저장됩니다.

CSS를 사용하는 이유

css는 다양한 장치 및 화면 크기에 대한 디스플레이의 디자인, 레이아웃 및 변형을 포함하여 웹 페이지의 스타일을 정의하는 데 사용됩니다.

# Example
<!DOCTYPE html>
<html>
<style>
body {
	background-color: lightblue;
    }
h1 {
	color: white;
    text-align: center;
    }

p {
	font-family: verdana;
    font-size: 20px;
    {
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS는 큰 문제를 해결했습니다.

  • HTML은 웹 페이지 서식을 지정하기 위한 태그를  포함하도록 의도된 적이 없습니다.
  • HTML은 웹 페이지의 내용을 설명하기위해 만들어졌습니다.
  • <font>와 같은 태그와 새상 속성이 HTML 3.2 사양에 추가되었을 때 웹 개발자에게는 악몽이 시작되었습니다.
  • 모든 단일 페이지에 글꼴과 색상 정보가 추가되는 대형 웹사이트 개발은 길고 비용이 많이 드는 과정이 되었습니다.
  • 이 문제를 해결하기 위해 W3C(World Wide Web Consortium)에서 CSS를 만들었습니다.
  • CSS가 HTML 페이지에서 스타일 서식을 제거했습니다.

 

CSS 문법

CSS 규칙은 selector와 declaration block으로 구성됩니다.

출처: https://www.w3schools.com/css/css_syntax.asp

  • selector는 스타일을 지정할 HTML element를 가리킵니다.
  • declaration block에는 세미콜론으로 구분된 하나 이상의 선언이 있습니다.
  • 각 declaration에는 콜론으로 구분된 CSS의 property name과 value가 포함됩니다.
  • 여러 CSS 선언은 세미콜론으로 구분하고 declaration block은 중괄호로 묶습니다.
# Example
# in this example all <p> elements will be center-aligned, with a red text color;
p {
	color: red;
    text-align: center;
    }
  • p는 CSS의 selector입니다(스타일을 지정하려는 HTML 요소:<p>를 가리킴).
  • color는 property입니다. red는 property의 value입니다.
  • text-align는 property이고 center는 property value입니다.

 

CSS Selectors

CSS selector는 스타일을 지정할 HTML 요소를 선택합니다.

  • CSS selector는 스타일을 지정할려는 HTML element를 찾거나 선택하는 데 사용됩니다.
  • CSS selector를 5가지 범주로 구분할 수 있습니다.
    • Simple selector(name, id, class를 기반으로 element 선택)
    • Combinator selector( 특정 elements 간의 특정 관계를 기반으로 element 선택)
    • Pseudo-class selector(특정 상태를 기반으로 elemetns 선택)
    • Pseudo-elements selectors(elements의 일부를 선택하고 스타일 지정)
    • Attribute selector(속성 또는 속성 값을 기반으로 요소 선택)

CSS element Selector

elements selector는 element name을 기반으로 HTML element를 선택합니다.

# Example
Here, all <p> elements on the page will be center-aligned, with a red text color;

p {
	text-align: center;
    color:red;
    }

 

CSS id Selector

  • id selector는 HTML element의 id 속성을 사용하여 특정 요소를 선택합니다.
  • element의 id는 페이지 내에서 고유하므로 id selector를 사용하여 하나의 고유한 element를 선택합니다.
  • 특정 ID를 가진 element를 선택하려면 해시(#)문자와 element id를 차례로 작성합니다.
# Example
# The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
	text-align: center;
    color:red;
    }
  • 아이디는 숫자로 시작할 수 없습니다.

CSS class Selector

  • class selector는 특정 클래스 속성을 가진 HTML 요소를 선택합니다.
  • 특정 클래스가 있는 요소를 선택하려면 마침표(.) 문자와 class 이름을 차례로 작성합니다.
# Example
# In this example all HTML elements with class="center" will be red and center-aligned:

.center {
	text-align: center;
    color: red;
    }
  • 특정 HTML 요소만 클래스의 영향을 받도록 지정할 수도 있습니다.
# Example
# In this example only <p> elements with class="center" will be red and center-aligned;

p.center {
	text-align: center;
    color: red;
    }
  • HTML elements는 둘 이상의 클래스를 참조할 수도 있습니다.
# Example
# In this example the <p> element will be styled according to class=center and to class="large":

<p class="center large">This paragraph refers to two classes.</p>
  • class는 숫자로 시작할 수 없습니다.

CSS Universal Selector

Universal selector(*)는 페이지의 모든 HTML 요소를 선택합니다.

# Example 
# The CSS rule below will affect every HTML element on the page:
* {
	text-align: center;
    color: blue;
    }

CSS Grouping Selector

  • Grouping Selector는 스타일 정의가 동일한 모든 HTML 요소를 선택합니다.
  • 다음 CSS 코드를 보십시오(h1, h2 및 p요소는 동일한 스타일 정의를 가짐).
h1 {
	text-align: center;
    color: red;
    }
h2 {
	text-align: center;
    color: red'
    }
p {
	text-align: center;
    color: red;
    }
  • 코드를 최소화하려면 selector를 그룹화하는 것이 좋습니다.
  • selector를 그룹화하려면 각 selector를 쉼표로 구분합니다.
# Example
# In this example we have grouped the selectors from the code above:
h1, h2, p {
	text-align: center;
    color: red;
    }
Selector Example Example description
#id #firstname Select the element with id="firstname"
.class .intro Select all elements with class="intro"
element.class p.intro Select only <p> elements with class="intro"
* * Select all elements
element p Select all <p> element
element, element, .. div, p Select all <div> element and all <p> elements

 

 

 

 

 

 

REFERENCE

https://www.w3schools.com/css/css_syntax.asp

 

CSS Syntax

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://www.w3schools.com/css/css_intro.asp

 

CSS Introduction

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://www.w3schools.com/css/css_selectors.asp

 

CSS Selectors

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com