HTML - 구조
CSS - 꾸미는 것
으로 간단하게 생각하면 된다.
스타일 시트(style sheet)
스타일은 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 배치방법 등 겉모습을 구성하는 내용들
스타일 시트 : .css의 확장자를 갖으며, 관리하기 쉽도록 한 파일에 모아놓은 것
스타일 형식
선택자 { 스타일속성: 속성값; }
선택자는 스타일 규칙이 적용될 대상이다.
속성값이 여러가지라면 세미콜론(;)으로 구분한다.
주석
/* */ 사이 주석 입력
여러 줄 입력 가능
.html 파일에 스타일을 입력하고자 한다면,
<head> </head> 태그 안에 <style> </style> 스타일 태그를 입력하여 그 안에 작성하면 된다.
.css 확장자로 파일을 따로 생성하여 스타일을 입력하고자 한다면,
<head> </head> 태그 안에 <link rel="stylesheet" href="상대경로"> 를 입력하여 css파일을 하이퍼링크로 넣으면 된다.
css 파일에 기본적으로
* {
margin: 0;
padding: 0;
}이 코드를 넣는 것을 추천한다.
페이지에 있는 모든 요소를 대상으로 스타일을 적용.
중괄호 앞에 특정 태그를 넣는 다면,
html 문서 <body>태그 안에 있는 해당되는 태그의 모든 요소에 중괄호 내용이 적용된다.
주요 선택자는 클래스 선택자와 id선택자가 있다.
class 선택자는 여러 번 반복할 스타일이라면 선택하여 정의해주고, 호출 시 .클래스선택자이름 으로 하면 된다.
id 선택자는 한번만 사용한다면 id로 선택하여 정의해주면 된다. 호출은 #id선택자이름 으로 하면 된다.
중괄호 앞에 여러 선택자를 쉼표(,)로 구분해 나열하여 한 번에 정의 가능.
지금까지 스타일시트에 대한 설명은 모두 캐스캐이딩 스타일시트라는 가정 하에 한 것이다.
위에서 아래로 흐르는 폭포수라는 의미를 지니며,
여러 스타일이 적용될 때, 충돌을 막기 위하여 위에서 아래로 적용되는 방법이다.
1. 우선순위는 중요도와 적용 범위에 따라 우선순위가 결정되며, 위에서 아래로 스타일이 적용된다.
2. 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
우선순위 : 태그스타일 < 클래스 스타일 < id 스타일 < 인라인 스타일
우선순위를 높이고 싶다면 속성값에 !important 추가
CSS3과 CSS 모듈
브라우저 접두사를 자동으로 붙여준다.
-prefix-free.js : 브라우저 벤더 접두사를 자동으로 붙여준다.
<head>시작태그 바로 밑에
<script src="prefixfree.min.js"></script> 삽입
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS #07 : 색상과 배경 (0) | 2022.12.13 |
|---|---|
| HTML & CSS #06 : 텍스트 스타일 (0) | 2022.12.13 |
| HTML & CSS : 산술연산 계산기 만들기 (0) | 2022.12.13 |
| HTML & CSS : 버튼 만들어보기 실습 (0) | 2022.12.13 |
| HTML & CSS #04 : 폼, input태그 (0) | 2022.12.13 |
댓글