책 씹어먹는 즐거움

CSS의 박스 모델을 알았으니 이제 HTML 요소의 전체 크기를 계산할 수 있다.

아래의 그림을 다시 보자. 

너무 기니까 간단하게 요약하면 다음과 같다. 

역시 너무 기니까 간단하게 요약하면 다음과 같다. 

그럼 실제 요소들의 높이와 너비를 직접 계산해보도록 하자.

문제 1) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

위의 <div> 요소의 너비는 130px, 높이는 80px이다. 계산 형식은 아래와 같다.

문제 2) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

위의 <div> 요소의 너비는 140px, 높이는 120px이다. 계산 형식은 아래와 같다.

문제 3) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

위의 <div> 요소의 너비는 130px, 높이는 90px이다. 계산 형식은 아래와 같다.

문제 4) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자. 

위의 <div> 요소의 너비는 118px, 높이는 77px이다. 계산 형식은 아래와 같다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0056 HTML 요소(element)의 크기 계산하기.apkg

마진(Margin) 영역은 테두리(border) 바깥을 둘러싸고 있는 영역이고 패딩(Padding) 영역은 내용 영역과 테두리 사이에 있는 영역이다(박스모델 참조).

마진(Margin)과 패딩(Padding) 영역은 투명하고 배경을 그대로 노출하므로 오직 두께(width)만 별도로 설정한다.

마진(Margin) 영역의 두께(width)를 설정하는 CSS의 속성은 margin 속성(property)이다. 

패딩(Padding) 영역의 두께(width)를 설정하는 CSS의 속성은 padding 속성(property)이다. 

마진(Margin)과 패딩(Padding) 영역의 두께(width) 설정은 테두리(border)처럼 각 4방향(상하좌우) 별로 설정이 가능하다.

물론, 이렇게 4방향을 전부 작성하는 것이 매우 번거로우므로 보통은 단축 속성(shorthand property)인 margin과 padding 속성(property)으로 축약하여 작성한다.

margin 속성과 padding 속성은 1~4개의 속성값을 가질 수 있으며, border-style과 마찬가지의 방식으로 적용된다. 

margin과 padding 속성(property)에 4개의 속성값이 주어지면 각각의 속성값이 위(top)에서부터 시계방향으로 위, 오른쪽, 아래, 왼쪽으로 차례대로 적용된다.

margin과 padding 속성(property)에 3개의 속성값이 주어지면 각각의 속성값이 위(top), 좌우(left and right), 아래(bottom)로 차례대로 적용된다.

margin과 padding 속성(property)에 2개의 속성값이 주어지면 각각의 속성값이 위아래(top and bottom), 좌우(left and right)로 차례대로 적용된다.

margin과 padding 속성(property)에 1개의 속성값이 주어지면 그 속성값이 상하좌우에 전부 적용된다. 

margin과 padding 속성(property)이 가질 수 있는 속성값은 길이(length) 단위다. 절대 길이와 상대 길이 단위에 대해서는 여기를 참조하기 바란다.

0043 CSS의 길이(length) 중 절대 길이(absolute length)

0044 CSS의 길이(length) 중 상대 길이(relative length)

margin이나 padding의 속성값으로 상대 길이(relative length) 중 %를 쓰게 되면 부모(상위) 요소의 margin이나 padding의 속성값의 상대 길이로 작용된다는 점을 주의하자.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0055 CSS의 마진(Margin)과 패딩(Padding) 영역 설정하기.apkg

CSS의 height와 width 속성(property)으로 HTML 요소의 높이와 너비를 설정할 수 있다. 이 때, height와 width 속성(property)이 설정하는 것은 정확히는 박스 모델에서 내용(content) 영역의 높이와 너비를 결정하는 것이다.

즉, 아래의 그림처럼 박스 모델에서 내용(content) 영역의 크기를 결정한다.

height 속성(property)은 내용(content) 영역의 높이(height)를 설정한다. 

width 속성(property)은 내용(content) 영역의 너비(width)를 설정한다. 

