CSS를 자유자재로 못 쓰고 있다라는 생각이 들어서 정리를 해보고자 한다.
MDN에서 공부해서 기억해야 할 것들만 짧게 짧게 정리해둘 것이다.
css 파일 적용법
<link href="styles/style.css" rel="stylesheet" />Selector 종류
-
Element Selector
HTML element 이름
ex) p -
ID Selector
id value는 유일성을 가져야 한다.
#my-id는<p id="my-id">를 select 한다. -
Class Selector
clsss name
동일한 class가 여러 instance를 가질 수 있다
.my-class는<p class="my-class">를 select 한다. -
Attribute Selector
특정 속성
img[src]는<img src="myimage.png">를 selects 한다. -
Pseudo-class Selector
특정 상태의 특정 element
a:hover는<a>를 select 하지만, 오직 마우스 포인터가 a 위에 올라가 있을 때에만 해당된다.
font-family: font를 적용할 때 사용하는 속성
Boxes
css layout은 box model 기반이다.
box는 공간 차지 속성이 있다.
1. padding: content 주위 공간
2. border: padding 밖의 solid line
3. margin: border 밖의 공간
또 사용하는 것들:
1. width
2. background-color: element의 content와 padding의 뒷면
3. color: element의 content 색
4. text-shadow: element 안에 있는 text에 drop shadow 적용
5. display: element display mode 설정
margin: 0 auto;
margin 또는 padding 속성에 2개의 값을 설정할 때,
- 첫 번째 value는 element의 top과 bottom 쪽
- 두 번째 value는 element의 left와 right 쪽이다.
auto는 special value이다. left와 right 사이 공간을 균등하게 나누는 값이다.
margin: top | right | bottom | left
margin: top | left and right | bottom
padding: 0 20px 20px 20px; -> padding에 4개 값 설정 => content 주위에 공간 생기게 하기
border: 5px solid block; -> width, style, color 설정
browser는 h1 element에 기본 styling을 적용한다.
-> style을 내가 overwriting 가능
text-shadow: element의 text content에 shadow 적용
1. horizontal offset of the shadow from the text: how far it moves across
2. vertical offset of the shadow from the text: how far it moves down
3. blur radius: 큰 값 -> 더 흐리게
4. base color of shadow
Centering the image
<body>는 block element이다. -> page에 쌓인다.
block element에 적용되는 margin은 page의 다른 element들에 의해 반영될 것이다.
but. Image는 Inline element이다.
auto margin이 이 image에 작동하려면 display: block;을 써서 block-level behavior을 줘야 한다.
