- class 이름은 숫자로 시작할 수 없다.
- class=""에 ""안에 스페이스바로 공간을 주면 두개의 class가 적용된다.
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
- style에 *{내용}을 사용하면 모든 부분들에 적용된다.
css 삽입 방법
- External CSS: link 태그를 사용해 외부에서 가져옴
<link rel="stylesheet" href="mystyle.css">- Internal CSS
- Inline CSS
css 주석
/* This is a single-line comment */
p {
color: red;
}- /* */을 사용해서 주석을 단다.
css tag 기록용
- opacity: 투명도(1에 가까워 질수록 선명해진다)
- background-repeat: 배경 이미지 반복(이 태그가 없으면 이미지는 element를 무조건 모두 채운다)
* value: no-repeat,repeat-x(옆으로),repeat-y(수직으로 반복) - background-attachment: 배경이미지 고정에 대한 속성
- border-width(두께)
p.three {border-style: solid;
border-width: 25px 10px 4px 35px;
--> 25px top, 10px right, 4px bottom and 35px left
}
- border-radius: 꼭짓점 둥근 정도
- padding- width와 height에 padding 값은 포함되지 않는다
padding vs margin
: padding = 외부여백, margin = 내부 여백
border vs outline
: border는 두꺼우면, 두꺼워진 만큼의 자리를 차지해 레이아웃에 영향을 끼친다(또 따로 padding 값을 조절해야함)
: outline은 레이아웃에 전혀 영향을 끼치지 않는다. - white-space: 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성
- display 속성을 알아보자..!
- position 속성 설명
- float 속성
css combinations
- (스페이스바) - 앞의 것에 포함되어 있는 후자태그 혹은 클래스에 css 적용
- 전자의, section을 제외한, 후자인 children에 css 적용
- 전자에 속해 있는 후자 이후에 바로 뒤에 있는 요소에 css 적용
- ~ - 전자에 속해 있는 후자 이후의 모든 요소에 css 적용
Pseudo-class
가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 예를 들어 다음과 같다.
- 마우스가 올라와 있을때
- 링크를 방문했을 때와 아직 방문하지 않았을 때
- 포커스가 들어와 있을 때
p:first-child i {
color: blue;
}
navbar에 대해서 복기해야할 때
초보자가 기록하는 곳