CSS(Cascading Style Sheets)
HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어
웹페이지의 디자인을 담당
CSS 문법
HTML문서 <head> 태그 안에 <style>~</style>에 CSS 문법을 작성
HTML문서 중 디자인을 적용시킬 태그 안에 style 속성에 작성
선택자 {
속성명 : 속성값;
속성명 : 속성값;
...
}
p {t ext-align:center; color:blue; }
--- ----------------------------
선택자 선언부
p태그를 선택해서 가운데 정렬하고 글자는 파란색으로 설정
CSS를 적용하는 방법
1. 인라인 스타일 :
HTML 요소 내부에 style 속성을 사용해서 적용하는 방법
해당 요소에만 스타일을 적용
<p style="CSS 문법">안녕하세요</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 문법
}
상속 : 부모 요소의 속성값이 자식 요소에게 적용되는 성질
https://www.w3.org/TR/CSS22/propidx.html
3. id 선택자
웹 문서 안의 특정한 부분에 스타일을 적용
# 기호를 사용해서 id 속성을 가진 요소에 스타일을 적용
#아이디명{
CSS 문법
}
4. class 선택자
특정 집단의 요소를 한번에 스타일 적용할 때 사용
. 기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용
. 클래스명{
CSS 문법
}
5. 그룹 선택자
여러개의 요소를 나열하고 ,로 구분해 스타일을 적용
선택자1, 선택자2 {
CSS 문법
}
6. 자손 선택자
조상요소 하위의 모든 요소에 스타일을 적용
자손은 자식을 포함
조상요소선택자 자손요소선택자{
}
p.tx : p 태그들 중에 tx 클래스를 가진 요소 선택
<p class="tx">
p .tx : p 태그들 내부에 tx 클래스를 가진 요소 전부 선택
<p>
<span class="tx></span>
<ul>
<li class="tx"></li>
</ul>
</p>
7. 자식 선택자
부모의 요소 하위의 자식요소에 스타일을 적용
부모선택자 > 자식선택자{
CSS 문법
}
8. 인접 형제 선택자
동일한 부모 요소를 갖는 자식 요소들의 관계
선후 관계는 형-동생의 관계이고, 연속된 요소를 뜻함
- a태그 다음에 연속된 li 태그 선택
형선택자 + 동생선택자{
CSS문법
}
a+li{
CSS 문법
}
9. 일반 형제 선택자
형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 모든 동생 요소를 선택해서
스타일 적용
형선택자~동생선택자{
CSS 문법
}
a~li{
앞에 a태그가 있는 모든 li 태그 선택
}
10. 속성 선택자
HTML 요소에서 src, href, style, type, ...과 같은 속성을 선택자로 지정해서
스타일을 적용
[속성명]{
CSS 문법
}
[src]{
src 속성요소 선택
}
[src='apple.png']{
src 속성이 'apple.png'인 요소들 선택
}
'CSS' 카테고리의 다른 글
[프론트엔드] CSS 6 (0) | 2021.11.17 |
---|---|
[프론트엔드] CSS 5 (0) | 2021.11.17 |
[프론트엔드] CSS 4 (0) | 2021.11.13 |
[프론트엔드] CSS 3 (0) | 2021.11.13 |
[프론트엔드] CSS 2 (0) | 2021.11.07 |