보통, height와 width의 기본값(default)은 auto로 설정되어 있어, height와 width 속성을 설정하지 않으면 브라우저가 자동으로 설정한다. 

다음과 같이 0054.html파일을 작성하여 실행해보자. 

<div> 요소의 내용(content) 영역을 너비(width) 100px, 높이(height) 50px 로 설정하고 배경색(background-color)을 빨간색으로 설정했다.

다시 강조하지만 height와 width 속성(property)이 설정하는 것은 정확히는 박스 모델에서 내용(content) 영역의 높이와 너비다. 따라서 요소의 마진(margin), 패딩(padding), 테두리(border)의 두께와는 전혀 상관없다. 

이미 앞에서 <img /> 요소의 크기를 결정할 때 style 속성으로 height와 width를 다루는 것을 0017강에서 이미 언급했다. 

이를 박스 모델 입장에서 본다면 <img /> 요소에서 이미지가 들어갈 내용(content) 영역의 높이와 너비를 결정한 것이다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0054 CSS 내용(content)영역 설정하기-width와 height.apkg

앞에서, 테두리(border)와 관련하여 테두리 선의 종류(style), 두께(width), 색깔(color)을 제어하는 법을 알아보았다. 테두리 선의 종류(style)는 border-style, 두께(width)는 border-width, 색깔(color)은 border-color 속성(property)으로 각각 설정했다. 그런데 이 모든 속성들은 아래와 같이 테두리의 4방향 별로도 설정이 가능하다.

원래, 이렇게 테두리의 4방향에 따라 각각 속성(property)을 정하는 것이 정석이다. 하지만 그러면 너무 번거로우므로 더 편하게 쓸 수 있도록 축약한 단축 속성(shorthand property)을 만들었는데 그것이 각각 border-style, border-width, border-color 라고 할 수 있다.

이렇게 축약된 단축 속성이 확실히 더 편하다. 

그렇다면 더 편하게 해보자. border-style, border-color, border-width의 속성들을 축약한 단축 속성(shorthand property)은 border 속성(property)이다. 

border의 속성값에는 style, color, width에 해당하는 값들이 오는데 이 중 style을 제외한 color, width 속성값들은 제외해도 된다. color의 경우 해당 요소의 글자색(color)이, width의 경우 medium이 기본값(default)으로 설정되어 있어서 속성값이 주어지지 않으면 이들 기본값(default)이 적용된다. 

다음의 그림을 보자. 

위의 그림에서 ④의 경우처럼 style에 해당하는 속성값 solid가 누락되어 있을 때에는 테두리가 아예 보이지 않는다.

②의 경우처럼 두께(width)에 해당하는 속성값이 누락되어도 여전히 동일하게 medium으로 적용되는 것을 확인할 수 있다. 이는 두께(width)를 별도로 설정하지 않을 경우 기본값(default)이 medium이기 때문이다. 

③에서는 색깔(color)에 해당하는 속성값을 누락시켜 보았다. 글자색과 동일한 파란색으로 테두리의 색깔이 변하는 것을 확인할 수 있다. 이는 색깔(color)을 별도로 설정하지 않을 경우 기본값(default)이 해당 요소의 글자색(color)이기 때문이다. 

예제에 사용된 파일은 0053_border.html 파일을 참조하기 바란다.

border 속성으로 축약할 경우 4개 방향의 테두리를 개별적으로 설정할 수 없다. 만일, 방향별로 테두리를 별도로 설정하고 싶다면 단축 속성인 border를 사용하지 말고 border-top, border-right, border-bottom, border-right로 축약하면 된다. 축약하는 요령은 border와 완전히 동일하다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0053 테두리 각각의 방향에서 설정하기 및 단축 속성.apkg

수정 2019-02-10 오후 3:38  4방향별 단축속성에 대하여 첨가하고 Ankilog에도 추가함

테두리 두께는 border-width 속성(property)으로 제어하고, border-width 속성(property)의 속성값은 키워드(thin, medium, thick)와 길이(px, em 등)가 온다.

