CSS : Cascading Style Sheets
CSS 란?
- CSS ( Cascading Style Sheets ) 프로그래밍 언어나 마크업(Mark-up) 언어가 아닌 스타일시트(Style Sheet) 언어이며, 스타일시트 언어는 HTML 문서에 있는 요소들을 선택적으로 스타일링할 때 사용하는 언어이다.
최신 버전은 CSS3이며, 과거엔 CSS1, CSS2, CSS3등 버전을 업데이트할 때마다 추가되는 기능이 있었으나, CSS3이후에는 CSS범위가 엄청나게 넓어짐으로써 여러 CSS모듈 사이의 차이도 너무나 커졌다. 그래서 W3C는 CSS의 버전을 올리지 않는 대신 주기적으로 CSS의 업데이트 현황을 생성하고 있다. (현재 최신 버전은 CSS3이며, 그 이상 버전이 올라가지 않을 예정이다.)
사용하는 방법
전체 구조는 rule set 이라고 불린다. (줄여서 rule)
선택자 (Selector)
: rule set의 맨 앞에 있는 html 요소의 이름이며 꾸밀 요소(들)을 선택한다.
만약 다른 요소를 꾸미길 원한다면 선택자만 바꾸어서 사용하면 된다.
속성 (property)
: html 요소의 어떤것을 꾸밀것인지 선택한다. (예시는 p요소의 색상(color)를 바꾸려고 한다.)
CSS에서 rule 내에서 영향을 줄 속성을 선택한다.
속성 값 (property value)
: 속성(color)의 오른쪽에 콜론( : ) 뒤에 값을 지정해 준다 (예시에서 속성값은 red를 줬다.)
주의사항
- 각각의 rule set(선택자 selector 로 구분한다.)은 반드시 {} 로 감싸져야한다.
- 각각의 선언안에서 속성에 속성값을 줄때 꼭 콜론( : )을 사용해야한다.
- 한 rule set 안에 여러속성을 줄때 구분을 위해 세미콜론( ; ) 을 사용해야한다.
p {
color: red;
width: 500px;
border: 1px solid black;
}선택자 :p
속성 : color, width, border
속성값 : red, 500px, 1px solid black
아이디(id)와 클래스(class)를 선택하는 방법
#id {
color:hotpink;
font-size:50px
}
#html요소 이름 {
CSS 속성과 속성값
}
.class {
color:skyblue;
font-size:30px
}
.html요소 이름 {
CSS 속성과 속성값
}id를 선택할땐 #으로 class 는 .으로 을 적은후 html요소(태그)이름을 넣으면 선택이 된다.
CSS는 단독으로 사용할수없고 꼭 html과 연결해서 사용해야한다.
연결하여 적용하는 법은 두 가지이다.
1. <head> </head> 사이에 연결 링크를 통해 연결하여 CSS를 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="/style.css" />
<title>Document</title>
</head>
<body>
안녕하세요
<p>레슈입니다.</p>
</body>
</html> p {
color: #ff0000;
}
/*
CSS파일을 해당과 같이 작성하면 <p>로 묶인 부분은 #ff0000 (red) 색상으로 나온다
*/<link rel="관계" href="CSS의 경로"/>
- CSS는 stylesheet이기 때문에 rel에 무조건 stylesheet를 적어주어야 하며, href엔 현재 html을 기준으로 CSS가 있는 경로를 기재해주면 된다.
- html와 CSS를 분리하여 작성하는 것을 권장한다.
- html과 CSS를 한파일에 쓸 경우 수정하기 번거로워질 뿐만 아니라 원치 않은 버그를 만나게 될 수 있다.
- 예시와 같이 요소를 선택하여 바로 적용해도 되고 Class/id를 이용해 원하는 부분만 스타일링을 주어도 된다.
2. <head></head> 사이에 <style>를 넣어 CSS를 직접 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
p {
color: #ff0000;
}
</style>
<title>Document</title>
</head>
<body>
안녕하세요
<p>레슈입니다.</p>
</body>
</html>
정리
- 웹 문서의 전반적인 스타일을 미리 지정해준 스타일 시트를 말한다.
- 마크업(Mark-up)언어로 작성된 문서(html)을 웹사이트에 어덯게 표현할것인지 표현될 방법을 지정(CSS)하는것이라고 할수있다.
- 현재 CSS3 가 가장 최신버전이다.
https://www.w3.org/Style/CSS/#specs
Cascading Style Sheets
Software Nearly all browsers nowadays support CSS and many other applications do, too. To write CSS, you don't need more than a text editor, but there are many tools available that make it even easier. Of course, all software has bugs, even after several
www.w3.org
2022.04.07 - [TIL/HTML] - HTML : Hypertext Markup Language
HTML : Hypertext Markup Language
HTML : Hyper Text Markup Language 웹을 이루는 가장 기초적인 구성 요소이며 웹문서의 기본적인 골격을 담당한다. HTML은 Hyper Text Makrop Language의 줄임말인데 하이퍼텍스트(Hyper Text)란 참조(하이퍼..
sol-reshur.tistory.com
'STUDY > CSS' 카테고리의 다른 글
| CSS : display & border (0) | 2022.07.20 |
|---|---|
| CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color) (0) | 2022.07.19 |
| CSS : 하나씩 겹쳐지는 사진 효과 (Overlapping Gallery) (0) | 2022.05.24 |
| CSS : 버튼을 꾸미는 Border-Style CSS (0) | 2022.05.09 |
| CSS : ::selection - 드래그 시 색상이 변경되는 태그 (0) | 2022.05.09 |