CSS 01 CSS란? & 선택자

Css란?(Cascading Style Sheets )

Html 문서를 아름답게 꾸며주는 css 언어이며, 계단식 멋을 내다 (종이) 한장 -> 계단식으로 스타일을 정의하는 문서 이다

 

Css는 Html 문서에 스타일을 더해준다.  HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다.

 

Html 문서 + css 문서 => 문서 열기 => 코드 해석

 

문서 자체는 독립적으로 존재할 수 잇지만, 그 목적이 구조화된 html 문서의 스타일을 정의하는데 있으므로 Html 문서가 없는 css 문서는 사실상 의미가 없다.

 

[정의]

 

• HTML : 웹 문서의 콘텐츠를 구성하는 언어 
• CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치)

=> HTML과 함께 사용되지 않는  CSS는 단순 텍스트일 뿐이며, 웹브라우저를 통해 결과물을 확인하기 위해서는 반드시  HTML 문서 작성이 선행되어야 한다.

 

• Css 코드는 선택자, 중괄호 영역, 속성명 속성값 등으로 구성된다.
• Css 코드에도 주석을 사용 할 수 있다. 주석
• Css 코드를 HTML 문서에 적용하기 위해서 인라인 태그 스타일 태그 외부 문서 연결 등의 방식을 사용해야 한다.

 

인라인 스타일

태그 요소에 직접 스타일을 정의해주는 방식

<p stlye="color:blue">blue</p> 스타일태그
<style>태그 를 추가하여 그 안에 css code를 작성하는 것
<style> p{color:red}</style>

 

문서 간의 연결

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

link 걸어서 href : 연결하고 자하는 외부 url을 기술하는 속성

rel : 현재 문서 와 외부 소스의 연관 관계를기술하는 속성

<link>태그는 html 문서 head! 내부 안에다가 사용해야한다!

---

선택자편! [기본선택자와 그룹 선택자]

 

선택자 : 어떤 요소에 스타일을 적용할 것인지에 대한 정보이다.

 

선택자 {속성명 : 속성값;}

 

종류가 많다 기본선택자/그룹/특성/결합/의사클래스/의사 요소

1편에는 기본선택자와 그룹 선택자에 대해 알아보자

 

[기본선택자]

 

* 전체 선택자모든 요소를 선택한다. *(애스터리스크)는 문서 내의 모든 요소(내용)를 의미하는 기호이다.

*{ color :"blue"}

문서 내 모든 요소의 글자색깔을 파란 색으로 지정한다!

 

태그 선택자 p{ color: blue} : 주어진 이름 

주어인 이름을 가진 요소를 선택한다. "유형 선택자" 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.

 [문서 내 모든 p 태그들은 요소의 글자 색을 파란색으로 지정한다]

 

클래스 선택자 class속성값을 가진 요소를 선택한다.

text { color: blue} 문서 내 클래스가 text인 모든 요소의 글자 색을 파란색으로 지정한다.

그룹 선택자 문서 내 모든h1,p, div 태그 요소의 글자 색을 파란색으로 지정한다

h1, p, div { color: blue} 이렇게!

선택자가 겹치는 경우
기본적으론 나중에 작성된 스타일이 적용된다. 선택자가 다르지만 요소가 겹칠경우? 우선순위에 의해 적용될 스타일이 결정된다
id 선택자 > 클래스 선택자 > 태크 선택자 순으로!

<p id="hello"> // <h1 class='text">

---

정리

• 선택자는 어떤 요소에 대한 스타일을 정의할 것인지에 대한 정보이다.
• 기본 선택자로는 전체 선택자 , 태그 클래스 아이디 선택자있음
• 그룹 선택자는 여러개의 선택자를 그룹화 살수 있는 선택자.
• 문서 내 에 동일한 선택자가 존재할 경우, 뒤에 작성된 스타일이 적용된다.
• 서로 다른 선택자가 동일한 요소를 선택한 경우, 우선순위를 고려해야 한다.