css
- cascading style sheet
- font, animation, table 등 모듈별로 각자의 버저닝을 함
cascading : 폭포수가 흐르듯이 위에서부터 아래에 영향을 준다는 뜻
선택자, 선언 블럭
- 선택자(selector) : 어떤 html 요소를 가리키는지 명시
- 선언 블럭(declation block) : {} 내부에 속성들이 들어감
- 선언(declation) : 속성(property) : 값(value); 형식으로 작성
주석(comments)
- /* */ 형식으로 작성
css 적용 방법
1. embedded
- html - head <style> 태그 사용
<head>
<style>
h1 {
color: red;
}
<title>Css</title>
</head>
<body>
<h1>Hi!</h1>
</body>
2. inline
- style 속성 사용
- 공부할 때는 사용을 지양하기를 추천
<body>
<h1 style="color:red;"Welcome!</h1>
</body>
3. external
- css 파일을 따로 만들어서 <link> 태그 사용
- rel : 현재 html 파일과 외부 파일이 어떤 관계인지 명시
- href : 파일 경로 입력
- 가장 권장하는 방법
<head>
<title>cs</title>
<link rel="stylesheet" href="style/main.css">
</head>
캐스캐이딩 원칙
1. 스타일 우선순위
- 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해짐
- 브라우저에 정의된 스타일(user agent) < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
- 적용 범위가 적을수록 우선시
- tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
- 소스 코드의 순서가 뒤에 있으면 덮어씀
2. 스타일 상속
- 부모 요소에 있는 스타일 속성은 자식 요소로 전달됨
- 자식 요소에서 재정의되면 부모의 스타일을 덮어씀
- 일부 속성들은 상속이 되지 않음(배경 이미지, 배경 색 등)
반응형
'html,css 기초' 카테고리의 다른 글
| html 9 : 전역 속성 class, id, style, title, lang, data, draggable, hidden (0) | 2022.07.11 |
|---|---|
| html 8 : 메타데이터 title, meta, link, MIME, style, script (0) | 2022.07.10 |
| html 7 : 폼 form, action, method, label, fieldset, legend, input 속성 (0) | 2022.07.10 |
| html 6 : 임베디드 image, 이미지 유형, srcset, sizes, video, audio, iframe (0) | 2022.07.07 |
| html 5 : 목록과 표 ol, ul, li, dl, dt, dd, div, table, tr, th, td (0) | 2022.07.05 |
댓글