테두리 색깔은 border-color 속성(property)으로 제어하고, border-color 속성(property)의 속성값은 색깔명(red, yellow 등), RGB, RGBA, HEX 코드 등이 온다. 

border-width와 border-color 속성(property)은 1개에서 4개까지의 속성값을 가질 수 있는데 테두리 스타일과 동일한 방식으로 작동한다. 

border-width와 border-color 속성(property)에 4개의 속성값이 주어지면 각각의 속성값이 차례대로 위(top)에서부터 시계방향으로 적용된다. 다음의 사례를 보자.

실행하면 아래와 같이 테두리 위쪽(top)은 6px 두께의 검은 실선, 오른쪽(right)은 4px 두께의 녹색 실선, 아래쪽(bottom)은 2px 두께의 파란 실선, 왼쪽(left)은 1px 두께 빨간 실선이 된다. 

border-width와 border-color 속성(property)에 3개의 속성값이 주어지면 각각의 속성값이 차례대로 위(top), 좌우(left and right), 아래(bottom)로 적용된다.  다음의 사례를 보자.

실행하면 아래와 같이 테두리 위쪽(top)은 6px 두께의 녹색 실선, 좌우(left and right)는 1px 두께의 파란 실선, 아래쪽(bottom)은 3px 두께의 빨간 실선이 된다. 

border-width와 border-color 속성(property)에 2개의 속성값이 주어지면 각각의 속성값이 차례대로 위아래(top and bottom), 좌우(left and right)로 적용된다. 다음의 사례를 보자.

실행하면 아래와 같이 테두리 위아래(top and bottom)는 6px 두께의 파란 실선, 좌우(left and right)는 3px 두께의 빨간 실선이 된다. 

border-width와 border-color 속성(property)에 1개의 속성값만 주어지면 그 1개의 속성값이 전체 테두리에 적용된다. 다음의 사례를 보자.

실행하면 아래와 같이 전체 테두리의 선이 3px 두께의 빨간 실선이 된다. 

예제에 사용된 파일은 0052_두께와색깔.html 파일을 참조하기 바란다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0052 CSS 테두리 두께와 색 설정하기.apkg

2019-01-28 PM 11:24  Ankilog 파일 오타 수정

다음은 CSS의 박스 이론에서 제시된 테두리(Border)이다.

이 테두리(Border)를 어떻게 다루어야 하는지 우선 테두리 스타일(border style)부터 살펴보자.

테두리 스타일(border style)이란 테두리를 이루는 선의 종류를 말한다.

CSS에서 테두리의 설정은 테두리 선의 종류를 먼저 정하고 해당 선에 두께, 색, 방향, 모서리를 설정하는 것이기 때문에 테두리 스타일이 가장 먼저 설정되어야할 기본이다. 테두리 스타일이 설정되어 있지 않으면 다른 두께, 색깔, 모서리 등의 설정 효과가 나타나지 않는다.

테두리의 스타일은 CSS에서 border-style 속성으로 제어한다. 그리고 속성값은 solid, double, dotted, dashed, groove, ridge, inset, outset, none, hidden의 10개가 있다.

1) solid(실선)

테두리를 이루는 선이 실선이다.(그림참조)

2) double(겹선)

테두리를 이루는 선이 두 줄로 된 겹선이다.(그림참조)

3) dotted(점선)

테두리를 이루는 선이 점을 일정한 간격으로 배치한 점선이다.(그림참조)

4) dashed(대쉬선)

테두리를 이루는 선이 긴 점선인 대쉬선이다.(그림참조)

5) groove(홈)

테두리 선이 테두리만 페이지 안으로 파인 것처럼 음영처리된 선

ridge와 반대로 위(top)와 왼쪽(left)은 바깥쪽의 선을, 아래(bottom)와 오른쪽(right)은 안쪽의 선을 진하게 그려 그림자가 진 것으로 보여 요소의 테두리만 안으로 파인 홈처럼 보이게 한다.(그림참조)

