CSS(Cascading Style Sheets)
웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어
CSS 문법
HTML 문서 <head> 요소 안에 <style> 요소를 사용하여 css 문법을 적용
선택자 { 속성명: 속성값; }
선택자 { 속성명1: 속성값1; 속성명2: 속성값2; ...}
예시
p {text-align:center;color:blue;}
p { text-align: center; color: blue; }
----- ------- ------
선택자 속성 속성값
주석문
/* 작성할 문구 */ 사이에 내용을 입력
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. 외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법
<head>
<link rel='stylesheet' href='css 파일 경로'>
</head>
✓ rel
현재 문서와 링크된 문서 사이의 연관관계를 명시
선택자
1. 전체 선택자
- 스타일을 모든 요소에 적용
- * 기호를 사용해서 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음
* { 속성명1: 속성값; 속성명2: 속성값; ...}
✓ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선!
2. 요소 선택자
- 특정 요소가 쓰인 모든 요소의 스타일을 적용
✓ 상속
부모 요소의 속성값이 자식 요소에게 전달되는 것
자세한것을 해당 사이트를 참고할 것
https://www.w3.org/TR/CSS22/propidx.html
3. id 선택자
- 웹 문서안에 특정 부분 스타일을 적용
- # 기호를 사용하여 id 속성을 가진 요소에 스타일을 적용
HTML
<h2 id='hello'>안녕하세요!</h2>
<h2>반갑습니다!</h2>
CSS
h2 {font-size: 30px; } /* 안녕하세요, 반갑습니다 모두 글자크기 30px 적용 */
h2#hello { font-size: 20px; } /* 안녕하세요만 글자크기 20px 적용 */
#hello { color: 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;} /* 안녕하세요 글자색상 적용 */
.hello {color: deepskyblue} /* 안녕하세요, 하이 글자색상 적용 */
5. 그룹 선택자
여러개의 요소를 나열하고 ,(콤마)로 구분하여 스타일을 적용
h2, p { text-align: center; }
✓ HTML구조 확인하기
<html>
<head>
<title>테스트</title>
</head>
<body>
<h2>HTML의 구조</h2>
<p>HTML의 <b>구조</b>입니다!</p>
</body>
</html>
<html>
<head> <body>
<title> <h2> <p>
테스트 HTML의 구조 HTML의 <b> 입니다!
▶위와 같이 이러한 형태의 구조로 되어있습니다.
6. 자식 선택자
- 부모의 요소 하위의 자식요소의 스타일을 적용
body > p {color: deepskyblue}
7. 자손 선택자
- 조상요소 하위의 모든 요소의 스타일을 적용
- 자손은 자식을 포함
body p {color: deepskyblue}
8. 인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- 연속된 동생 요소의 스타일을 적용
h2 + p {color: deepskyblue}
9. 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
h2 ~ p {color: deeppink}
10. 속성 선택자
- HTML 요소에서 src, href, style, id, type, class .. 등 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 너무 많음
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
<ul>
<li>김사과</li>
<li>반하나</li>
<li>오렌지</li>
<li>이메론</li>
</ul>
CSS
li:first-child
li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용
ex) ul > li:first-child {color: deepskyblue}
li:nth-child(n)
li 요소 중에서 n번째 요소의 스타일을 적용
li:nth-child(even)
li 요소 중에서 짝수번째 요소의 스타일을 적용
li:nth-child(odd)
li 요소 중에서 홀수번째 요소의 스타일을 적용
li:last-child
li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용
12. 스타일링 링크
a:link -> 하이퍼링크가 연결되었을 때 선택
a:visited -> 특정 하이퍼링크를 방문한적이 있을 때 선택
a:hover -> 특정 요소에 마우스를 올렸을 때 선택
a:active -> 특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
CSS의 컬러
1. 색상 이름으로 표현
red, yellow, blue, salmon, ...
2. RGB 색상값으로 표현
rgb(0, 0, 255) -> rgb(0~255, 0~255, 0~255)
red green blue
rgba(0, 0, 255, 0.5) -> rgb(0~255, 0~255, 0~255, 0~1의 소수)
alpha투명도
3. 16진수 색상값을 표현
#0000FF -> 파랑색
00 00 FF -> #00F
R G B
CSS 텍스트
letter-spacing : 텍스트 내에서 글자 사이의 간격을 설정
ex)
안녕하세요. 오늘은 화요일!
안 녕 하 세 요 . 오 늘 은 화 요 일 !
word-spacing : 텍스트 내에서 단어 사이의 간격을 설정
ex)
안녕하세요. 오늘은 화요일!
안녕하세요. 오늘은 화요일!
text-align : 텍스트 수평 방향 정렬을 설정(left, right, center, justify)
