>CSS(Cascading Style Sheets)
-HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어
>CSS 의 기본 문법
- HTML 문서 <head> 태그 안에 <style>~ </style> 에 CSS문법을 작성
선택자 {
속성명: 속성값;
속성명: 속성값;
}
* { } 영역을 선언부 라고 한다.
- HTML 문서의 각 태그 안에 style 속성 안에 CSS문법을 작성
style= "속성명: 속성값;, 속성명: 속성값;..."
>CSS의 주석
/* 사이에 주석내용을 입력 */
>>CSS를 적용하는 방법
1. 인라인 스타일
HTML 요소 내부에 style 속성을 사용하여 적용하는 방법
그 style 속성이 적혀있는 요소에만 스타일을 적용
2. 내부 스타일
HTML 문서에 <head> 요소 안에 <style> 태그를 사용하여
적용하는 방법
해당 문서에만 스타일을 적용
2. 외부 스타일
- 외부에 .css 파일을 만들고 그 안에 공통된 디자인들을 지정해준 후 그 스타일을 적용시킬 곳에서 <link> 태그를
사용하여 연결한다.
* 파일을 따로 분리하기 때문에 분업이 가능해짐
-----------------------------------------------------------------------------------------------------------------------------------
>CSS 선택자
- 작성해주는 스타일을 어디에 적용시킬 것인지 작성해주는 것
1. 전체 선택자
모든 요소를 선택하는 방법, 스타일을 모든 요소에 적용
디테일한 스타일은 전체 선택자와 body에 적용한 스타일보다 우선시 됨
* {
스타일 적용
}
2. 요소 선택자
특정 요소(태그)가 쓰인 모든 곳에 스타일을 적용
태그명{
스타일 적용
}
*** 상속:부모 요소의 속성값이 자식 요소에게 적용되는 성질
https://www.w3.org/TR/CSS22/propidx.html
-->속성값의 상속가능유무를 알려주는 사이트
Full property table
'cursor' [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit auto yes visual, interactive
www.w3.org
3. id 선택자
웹 문서안의 특정 부분에 스타일을 적용
HTML의 id 속성값을 선택해 오는 방법
#기호를 이용해서 id속성을 가진 요소에 스타일을 적용
#아이디명{
스타일 적용
}
4. class 선택자
- 특정 집단의 요소들을 한번에 스타일을 적용
- HTML 의 class 속성값으로 선택해 오는 방법
--> .기호를 이용해서 class 속성을 가진 요소에 스타일을 적용
.클래스명{
스타일 적용
}
5. 그룹 선택자
- 여러개의 선택자를 나열하고 ,로 구분해 스타일을 적용
선택자1, 선택자2,..{
스타일 적용
}
6. 자손 선택자
- 조상요소 하위에 있는 모든 요소에 스타일을 적용
- 자손은 자식을 포함
조상 자손{
}
<ul>
<li></li> //자식
<li>
<ol>
<li></li> //자손
<li></li>
</ol>
</li>
</ul>
7. 자식 선택자
- 부모 요소 하위의 자식 요소에 스타일을 적용
부모>자식{
스타일 적용
}
8. 인접 형제 선택자
- 동일한 부모 요소를 갖는 자식 요소들의 관계를 형제관계라고 한다.
- 선 후 관계가 형-동생의 관계이고 형-동생관계에 요소를 선택해 스타일을 적용
형+동생{
스타일을 적용
}
9. 일반 형제 선택자
- 형제 관계를 가지는 요소 중에서 형 요소 다음에 나오는 모든 동생 요소에 스타일을 적용
형~동생{
스타일 적용
}
10. 속성 선택자
- HTML요소의 여러 속성들(src, href,type,class,...)을 이용해서 선택자로 사용하고 스타일을 적용
[속성명]{
스타일 적용
}
'프로그래밍 > CSS' 카테고리의 다른 글
| CSS 6일차 - 상대크기,CSS 2D,Animation (0) | 2021.12.27 |
|---|---|
| CSS 5일차 - Flex, 미디어 쿼리 (0) | 2021.12.24 |
| CSS 4일차 - CSS Display, Form, Postion (0) | 2021.12.23 |
| CSS 3일차 - 배경 (0) | 2021.12.23 |
| CSS 2일차-선택자, 텍스트 (0) | 2021.12.22 |