6) ridge(액자)

테두리 선이 테두리만 페이지 밖으로 돌출된 것처럼 음영처리된 선

groove와 반대로 위(top)와 왼쪽(left)은 안쪽의 선을, 아래(bottom)와 오른쪽(right)은 바깥쪽의 선을 진하게 그려 그림자가 진 것으로 보여 요소의 테두리만 밖으로 돌출되어 나온 액자처럼 보이게 한다.(그림참조)

7) inset(오목)

테두리 선이 테두리 내부의 HTML 요소가 페이지 안으로 오목하게 들어간 것처럼 음영처리된 선

onset과 반대로 위(top)와 왼쪽(left)의 테두리는 진하게 그려 그림자가 진 것으로 보이고, 아래(bottom)와 오른쪽(right)의 테두리는 연하게 그려 밝게 노출된 것으로 보여 HTML 요소 전체가 페이지 안으로 오목하게 들어간 것처럼 보이게 한다.(그림참조)

8) outset(볼록)

테두리 선이 테두리 내부의 HTML 요소가 페이지 밖으로 볼록하게 튀어나온 것처럼 음영처리된 선

inset과 반대로 위(top)와 왼쪽(left)의 테두리는 연하게 그려 빛에 노출된 것으로 보이고, 아래(bottom)와 오른쪽(right)의 테두리는 진하게 그려 그림자가 진 것으로 보여 HTML 요소 전체가 페이지 밖으로 볼록하게 튀어나온 것처럼 보이게 한다.(그림참조)

9) none, hidden

none은 테두리가 없다는 것이고, hidden은 테두리를 숨긴다는 뜻이다. 두 가지 모두 테두리가 나타나지 않는다. 다음과 같이 선언하면 된다.

10) 테두리별로 스타일 설정하기

지금까지는 테두리 스타일을 한 번에 한 가지 스타일만 설정했다. 하지만 테두리는 상하좌우로 4개가 있고 각각에 서로 다른 종류의 선으로 설정할 수 있다. 그 설정법을 알아보자.

border-style 속성(property)에 4개의 속성값이 주어지면 위(top)에서부터 시계방향으로 적용된다.

아래의 선언으로 테두리 위쪽(top)은 solid(실선), double(겹선), 오른쪽(right)은 아래쪽(bottom)은 dashed(대쉬선), 왼쪽(left)는 dotted(점선)으로 설정된다.

실행 결과는 다음과 같다.

border-style 속성(property)에 3개의 속성값이 주어지면 위(top), 좌우(left and right), 아래(bottom)로 각각 적용된다.

아래의 선언으로 테두리 위쪽(top)은 double(겹선), 오른쪽(right)과 왼쪽(left)은 dashed(대쉬선), 아래쪽(bottom)은 dotted(점선)으로 설정된다.

실행 결과는 다음과 같다.

border-style 속성(property)에 2개의 속성값이 주어지면 위아래(top and bottom), 좌우(left and right)로 각각 적용된다.

아래의 선언으로 테두리 위아래(top and bottom)는 double(겹선), 좌우(left and right)는 dashed(대쉬선)으로 설정된다.

실행 결과는 다음과 같다.

지금까지 제시한 사례는 0051_테두리.html 파일에 정리되어 있으므로 참조하기 바란다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0051 CSS 테두리 스타일 설정하기.apkg

2019-01-27 AM 12:09 본문 문구 수정 및 Anki 파일 문구 수정(그림 첨가)

CSS에서는 HTML 요소 하나하나를 네모난 박스(box)로 취급한다. CSS는 HTML 요소가 문단, 제목, 블록 인용구, 리스트, 리스트 항목 등 어떤 요소이든 박스로 다루어지고 <em>과 같은 인라인 요소라고 해도 마찬가지로 박스로 취급한다.

따라서 CSS 박스 모델(box model)이란 HTML 요소가 어떤 모양의 박스(box)인지를 제시하는 모델이다. 그리고 이 박스 모델을 알아야 HTML 요소들의 레이아웃(layout), 크기와 간격 등을 섬세하게 조절할 수 있게 된다.

