View
2주차 수업으로 CSS를 더욱 깊이있게 학습해 보는 시간을 가졌다.
여백 (margin, padding)
padding : 요소의 내부 공간을 지정
margin : 요소의 외부 공간을 지정
위 이미지의 경우에는 margin-right: 12px; 의 결과라고 할 수 있다.
padding, margin 모두
padding: margin: 과 같이 단축하여 작성할 수 있고,
margin-top, margin-right, margin-bottom, margin-left(padding-top, padding-right, padding-bottom, padding-left)를 각각 지정할 수 있다.
단축속성으로 작성한 경우
- 네 영역을 모두 작성한 경우에는 top, right, bottom, left순으로 적용된다. (예) margin: 10px 20px 30px 10px;
- 한 영역만 작성한 경우 모두 같은 여백으로 적용된다 (예) padding: 20px;
- 두 영역만 작성한 경우 위-아래, 왼쪽-오른쪽이 같은 여백으로 적용된다. (예) padding: 10px 20px;
- 세 영역을 작성한 경우 top, left-right(같은 값), bottom 으로 적용된다. (예) padding: 10px 20px 30px;
border
border또한 단축속성으로 작성 가능하다.
border: 선두께(border-width) 선종류(border-style) 선색상(border-color);
예를 들어, border: 1px solid black;과 같이 작성할 수 있다.
border-width는 일반적으로 px, em, %과 같은 단위로 작성한다.
- border-width도 padding이나 margin처럼 top, right, bottom, left 순으로 적용된다.
(예) border-width: 10px 20px 5px 15px;
border-style 또한 top, right, bottom, left순으로 적용된다.
아래와 같이 각 위치별로 속성 지정도 가능하다.
border-top-width: 두께;
border-top-style: 종류;
border-top-color: 색상;
border-radius
border를 둥글게 만들수 있다. 이름처럼 border-radius속성으로 지정한 크기만큼을 반지름으로 가지는 원이 각 border에 위치한다고 생각하면 쉽다!😀
top, right, bottom, left순으로 각각 다른 border-radius를 지정할 수 있다.
line-height
font-size: 8px;
line-height: 16px;
line-height: 2;
line-height: 200%;
위 세 속성은 모두 같은 결과를 나타내게 된다.
숫자만을 쓰는 경우 해당 요소의 글꼴크기(위에서는 8px)의 배수가 되고, %는 비율로 적용된다. 따라서 16px와 같은 결과가 된다.
font-family
font-family: 글꼴1, "글꼴 이름", ... 글꼴계열
- 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어 주어야 한다. "글꼴 이름"
- 마지막에는 글꼴 계열을 작성한다.
글꼴 계열
- serif: 바탕체 계열
- sans-serif: 고딕체 계열
- monospace: 고정너비 글꼴 계열
- cursive: 필기체 계열
- fantasy: 장식글꼴 계열
background
background-size
- 기본값: auto
- 단위(px, em, rem...)
- cover: 비율을 유지하면서 더 넓은 너비에 맞춘다.
- contain: 비율을 유지하면서 더 짧은 너비에 맞춘다
background-attachment
- 기본값: scroll - 배경 이미지가 요소를 따라 함께 스크롤된다.
- fixed 뷰포트에 고정된다. 스크롤 되지 않는다.
요소의 쌓임 순서
position 속성이 있는 경우에 위에 쌓이게 된다(기본값은 static이고, 이 경우는 제외된다.)
z-index값이 더 큰 것이 위에 쌓인다.
HTML의 순서상 다음에 오는 것일 수록 위에 쌓인다.
position 속성으로 absolute, fixed 지정시 display: block으로 변경된다.