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">
정리
- 선택자는 어떤 요소에 대한 스타일을 정의할 것인지에 대한 정보이다.
- 기본 선택자로는 전체 선택자 , 태그 클래스 아이디 선택자있음
- 그룹 선택자는 여러개의 선택자를 그룹화 살수 있는 선택자.
- 문서 내 에 동일한 선택자가 존재할 경우, 뒤에 작성된 스타일이 적용된다.
- 서로 다른 선택자가 동일한 요소를 선택한 경우, 우선순위를 고려해야 한다.
'Coding 🖐🏻 > html,css' 카테고리의 다른 글
CSS 03 display & block (0) | 2023.11.10 |
---|---|
CSS 02 텍스트 꾸미기 속성 (0) | 2023.11.10 |
html, css 포지션position : relative ,absolute (1) | 2022.10.25 |
html css 텍스트 가운데 정렬 기초 (0) | 2022.10.23 |
CSS 01 em , rem % vw vh (0) | 2022.10.05 |