HTML 요소를 이루고 있는 박스는 마진(margin), 테두리(border), 패딩(padding), 그리고 내용(content)으로 아래의 그림과 같이 구성된다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0050 CSS 박스 모델(box model).apkg

<div>와 <span> 요소는 인접한 HTML 요소와 텍스트들을 묶는 역할을 하는 요소다. 인접한 요소들을 묶어 구분된 영역인 섹션을 만들어낸다는 점이 클래스 속성(class attribute)과 다르다. 

<div> 요소와 <span> 요소는 다른 HTML 요소들을 묶는 역할만 하기 때문에 보통 여러 요소들을 담는 용기(container)로 이해할 수 있다는 점에서 서로 거의 동일하다. 단지, <div> 요소는 블록 요소이고 <span> 요소는 인라인 요소라는 것이 서로 다를 뿐이다.

<div> 요소

<div> 요소는 HTML 문서에서 섹션이나 영역을 정의하는 블록 요소다.

<div> 요소에 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다. 

다음과 같이 0049_div.html 파일을 만들어 <div> 요소를 실제 사용해보자. 

실행해보면 다음과 같이 2개의 섹션으로 나누어진 HTML 문서를 볼 수 있다. 

위의 사례에서 <div> 요소는 <h3>와 <p> 요소를 담고 있으며 아이디(id) 속성으로 구분되어 별도의 CSS를 적용하고 있다. 

<div> 요소에 담겨 있는 <h3>와 <p> 요소는 모두 <div> 요소에 적용된 CSS가 그대로 상속되어 적용되는 것을 확인할 수 있다.

<span> 요소

<span> 요소는 인라인 요소로 다른 인라인 요소나 텍스트들을 묶는 용도로 사용된다.

인라인 요소라는 점을 제외하면 <span> 요소는 <div> 요소와 동일하다. 

다음과 같이 0049_span.html 파일을 만들어 <span> 요소를 실제 사용해보자. 

실행 결과는 다음과 같다. 

위의 사례에서 <span> 요소의 내부에 텍스트와 <strong> 요소, <em> 요소 등이 중첩(nesting)되어도 문제없이 작동하는 것을 확인할 수 있다. 

<span> 요소도 <div> 처럼 아이디(id) 속성을 이용하여 CSS를 적용하고 있는데 <div>와 마찬가지로 아이디(id), 클래스(class) 속성(attribute) 등을 자유롭게 부여할 수 있다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0049 div 요소와 span 요소.apkg

CSS에서는 배경색(background color), 경계선(border), 글자색(text color) 등 많은 부분에 색깔이 들어간다. 따라서 이러한 색깔을 나타내는 몇 가지 방식을 살펴볼 필요가 있다.

CSS에서 색깔을 입력하는 방식은 색깔명(color name), RGB, HEX, HSL, RGBA, HSLA의 6가지를 주로 말한다. 이 중에서 HSL과 HSLA를 제외한 나머지 4가지만 알아보자.

색깔명(color name)

CSS에서는 다음과 같이 색깔명(color name)으로 해당 색깔을 불러올 수 있다. 

색깔명(color name)은 대소문자를 구분하지 않는다.

과거에는 CSS에서는 16가지 색깔명(color name)만 허용되었지만 현재는 대략 140개의 색깔명(color name)을 대부분의 브라우저에서 지원하고 있어 그 사용폭이 늘었다. 

RGB

색깔명(color name)은 이름을 아는 색을 사용할 경우 편하지만 1,600만 가지의 색 중 140개 정도의 색만 사용할 수 있다는 한계가 있다. 따라서 미묘한 색감을 표현하고자 하는 사람이라면 보다 나은 방법을 찾고자 할 것이다. 

