1. CSS 문법
CSS( Cascading Style Sheets)는 웹 페이지의 디자인과 스타일을 정의하는 스타일 시트 언어입니다. HTML이 웹 페이지의 구조를 정의하는 데 사용되는 반면, CSS는 웹 페이지의 시각적인 표현을 조절하는 데 사용됩니다.
✔ HTML 문서 <head> 요소 안에 <style>요소를 사용하여 CSS 문법을 적용합니다.
<style> 선택자 {속성명: 속성값; 속성명2: 속성값; ... } </style>
예) p {text-align(->정렬 속성): center; color: blue;} /* 주석문 */
선택자 속성 속성값
2. CSS를 적용하는 방법
(1) 인라인 스타일
- HTML요소 내부에 style 속성을 사용하여 적용하는 방법
<p style = " text-align: center; color: blue; " >안녕하세요!</p>
(2) 내부 스타일
- HTML 문서의 <head>~</head> 사이에 <style> </style> 요소를 사용하여 적용하는 방법
<head>
<style>
p {text-align: center; color: blue;}
</style>
</head>
(3) 외부 스타일
- 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법. 파일 안에는 html 문법은 제외하고 css 언어만 들어가 있어야 한다.
<head>
<link rel = 'stylesheet' href = 'css 파일 경로'>
</head>
✔ rel
현재 문서와 링크된 문서 사이의 연관 관계를 명시
3. 선택자
(1) 전체 선택자
- 스타일을 모든 요소에 적용
- * 기호를 사용해서 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음
* { 속성명1: 속성값; 속성명2: 속성값; ...} * {color: deepskyblue;}
✔ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선한다.
✔ 상속의 개념 짚고 넘어가기
부모 요소의 속성값이 자식 요소에게 전달되는 것.
https://www.w3.org/TR/CSS22/propidx.html
> css 상속 여부를 알아볼 수 있는 사이트. 상속이 되는 속성은 부모 요소에 적용하면 자식까지 모두 영향을 받는다.
<html> 태그를 기준으로 자식은 초록색 상자이고 자손은 자식을 포함한 파랑색 상자이다. 같은 줄에 있는 요소들을 형제라고 한다.(<title> <h2> <p> 형제)
(2) 요소 선택자
- 특정 요소가 쓰인 모든 요소에 스타일을 적용
(3) id 선택자
- 웹 문서안의 특정 부분 스타일을 적용
- # 기호를 사용하여 같은 id 속성을 가진 요소에 스타일을 적용
HTML
<h2 id = 'hello'> 안녕하세요! </h2>
<h2> 반갑습니다!</h2>
<p id='hello'>또 만나요!</p> id는 중복될 수 없다!!
CSS
h2 {font-size: 30px;} /*안녕하세요, 반갑습니다 모두 글자크기 30px 적용*/
h2#hello {font-size: 20px;} /* 안녕하세요 글자크기 20px 적용 */
#hello {color: pink;} /* 안녕하세요 글자색상 pink 적용 */
(4) class 선택자
- 특정 집단의 요소를 한번에 스타일을 적용
- . 기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용
HTML
<h2 class = 'hello'> 안녕하세요! </h2>
<h2> 반갑습니다!</h2>
<p class ='hello'>하이!</p>
<p>또 만났군요!</p>
CSS
h2 {font-size: 20px;} /*안녕하세요, 반갑습니다 모두 글자크기 20px 적용*/
h2.hello {color:deeppink;} /*안녕하세요 글자 색상 deeppink 적용*/
.hello {color: deepskyblue;} /*안녕하세요, 하이 글자 색상 deepskyblue 적용*/
(5) 그룹 선택자
- 여러개의 요소를 나열하고 ,(콤마)로 구분하여 스타일을 적용
h2, p {text-align: center;}
(6) 자식 선택자
- 부모의 요소 하위의 자식 요소의 스타일을 적용
body > p {color: deepskyblue;} ul > a {font-size: 30px;}
(7) 자손 선택자
- 조상 요소 하위의 모든 요소의 스타일을 적용
- 자손은 자식을 포함
body p {color: deepskyblue;} ul a {color: deeppink;}
(8) 인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- !연속된! 동생 요소에 스타일을 적용
h2 + p {color: deepskyblue;} /* h2 뒤에 바로 붙어서 나온 p 요소만 찾아냄! */
(9) 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소에 스타일을 적용
h2 ~ p {color: deeppink;}
(10) 속성 선택자
- HTML 요소에서 src, href, style, type, id, class ... 등 속성을 선택자로 지정해서 스타일을 적용
- [] 대괄호를 이용. 패턴이 너무 많음
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
HTML
<img src= 'apple.png' alt='사과 이미지'>
<img src= 'banana.png' alt='바나나 이미지'>
CSS
[src] {border: 3px solid red;}
[src='apple.png'] {width: 200px; height: 200px;}
(11) 가상 선택자
- 클래스를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 요소를 선택
HTML
CSS
(12) 스타일링 링크
a:link -> 하이퍼링크가 연결되었을 때 선택
a:visited -> 특정 하이퍼링크를 방문한 적이 있을 때 선택
a:hover -> 특정 요소에 마우스를 올렸을 때 선택
a:active -> 특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
✔ CSS의 컬러
- 색상 이름으로 표현
red, yellow, blue, salmon ...
- RGB 색상값으로 표현
rgb(0~255, 0~255, 0~255)
red green blue
rgba(0,0,255,0.5) -> rgba(0~255, 0~255, 0~255, 0~1의 소수)
a= AlPHA(투명도)
- 16진수 색상값으로 표현
#0000FF -> 파랑 = #00F
두자리씩 R G B
'웹 > CSS' 카테고리의 다른 글
CSS 애니메이션/우선순위/변수 (0) | 2023.10.16 |
---|---|
CSS flex (0) | 2023.10.15 |
CSS 디스플레이, 포지션 (0) | 2023.10.15 |
CSS 텍스트/배경 (0) | 2023.10.15 |