TIL
CSS 상속
상속(Inheritance)
CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있다.
앞에 본 section의 color 속성은 자식인 h1, h2, p에게 상속이 된다.
하지만, width, height, margin, padding, border와 같은 것은 상속되지 않는다.
<section>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</section>section {
color: red;
border: 5px solid pink;
}에서 inherit 속성을 사용하여 부모와 동일하게 상속 받게하여 속성값을 같게 할 수 있다.
section {
color: red;
border: 5px solid pink;
}
h1 { border: inherit; }와 같이 예시를 들 수 있다.
단위
px
디바이스 화면에서 이미지를 표현하는 가장 작은 단위
px 단위만 사용하면 안되나요?
다양한 디바이스 생겨나며 픽셀 밀도도 다양해졌다.
따라서, 다양한 단위들을 사용하기도 한다.
%
부모 요소를 기준으로 하는 백분율 단위이다.
vw, vh
뷰포트(화면) 넓이(w), 높이(h)를 기준으로 하는 백분율 단위이다.
1vw = 화면의 1%
vmin, vmax
화면의 넓이와 높이 중 작은 값(min), 큰 값(max)을 기준으로 하는 백분율 단위이다.
vmin, vmax
화면의 넓이와 높이 중 작은 값(min), 큰 값(max)을 기준으로 하는 백분율 단위이다.
em
부모요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위이다.
텍스트 꾸미기
color 색상
폰트의 색상을 나타낸다.
키워드(red, blue), 16진수 표기법, rgb(), rgba()등 다양한 방법으로 표기할 수 있다.
<div>
<p>안녕하세요</p>
</div>div {color: sandybrown;}
p {
border: 1px solid currentColor;
}부모에 color 값이 있다면 상속으로 처리된다.
font-family 글꼴 종류
p {
font-family: 'Pretendard-Regular', Verdana, sans-serif;
}폰트 적용 방법
- link로 삽입
<!-- 사용예시1 : href 참고 -->
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
<style>
body {font-family: 'Noto Sans KR', sans-serif;}
</style>
</head>- import로 삽입
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap");
body {
font-family: "Noto Sans KR", sans-serif;
}font-size 글꼴 크기
- px : 절대 단위
- em : 현재 요소의 부모 요소에 설정된 글꼴 크기 상대 단위
- rem : 루트요소(html)에 설정된 글꼴 크기 상대 단위
왜 em, rem 같은 단위를 쓰는 건가요?
em, rem 단위는 반응형 웹페이지 개발, 유지보수 등에 용이하다!
font-weight
텍스트 굵기 설정
- normal : 기본
- bold : 굵게
- lighter : 현재 요소의 굵기를 부모 요소 굵기 보다 한 단계 가볍게
- border : 현재 요소의 굵기를 부모 요소 굵기 보다 한 단계 두껍게
text-transform
- uppercase : 모든 텍스트를 대문자로
- lowercase : 모든 텍스트를 소문자로
- capitalize : 모든 단어의 첫글자를 대문자로
p::first-letter {
text-transform: uppercase;
}text-decoration (단축 속성)
color, line, style, thickness 순서
- underline : 밑줄
- overline : 윗줄
- line-through : 취소선
style : solid, wavy, dashed
.dashed {
text-decoration: lime underline overline dashed auto;
}
.wavy {
text-decoration-color: royalblue;
text-decoration-line: line-through underline overline;
text-decoration-style: wavy;
text-decoration-thickness:5px;
}text-shadow
텍스트에 그림자를 추가한다.
offset-x, offset-y, blur-radius, color
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;text-align
- left : 왼쪽 정렬
- right : 오른쪽 정렬
- center : 중앙 정렬
- justify : 양쪽 정렬
vertical-align
텍스트의 세로 정렬을 설정한다.
인라인, 인라인 블록 및 테이블 셀 요소에만 적용된다
블록 레벨에서 수직 정렬을 하고 싶으면 flex를 사용하자!
.block {
display:flex;
align-items: center;
}line-height
행간을 설정하며, 단위나 배수 및 % 등의 값으로 설정한다.
letter-spacing
자간을 설정한다.
word-spacing
단어와 단어 사이의 간격을 설정한다.
word-break
텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 경우, 줄바꿈 여부를 지정한다.
- normal : 기본 줄 바꿈 규칙을 사용한다.
- break-all : 글 넘침을 방지하기 위해서 어떠한 두 문자 사이에서도 줄바꿈이 발생할 수 있다.
font (단축 속성)
font : font-style, font-variant, font-weight, font-stretch, font-size / line-height, font-family
p {
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
}