일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- kernel
- 알고리즘
- 시스템 프로그래밍
- 시스템해킹
- pwncollege
- 드론
- 리눅스
- 워게임
- 리버싱
- 리눅스 커널
- 시스템
- 어셈블리어
- 컴퓨터구조
- Bandit
- 프로그래밍
- 취약점
- write up
- C언어
- css
- 시스템프로그래밍
- 시그널
- pwn.college
- 리눅스커널
- wargame
- px4
- Leviathan
- radare2
- 커널
- C++
- Pwnable.kr
- Today
- Total
Computer Security
#7 폰트텍스트 본문
타이포그래피의 구조
모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다.
•em 폰트의 전체 높이를 의미한다.
•ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미한다.
•Baseline 소문자 x를 기준으로 하단의 라인을 의미한다.
•Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미한다. 서체에 따라 descender의 길이가 다르다. ( g, j, p, q, y )
•Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미한다.( b, d, h, l )
font-family 속성
글꼴을 지정하는 속성입니다.
font-family: family-name | generic-family ( | initial | inherit );
- family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있다.
- 먼저 선언된 순서대로 우선순위가 결정된다.
- 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언한다.
generic-family
- family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해준다.
- font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙이다.
ex)
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;
-가장 먼저 Helvetica를 사용하고, 이를 사용할 수 없을 때 Dotum을 사용하는 방식으로 우선순위에 따라 차례대로 적용 된다.
-만약 "abc 가나다 123" 이라는 글자가 있다면, "abc"와 "123"은 Helvetica로 표현이 되고, "가나다"는 Dotum으로 표현 된다.
-"가나다"가 Dotum으로 표현된 이유는 Helvetica는 한글을 지원하는 폰트가 아니기 때문이다.
ex)를 보면 돋움체를 영문으로 한번, 한글로 한번 선언 했다.
왜 이렇게 선언 했을까?
-한글을 지원하지 않는 디바이스일 경우 해당 한글 폰트를 불러올 수 없으므로 영문명으로도 선언해 주어야한다.
-마지막에는 반드시 generic-family를 선언 해주어야 한다. 그 이유는 선언된 모든 서체를 사용할 수 있다는 보장이 없기 때문이다.
-이때 generic-family를 선언해주면, 시스템 폰트 내에서 사용자가 의도한 스타일과 유사한 서체로 적용되기 때문이다.
-또한, 자식 요소에서 font-family를 재선언하면 부모에 generic-family가 선언되어있어도 다시 선언해주어야 한다.
-Generic-Family에는 대표적인 서체로 serif, sans-serif가 있다.
-serif는 삐침이라는 뜻이고, sans는 프랑스어로 '~이 없이'라는 의미가 있다.
-serif는 글자 획에 삐침이 있는 폰트로 대표적으로 명조체가 있으며, sans-serif는 획에 삐침이 없는 폰트로 대표적으로 돋움체가 있다.
line-height 속성
line-height는 텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어할 때 사용된다.
기본 값 : normal
line-height: normal | number | length | initial | inherit ;
-행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있다.
-줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만,
line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미한다.
< 속성 값 >
normal | 기본값으로 브라우저의 기본 속성을 따릅니다. 폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있습니다. |
number | font-size를 기준으로 설정한 숫자만큼 배율로 적용합니다. |
length | px, em 등 고정 수치로 할당할 수 있습니다. |
% | font-size를 기준으로 설정한 퍼센트만큼 배율로 적용합니다. |
주의할 점은, line-height의 값으로 number를 선언할 때와 %로 선언할 때의 차이다.
-두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100%를 같은 것이라고 오해할 수 있다.
-하지만 두 값은 큰 차이가 있는데, 바로 line-height의 값이 자식 요소로 상속되었을 때의 계산 방식이다.
- number 부모 요소의 숫자 값이 그대로 상속된다.. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가진다.
- % 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속된다.
아래 코드를 예시로 보자면,
body { font-size: 20px; line-height: 2; } /* line-height = 40px; */
body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */
-두 경우 모두 <body>에 똑같이 line-height: 40px이 적용된다.
-하지만 자식 요소로 <p>가 있다고 생각을 하면 얘기가 달라진다.
body { font-size: 20px; line-height: 2; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 20px; */
body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */
p { font-size: 10px; } /* line-height = 40px; */
-이처럼 계산된 값이 아닌 숫자 값을 상속한다는 사실 때문에,
-숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로,
가능하면 단위가 없는 값을 사용하는 것이 좋다.
font-size 속성
글꼴의 크기를 지정하는 속성이다.
기본 값 : medium
font-size: keyword | length | initial | inherit ;
< 속성 값 >
keyword | medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger |
length | px, em 등 고정 수치로 지정한다. |
% | 부모 요소의 font-size 기준의 퍼센트로 지정한다. |
- absolute size (keyword) 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의되어있다.
- relative size (keyword) 부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배다.
- length px, em, rem 등의 단위를 이용하여 고정된 크기를 지정할 수 있다.
- - em : 부모 요소의 font-size에 em 값을 곱한 크기 - rem : 루트의 font-size에 rem 값을 곱한 크기
- percent (%) 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있다.
- viewport units vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있다.
- vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가진다.
font-weight 속성
글꼴의 굵기를 지정하는 속성이다.
기본 값 : normal
font-weight: normal | bold | bolder | lighter | number | initial | inherit ;
< 속성 값 >
normal | 기본 값 (400) |
bold | 굵게 표현(700) |
bolder | 부모 요소 보다 두껍게 표현 |
lighter | 부모 요소 보다 얇게 표현 |
number | 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현) |
-실무에서는 normal과 bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편이다.
-물론 상속 관계에서 바뀌어야 하는 스펙이라면 당연히 유용하게 사용될 수 있지만, 그 외의 경우에는 사용에 있어 신중해야 한다.
-font-weight는 normal, bold와 같은 키워드 외에 숫자로도 그 굵기를 표현할 수 있다.
-100~900까지 100단위로 값을 지정하여 사용할 수 있고 숫자가 커질수록 더욱 굵게 표현된다.
-기본적으로 400은 normal과 같고, 700은 bold와 같다
-그러나 수치를 이용한 font-weight는 폰트 자체에서 지원을 해야 표현할 수 있다.
-폰트에 따라 font-weight를 적용해도 굵기에 변화가 없을 수도 있으며,
-normal과 bold만 지원하는 폰트일 경우에는 100~500까지는 normal로, 600~900까지는 bold로 표현된다.
-폰트가 점차 다양해지면서 굵기 자체를 폰트 family-name으로 가지고 있는 경우도 있다.
-또한, 디바이스별로 조금 다르게 표현될 수도 있다.
-font-weight와 font-family, font-size는 서로 밀접하게 연관되어있다.
font-style 속성
글꼴의 스타일을 지정하는 속성이다.
기본 값 : normal
font-style: normal | italic | oblique | initial | inherit;
< 속성 값 >
normal | font-family 내에 분류된 기본 값 |
italic | italic 스타일로 표현합니다. |
oblique | oblique 스타일로 표현합니다. |
- oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있다.
font-weight oblique <각도>;
-유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용된다.
-수 값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어진다.
그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브라우저에서만 사용 가능하다.
font-variant 속성
글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있다.
기본 값 : normal
font-variant: normal | small-caps | initial | inherit ;
< 속성 값 >
normal | 기본 값 |
small-caps | 소문자를 작은 대문자로 변형합니다. |
font 관련 속성
font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을 한 번에 선언할 수 있는 축약형 속성이다.
기본 값 : 각 속성들의 기본 값
font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;
< 속성 값 >
font-style | font-style 지정, 기본 값은 normal |
font-variant | font-variant 지정, 기본 값은 normal |
font-weight | font-weight 지정, 기본 값은 normal |
font-size/line-height | font-size/line-height 지정, 기본 값은 normal |
font-family | font-family 지정 |
/* style | size | family */
font: oblique 2em "돋움", dotum, sans-serif;
/* style | variant | weight | size/line-height | family */
font: oblique small-caps bold 16px/1.5 '돋움';
/* The font used in system dialogs */
font: message-box;
font: icon;
축약형을 선언할 때는 아래 사항들을 유의해야 한다.
- font-size와 font-family는 반드시 선언해야 하는 필수 속성이다.
- 빠진 속성이 있다면 기본 값으로 지정된다.
- 각 속성의 선언 순서를 지켜야 한다.
@font-face
웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성이다.
기본 값 : 없음
@font-face {
font-properties
}
< 속성 값 >
font-family(필수) | 글꼴의 이름을 지정 |
src(필수) | 다운로드 받을 글꼴의 경로(URL) |
font-style(옵션) | 글꼴의 스타일 지정, 기본 값은 normal |
font-weight(옵션) | 글꼴의 굵기 지정, 기본 값은 normal |
ex)
@font-face {
font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
font-weight: bold; /* 필요에 따라 지정 */
font-style: italic; /* 필요에 따라 지정 */
}
body {
font-family: webNanumGothic;
}
웹폰트는 선언 시 필요에 따라 굵기나 스타일 등을 같이 지정해서 사용할 수 있다.
vertical-align 속성
요소의 수직 정렬을 지정하는 속성이다.
기본 값 : baseline
vertical-align: keyword | length | percent | initial | inherit ;
< 속성 값 >
length | 요소를 지정한 길이만큼 올리거나 내림. 음수 허용 |
% | 요소를 line-height를 기준으로 올리거나 내림. 음수 허용 |
keyword | baseline(기본 값), sub, super, top, text-top, middle, bottom, text-bottom |
vertical-align은 기본 값이 baseline다.
이전에 타이포그래피 구조 강의에서 설명했듯이 baseline은 소문자 x를 기준으로 하단 라인을 의미한다.
- keyword sub : 부모 아래 첨자 기준으로 정렬 super : 부모 위 첨자 기준으로 정렬 text-top : 부모 텍스트의 맨 위(Ascender 제외) text-bottom : 부모의 텍스트의 맨 아래(Descender 제외) middle : 부모의 중앙에 위치 top : 부모의 맨 위 위치 bottom : 부모의 맨 아래 위치
- length px값 사용 시 baseline을 기준으로 이동하며, 음수 값도 사용 가능하다.
- percent ( % ) line-height를 기준으로 내에서 이동하며 음수 값 사용 가능하다.
text-align 속성
텍스트의 정렬을 지정하는 속성이다.
기본 값 : left (Right to Left 언어일 경우는 right)
text-align: left | right | center | justify | initial | inherit ;
-기본 값은 left이지만 경우에 따라 다르다.
-문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고,
-RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 된다.
< 속성 값 >
left | 텍스트를 왼쪽으로 정렬 |
right | 텍스트를 오른쪽으로 정렬 |
center | 텍스트를 중앙으로 정렬 |
justify | 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음) |
text-align과 display의 관계
- text-align은 inline-level에 적용
- text-align은 block-level에 적용할 수 없음
그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까?
-박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하면 된다.
- 가운데 정렬 인라인 요소 : text-align (center) 블럭 요소 : margin (auto)
text-indent 속성
텍스트의 들여쓰기를 지정하는 속성이다.
기본 값 : 0
text-indent: length | initial | inherit;
< 속성 값 >
length | px, em 등 고정 수치로 지정. 음수 허용 |
% | 부모 요소의 width를 기준으로 퍼센트로 지정 |
- length 문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동한다.
- percent ( % ) 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기한다.
text-decoration 속성
텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값이다.
기본 값 : none currentColor solid
text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;
- text-decoration-line 텍스트 꾸밈의 종류를 지정하는 속성이다.
- 기본 값 : none
< 속성 값 >
none | 텍스트 꾸밈을 생성하지 않음 ( 기본값 ) |
underline | 밑줄로 꾸밈을 설정 |
overline | 윗줄로 꾸밈을 설정 |
line-through | 중간을 지나는 줄로 꾸밈을 설정 |
- text-decoration-color
- 텍스트 꾸밈의 색상을 지정하는 속성이다.
- 기본 값 : currentColor
- 색상 값을 사용하여 원하는 색상을 지정할 수 있다.
- text-decoration-style 꾸밈에 사용되는 선의 스타일을 지정하는 속성이다.
- 기본 값 : solid
< 속성 값 >
solid | 한줄 스타일 ( 기본 값 ) |
double | 이중선 스타일 |
dotted | 점선 스타일 |
dashed | 파선 스타일 |
wavy | 물결 스타일 |
white-space 속성
요소 안에 공백을 어떻게 처리할지 지정하는 속성이다.
기본 값 : normal
white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;
< 속성 값 >
normal | 공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 기본 값 |
nowrap | 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음. |
pre | 공백과 개행을 표현하고, 자동 줄바꿈이 일어나지 않음. |
pre-line | 공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생. |
pre-wrap | 개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생. |
letter-spacing 속성
자간을 지정하는 속성이다.
기본 값 : normal
letter-spacing: normal | length | initial | inherit;
< 속성 값 >
normal | 기본 값 |
length | 길이만큼 자간을 지정. 음수 허용 |
word-spacing 속성
단어 사이의 간격을 지정하는 속성이다.
기본 값 : normal
word-spacing: normal|length|initial|inherit;
< 속성 값 >
normal | 기본 값 |
length | 길이만큼 단어 사이의 간격을 지정. 음수 허용 |
word-break 속성
단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성이다.
기본 값 : normal
word-break: normal | break-all | keep-all | initial | inherit;
< 속성 값 >
normal | 기본 값. 중단점은 공백이나 하이픈(-)(CJK는 음절) |
break-all | 중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행 |
keep-all | 중단점은 공백이나 하이픈(-)(CJK는 그 외 기호도 포함) |
word-wrap 속성
요소를 벗어난 단어의 줄바꿈을 지정하는 속성이다.
기본 값 : normal
word-wrap: normal|break-word|initial|inherit;
< 속성 값 >
normal | 기본 값. 중단점에서 개행 |
break-word | 모든 글자가 요소를 벗어나지 않고 강제로 개행 |
'프로그래밍 > HTML & CSS' 카테고리의 다른 글
#9 미디어 쿼리 (0) | 2022.06.05 |
---|---|
#8 레이아웃 (0) | 2022.06.04 |
#6 단위, 배경, 박스모델 (0) | 2022.05.31 |
#5 CSS 이해하기 (가상선택자,구체성,상속,캐스케이딩) (0) | 2022.05.24 |
#4 CSS 이해하기 (선택자) (0) | 2022.05.23 |