RGB는 빛의 삼원색인 Red(빨강), Green(초록), Blue(파랑)의 세 종류의 색을 말한다. 컴퓨터 모니터, TV 등은 모두 이 RGB를 적당히 섞어서 다른 모든 색을 조합한다. 즉, RGB는 모니터가 색깔을 구현하는 원리인 셈이다.

CSS에서 RGB로 색깔을 구현할 때는 다음의 공식을 이용하여 RGB색을 구현한다. 

red, green, blue는 각각 0~255까지의 수를 가질 수 있는 인자(parameter)로 각각, Red, Green, Blue의 3색이 섞이는 정도를 의미한다. 

red, green, blue의 인자는 0~255까지의 수 대신에 0~100%의 비율로 나타낼 수도 있다. 단, rgb 내에서 숫자와 %를 섞어서 쓰지 않는다. 즉, rgb(100%, 50, 20) 같이 섞어서 쓰지 않는다.

RGB를 사용한 예는 다음과 같다. 

RGBA

RGBA는 RGB에서 투명도를 의미하는 알파(A)를 첨가한 것이다. 

함수는 rgb와 거의 유사한 rgba 이고 투명도를 의미하는 α 인자(parameter)가 첨가된 것이다. 다음과 같은 공식을 사용한다. 

red, green, blue는 rgb에서와 동일하고 α는 0.0~1.0까지의 값을 가진다. 0은 투명, 1은 완전 불투명이다. 

HEX 코드는 항상 #으로 시작한다.

HEX 코드는 6개의 자리로 이루어져있는데 처음 두개(rr)는 빨간색, 다음 두개(gg)는 녹색, 마지막 두개(bb)는 파란색을 나타낸다.  

앞에서 RGB에서 red, green, blue는 각각 0~255까지 총 256개의 수로 표현된다. 256개는 2의 8승으로 8비트에 해당하는 숫자이고 이는 16진수 2자리로 나타낼 수 있다. 즉, 다음과 같다.

실제 전환되는 사례는 다음과 같다. 

HEX 코드를 사용한 예는 다음과 같다. 

파일 용량을 미세하게 줄일 수 있어서 실무에서는 RGB보다 HEX 코드를 더 많이 사용한다고 한다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:    0048 CSS로 색깔 넣기.apkg

Font Weight

Font Weight는 글꼴의 굵기를 말한다. font-weight 속성(property)으로 다음과 같이 설정한다.

만일, 기본 설정이 bold이거나 부모로부터 bold를 상속받는 요소라면 해당 요소에 다음과 같은 선언을 다시 적용하여 bold를 제거할 수 있다. 

이론적으로는 bolder와 lighter와 같은 상대적인 굵기 단위를 사용하여 상속받은 굵기를 보다 굵거나 얇게 만들 수 있다. 

혹은, 절대적인 굵기 단위인 100~900 사이의 숫자로 font-weight의 속성값을 설정할 수 있다. 하지만 대부분의 폰트들은 이렇게 다채로운 굵기로 제시되지 않고 브라우저도 잘 지원하지 않아 결국, 실무에서는 normal과 bold만 그 속성값으로 사용한다. 

다음과 같이 작성하여 0047_font_weight.html로 저장하고 실행해보자. 

실행한 결과는 다음과 같다. 폰트 굵기 100~500까지는 normal과 동일하고, 600~900까지는 bold와 동일하게 굵게 나타나기만 하는 것을 확인할 수 있다. 

Font Style

Font Style은 보통 텍스트를 이탤릭으로 처리하기 위하여 font-style 속성(property)을 사용한다.

font-style 속성(property)은 세 가지 속성값을 갖는다.

Font Variant

Font Variant는 font-variant 속성을 이용하여 텍스트를 작은 대문자 글꼴(small-caps font)로 할지 여부를 결정한다. 작은 대문자 글꼴(small-caps font)은 소문자를 전부 원래의 글꼴 크기보다 작은 대문자로 표기하는 글꼴을 말한다. 

작은 대문자 글꼴로 텍스트를 나타내면 다음과 같다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0047 CSS의 Font Weight, Style, Variant.apkg