CSS(Cascading Style Sheets)
HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어
웹페이지의 디자인을 담당
CSS 문법
HTML 문서 <head> 태그 안에 <style> ~ </style> 에 CSS 문법을 작성
HTML문서 중 디자인을 적용시킬 태그 안에 style 속성으로 작성
선택자 {
속성명:속성값;
속성명:속성값;
...
}
p { text-align:center; color:blue; }
-- ------------------------------
선택자 선언부
p태그를 선택해서 가운데 정렬하고 글자색은 파란색으로 설정
CSS를 적용하는 방법
1. 인라인 스타일
HTML 요소 내부에 style 속성을 사용해서 적용하는 방법
해당 요소에만 스타일을 적용
<p style="color:blue;">안녕하세요</p>
2. 내부 스타일
HTML 문서의 <head>태그 안에 <style> 태그를 사용해서 적용하는 방법
해당 문서에서만 스타일을 적용
문서에 있는 모든 요소의 스타일을 한번에 관리 가능
<head>
<style>
CSS문법...
</style>
</head>
3. 외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경
<head> 태그 안에 <link> 태그를 사용해서 연결, 적용하는 방법
<link href="CSS파일 경로" rel="stylesheet">
rel 속성은 현재 파일과 링크된 파일 사이의 연관관계를 명시
CSS 선택자
1. 전체 선택자
스타일을 모든 요소에 적용
디테일한 스타일은 전체 선택자와 body에 적용한 스타일보다 우선시 됨
* {
CSS 문법
}
2. 태그 선택자, 요소 선택자
특정 태그가 쓰인 모든 요소에 스타일을 적용
태그이름 {
CSS 문법
}
3. id 선택자
웹 문서 안의 특정한 부분에 스타일을 적용
# 기호를 사용해서 id 속성을 가진 요소에 스타일을 적용
#아이디명{
CSS 문법
}
4. class 선택자
특정 집단의 요소에 한번에 스타일을 적용할 때 사용
. 기호를 사용해서 같은 class 속성값을 가진 요소들에 스타일을 적용
.클래스명{
CSS 문법
}
5. 그룹 선택자
여러개의 요소를 나열하고 ,로 구분해 스타일을 적용
여러 선택자를 동시에 선택해 올 때 사용
선택자1, 선택자2 {
CSS 문법
}
6. 자손 선택자
조상요소 하위의 모든 요소에 스타일을 적용
자손은 자식을 포함
조상요소선택자 자손요소선택자{
CSS문법
}
p.tx : p 태그들 중에 tx 클래스를 가진 요소 선택
p .tx : p 태그 안에 tx 클래스를 가진 요소 전부 선택
7. 자식 선택자
부모의 요소 하위의 자식 요소에만 스타일을 적용
부모선택자 > 자식선택자{
CSS문법
}
8. 인접 형제 선택자
동일한 부모 요소를 갖는 자식 요소들의 관계 - 형제
선 후 관계는 형-동생의 관계이고, 그 때 연속된 요소를
선택해 오는 선택자
형선택자 + 동생선택자{
CSS 문법
}
a + li{
바로 앞에 a태그가 있는 li 태그만 선택
}
9. 일반 형제 선택자
형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 모든 동생 요소를 선택해서 스타일을 적용
형선택자 ~ 동생선택자{
CSS 문법
}
a ~ li{
앞에 a태그가 있는 모든 li 태그 선택
}
10. 속성 선택자
HTML 요소에서 src, href, type, ... 과 같은 속성을 선택자로 지정해서 스타일을 적용
1) 속성을 가지고 있는 요소를 선택
[속성명] {
CSS 문법
}
2) 특정 속성값을 가지고 있는 요소를 선택
[속성명='속성값']{
CSS 문법
}
'Front-end > CSS' 카테고리의 다른 글
| [CSS 06] 벤더 프리픽스(vender prefix), 애니메이션 (0) | 2022.02.19 |
|---|---|
| [CSS 05] 플렉서블 레이아웃, 미디어 쿼리 (0) | 2022.02.19 |
| [CSS 04] Position, 조상요소 (0) | 2022.02.19 |
| [CSS 03] 배경, 박스모델, 디스플레이, 폼 (0) | 2022.02.13 |
| CSS 02 (0) | 2022.01.23 |
