CSS(Cascading Style Sheets) : 문서의 스타일을 지정함
-선택자(selector){속성:값;} 으로 선택자의 스타일을 지정함
-CSS문서의 위치 : 외부스타일시트, 내부스타일시트, 인라인스타일시트
-외부스타일시트 : 따로 .css 문서를 만들어 html에서 link로 연결하여 사용
-내부스타일시트 : html문서 안에 <style> </style> 태그문 사용
-인라인스타일시트 : html요소 안에 스타일 지정
-하나의 요소에 대하여 스타일을 서로 다르게 지정하고 있을 때 우선순위가 있음
-개별선택자가 --우선순위 (선택자 범위가 좁을수록 우선시됨)
-클래스 선택자가 요소선택자보다 우선시 됨
[CSS3 기능]
-선택자
-박스모델
-배경 및 경계선
-텍스트 효과
-2차원 및 3차원 변환
-애니메이션
-다중컬럼 레이아웃
-사용자 인터페이스
<선택자>
[타입 선택자] : 요소타입사용{;}
-html 요소의 이름 사용 ( h1{속성: 값;} )
[전체 선택자] : * {;}
-페이지 안의 모든요소 선택
-기본적으로 기본적으로 마진이나 패딩을 가지고 있는 요소들이 있기 때문에 없애기 위해 사용
*{magin:0; padding:0;}
[클래스 선택자] : .클래스명{}
-클래스가 부여된 요소 선택
-(html)
<body>
<h1 class="type1">class가 type1인 헤딩입니다.</h1>
</body>
-(css)
<style>
.type1 {
text-align: center;
}
</style>
[아이디 선택자] : #아이디{;}
-특정한 아이디명 요소선택
-(html)
<body>
<h1 id="type2">ID가 type2인 헤딩입니다.</h1>
</body>
-(css)
<style>
#type2 {
text-align: center;
}
</style>
[선택자 그룹] : 요소1, 요소2{;}
-원하는 요소가 여러개일 때 한꺼번에 스타일처리 가능
[자손, 자식 결합자] :
- Body h1 : 바디의 자손 중에서 (포괄적개념) - 상위선택자(띄어쓰기)하위선택자
- Body > h1 : 바디의 자식 중에서 (하위 자식만) - 상위선택자 > 하위선택자
[의사 선택자] : 요소타입:속성{;}
-실제로 존재하지 않지만 원래부터 있던 기능
-a:link { color: blue; } : 링크속성
a:visited { color: green; } : 방문했던 상태속성
a:hover { color: red; } : 커서올려놓으면 색상변경
'Web > Web' 카테고리의 다른 글
| CSS 속성 - 폰트, 텍스트 스타일 (0) | 2022.05.19 |
|---|---|
| HTML5 (3) - form요소, PHP (0) | 2022.05.17 |
| HTML5 (2) (0) | 2022.05.11 |
| HTML5 (1) (0) | 2022.05.10 |
| Web기초 (0) | 2022.05.10 |
