728x90
728x90
CSS (Cascading Style Sheet)
<head>
<style>
/* body 코드에 대해 스타일 적용 */
선택자 {
스타일속성1 : 속성값1;
스타일속성2 : 속성값2;
...
}
</style>
</head>
<body>
...
</body>
- 브라우저에게 웹 사이트가 어떻게 보여져야 하는지 알려주는 언어
- Style sheet : 스타일을 관리하기 쉽도록 한 군데에 모아놓은 것
- HTML에 종속적임 (독립적으로 쓰일 수 없음)
- 선택자 : 스타일 규칙이 적용될 대상
- 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 상속함
스타일의 우선순위
- 인라인 스타일 → id 스타일 → class 스타일 → 태그 스타일
- 우선순위가 같다면 나중에 입력된 스타일이 앞 스타일을 덮어씀
# 중요 스타일 !important
- 우선순위가 동일한 스타일이 있을 때, 중요 스타일로 지정된 것이 가장 우선적으로 실행됨
<style>
선택자 { 스타일속성 : 속성값 !important; }
</style>
내부 스타일 시트
<head>
<style>
선택자 { 스타일속성 : 속성값; }
</style>
</head># 인라인 스타일
- 스타일 시트를 사용하지 않고 <body> 부분에 스타일을 적용할 대상에 직접 표시
<태그 style = "스타일속성 : 속성값;">
외부 스타일 시트
- 여러 웹 문서에서 사용할 스타일을 별도 css 파일로 저장해 두고, 필요할 때마다 가져와서 사용함
/* CSS 파일 */
선택자 {
스타일속성 : 속성값;
}
/* HTML 파일 */
<head>
<link rel = "stylesheet" href = "경로/파일명.css">
</head>
기타 메모
- 테스트용 텍스트 생성 : lorem 입력 and [Ctrl] + [Space]
320x100
반응형
'HTML & CSS' 카테고리의 다른 글
| [CSS] 가상 선택자 : 가상 클래스와 가상 요소 (0) | 2023.02.05 |
|---|---|
| [CSS] 선택자 (0) | 2023.02.05 |
| [HTML] 폼 태그 (0) | 2023.02.05 |
| [HTML] 멀티미디어 태그 (0) | 2023.02.05 |
| [HTML] 이미지 태그 (0) | 2023.02.05 |
댓글