[CSS] css상속 + 폰트 속성

Chaewon Yoon (Jamie)·2022년 12월 29일

CSS font 상속

CSS

목록 보기

5/19

CSS 상속

기본적으로 css는 부모 요소에 지정한 속성값을 자식 요소에게도 상속해서 적용합니다.

❗️ 하지만, 모든 속성이 상속되는 것은 아님
css에는 상속 되는 속성이 있고 아닌 속성이 있다.
CSS를 사용하면서, 그때 그때 직접 속성을 적용해보며 눈으로 익히는 것이 가장 좋은 방법

CSS 상속의 우선순위 - Cascading

(다음 글에서 자세히 알아보기)

CSS는 기본적으로 부모 요소의 속성을 상속한다는 점을 배웠고, 속성마다 상속 유무가 다르다는 점도 알아보았습니다. 그렇다면, 여러개의 상속 속성이 겹쳤다고 할 때, 어떤 속성이 우선적으로 적용될까요?

이때는 Cascading이라는 이름의 규칙이 우선순위를 결정합니다.

Font

해당 폰트 파일이 유저의 컴퓨터에 설치되어 있어야 HTML 문서에 적용이 가능

sans-serif: 앞에 있는 모든 폰트 파일을 찾지 못했을 때, 사용자의 컴퓨터에서 sans-serif 계열의 폰트를 적용 (generic family 설정)

Web Font

@font-face 이용
@import 이용 (google font, 눈누 등)

font 속성

font-size
텍스트의 크기를 지정하는 속성입니다.
속성 값에는 px, rem, em 등의 단위를 사용할 수 있습니다.

font-size : 14px;

font-weight
텍스트의 두께를 지정하는 속성입니다. (regular: 400)
100단위의 수치를 직접 입력하거나 regular, bold등의 키워드를 속성 값으로 줄 수 있습니다.

font-weight : 600

text-decoration
텍스트에 장식용 선을 추가합니다.
text-decoration: underline | overline | line-through | none

color
텍스트의 색상을 지정합니다.

/* 헥스코드 입력시(헥스코드는 6자리 입니다.) */
color : #000000

/* rgb색상 이용시 */
color : rgb(0,0,0)

/* 키워드 이용시 */
color: red

line-height

텍스트의 행간을 설정합니다.
letter-spacing

텍스트의 자간을 설정합니다.
기본값: normal (양수: 멀어짐, 음수: 가까워짐)

word-spacing
텍스트의 단어 간 간격을 지정합니다.

text-align
블록요소나 표 안에서 텍스트의 가로 정렬방식을 지정합니다.
text-align: justify(양측 정렬)

vertical-align
인라인 요소나 표 안에서 텍스트의 세로 정렬 방식을 지정합니다.

text-indent
텍스트의 들여쓰기를 설정합니다.

text-inedent: 10% (%도 가능)

text-transform
영문 텍스트의 대소문자를 바꿀 수 있습니다.

word-break

텍스트가 콘텐츠박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정합니다.
overflow-wrap

단어가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 줄바꿈 여부를 설정합니다.

? overflow-wrap vs word-break

→ 언뜻 보기에 두 속성은 비슷한 역할을 하는 것 같습니다. 어떤 차이점이 있을까요?

break-all을 사용하는 word-break의 경에는 모든 단어를 음절 단위로 쪼개게 됩니다. 따라서 예시와 같은 문장의 경우엔 오히려 문단을 읽기가 불편해집니다.

반면에 break-word를 사용하는overflow-wrap같은 경우에는 사용자가 문장을 읽기 편하도록 띄어쓰기 기준으로 줄바꿈을 합니다. 단어가 길어서 content 영역 밖으로 넘칠때에만 단어 중간에 줄바꿈을 하게 됩니다. 따라서 가독성이 좋겠죠?

overflow-wrap:break-word 승!
(때에 맞게 잘 사용하자)