CSS 란 무엇인가? - Web 개발 학습하기

CSS 란 무엇인가?
===========

* Overview: First steps
* 다음

**CSS** (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동할까요? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 CSS에 대한 몇 가지 주요 용어를 다룹니다.

| 전제조건: | 컴퓨터 기본 활용 능력, 기본 소프트웨어 설치, 파일 작업 에 대한 기본 지식 및 HTML 기본 사항 (HTML 소개 학습) |
| --- | --- |
| **목적:** | CSS가 무엇인지 배우기. |

HTML 소개단원에서는 HTML이 무엇인지, 그리고 문서를 마크 업하는 데 사용되는 방법에 대해 설명했습니다. 이 문서는 웹 브라우저에서 읽을 수 있습니다. 제목은 일반 텍스트보다 크게 보이며, 단락은 줄바꿈이 되고 공백이 있습니다. 링크는 텍스트의 나머지 부분과 구분하기 위해 색상과 밑줄이 표시됩니다. 현재 보고 있는 것은 브라우저의 기본 스타일입니다. 페이지 작성자가 명시적인 스타일을 지정하지 않은 경우에도 기본적으로 읽을 수 있도록 브라우저가 HTML에 적용하는 매우 기본적인 스타일입니다.

![The default styles used by a browser](/ko/docs/Learn/CSS/First_steps/What_is_CSS/html-example.png)

그러나, 모든 웹 사이트가 그렇게 보인다면 웹은 지루한 곳이 될 것입니다. CSS를 사용하면 브라우저에서 HTML 요소의 모양을 정확하게 제어하고 원하는 디자인을 사용하여 마크 업을 표시할 수 있습니다.

브라우저/기본 스타일에 대한 자세한 내용은 다음 비디오를 확인하세요.

CSS 란 무엇입니까?
------------

앞에서 언급했듯이, CSS는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다 — 스타일, 레이아웃 등.

**문서**는 일반적으로 마크 업 언어를 사용하여 구성된 텍스트 파일입니다 — HTML 이 가장 일반적인 마크 업 언어이지만, SVG 또는 XML 과 같은 다른 마크 업 언어를 사용할 수도 있습니다.

사용자에게 문서를 **제공 한다는 것**은 대상이 사용 할 수 있는 형식으로 문서를 변환하는 것을 의미합니다. Browsers, Firefox, Chrome 또는 Edge 는 컴퓨터 화면, 프로젝터 또는 프린터 등의 문서를 시각적으로 표시하도록 설계되었습니다.

**참고:**

 브라우저는 사용자 에이전트 라고도 하며, 기본적으로 컴퓨터 시스템 내부의 개인을 나타내는 컴퓨터 프로그램을 의미합니다.
 브라우저는 CSS에 대해 이야기 할 때, 우리가 생각하는 주요 유형의 사용자 에이전트 이지만, 유일한 사용자 에이전트는 아닙니다.
 HTML 및 CSS 문서를 인쇄할 PDF로 변환하는 것과 같은 사용 가능한 다른 사용자 에이전트가 있습니다.

CSS 는 매우 기본적인 텍스트 문서 스타일링에 사용될 수 있습니다 — 예를 들어, 제목 및 링크의 색상과 크기 변경. 또한, 레이아웃을 만드는 데 사용 할 수 있습니다 — 예를 들어, 단일 텍스트 열을 변환 (en-US) (기본 콘텐츠 영역과 관련 정보에 대한 사이드 바가 있는 레이아웃으로) 하는 등 레이아웃을 만드는 데 사용 할 수 있습니다. 애니메이션 (en-US) 과 같은 효과에도 사용 할 수 있습니다. 구체적인 예는 이 단락의 링크를 살펴보세요.

CSS 구문
------

CSS는 규칙 기반 언어입니다 — 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다.

 예를 들어 페이지의 주요 제목을 큰 빨간색 텍스트로 표시되도록 결정할 수 있습니다.
 다음 코드는 위에서 설명한 스타일을 실행 하는 매우 간단한 CSS 규칙을 보여줍니다:

```css
h1 {
  color: red;
  font-size: 5em;
}
```

* 위의 예시에서 CSS 규칙은 선택자 와 함께 열립니다. 스타일을 지정할 HTML 요소를 선택합니다. 이 경우 level 1 제목 (h1) 을 스타일링합니다.
* 그런 다음 중괄호 `{ }` 가 있습니다.
* 중괄호 안에는 **속성**과 **값** 쌍의 형태를 취하는 하나 이상의 **선언**이 있습니다. 콜론 앞에 속성(위의 예시에서 `color`)을 명시합니다. 그리고 콜론 뒤에 속성의 값(위의 예시에서는 `red`)을 명시합니다.
* 이 예시에는 `color`와 `font-size`라는 두가지 선언이 포함되어 있습니다. 각각의 쌍은 우리가 선택하려는 요소의 속성(이 경우 h1)을 명시합니다. 그리고 해당 속성에 부여할 값을 지정합니다.

CSS 속성은 지정되는 속성에 따라 허용되는 값이 다릅니다. 이 예제에서는 다양한 색상 값 을 사용 할 수 있는 `color` 속성이 있습니다. 또한 `font-size` 속성도 있습니다. 이 속성은 다양한 크기 단위 를 값으로 사용 할 수 있습니다.

CSS 스타일 시트에는 차례로 작성된 여러 규칙이 포함됩니다.

```css
h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}
```

일부 값은 빨리 배운다는 것을 알게 될 것이고, 반면에 다른 값은 여러분이 찾아야 할 것입니다. MDN 의 개별 속성 페이지는 잊었을 때 또는 값으로 사용 할 수 있는 다른 것을 알고자 할 때 속성과 해당 값을 빠르게 찾을 수 있는 방법을 제공합니다.

**참고:**

 MDN CSS 참조 에 나열된 모든 CSS 속성 페이지 (다른 CSS 기능과 함께) 에 대한 링크를 찾을 수 있습니다.
 또는, CSS 기능에 대한 자세한 정보를 찾아야 할 때 마다, 자주 사용하는 검색 엔진에서 "mdn *css-feature-name*" 을 검색하는 데 익숙해야 합니다.
 예를 들어, "mdn color" 및 "mdn font-size" 를 검색해 보십시오!

CSS Modules
-----------

CSS를 사용하여 스타일을 지정할 수 있는 것이 너무 많으므로, 언어는 *module* 로 분류됩니다. MDN 을 탐색할 때 이러한 module 에 대한 참조가 표시되면, 많은 설명서 페이지가 특정 module 을 중심으로 구성되어 있습니다. 예를 들어, 배경 및 테두리 module 에 대한 MDN 참조를 통해 그 용도가 무엇이며, 그 용도에 포함된 다른 속성 및 기타 기능을 확인할 수 있습니다. 또한 기술을 정의하는 *CSS Specification* 에 대한 링크를 찾을 수 있습니다 (아래 참조).

이 단계에서는 CSS가 어떻게 구성되어 있는지에 대해 너무 걱정할 필요가 없지만, 예를 들어 특정 속성이 다른 유사한 것들 중에서 발견될 가능성이 높기 때문에, 동일한 명세서에 있을 수 있다는 것을 알고 있다면 정보를 쉽게 찾을 수 있습니다.

구체적인 예를 들어, 배경 및 테두리 module 로 돌아가 보겠습니다 — 이 module 에서 `background-color` 및 `border-color` 속성을 정의하는 것이 논리적이라고 생각 할 수 있습니다. 당신이 옳을 겁니다.

### CSS Specifications

모든 웹 표준 기술 (HTML, CSS, JavaScript 등.) 은 표준 조직 (W3C, WHATWG, ECMA 또는 Khronos 와 같은) 이 게시한 명세서 (또는 단순히 "명세") 라는 거대한 문서로 정의됩니다. 그리고 해당 기술들이 어떻게 작동하는지 정확하게 정의합니다.

CSS는 다르지 않습니다 — W3C 내에서 CSS Working Group 이라는 곳에서 개발 했습니다. 이 그룹은 브라우저 공급 업체 및 CSS에 관심이 있는 다른 회사의 대표로 구성됩니다. 독립적인 목소리로 행동하는 ***초청된 전문가*** 로 알려진 다른 사람들도 있습니다. 그들은 회원 조직에 연결되어 있지 않습니다.

새로운 CSS 기능은 CSS Working Group 에 의해 개발되거나 지정됩니다. 때로는 특정 브라우저가 일부 기능에 관심이 있기 때문에 웹 디자이너와 개발자가 기능을 요구하고, 때로는 실무 그룹 자체가 요구 사항을 식별했기 때문입니다. CSS는 지속적으로 개발 중이며 새로운 기능을 사용할 수 있습니다. 그러나 CSS의 중요한 점은 모든 사람이 오래된 웹 사이트를 망가뜨릴 수 있는 방식으로 변경하지 않도록 매우 열심히 노력한다는 것입니다. 현재 사용 가능한 제한된 CSS를 사용하여 2000년에 구축된 웹 사이트는 여전히 브라우저에서 사용 할 수 있습니다!

CSS를 처음 접하는 사람들은, CSS 명세가 압도적이라고 생각할 것입니다 — 웹 개발자가 CSS를 이해하기 위해 읽는 것이 아니라 엔지니어가 사용자 에이전트의 기능에 대한 지원을 구현하는 데 사용하기 위한 것입니다. 많은 숙련된 개발자는 MDN 설명서나 기타 자습서를 참조하는 것이 좋습니다. 그러나 사용중인 CSS, 브라우저 지원 (아래 참조) 및 specs 간의 관계를 이해하고 존재한다는 것을 아는 것이 좋습니다.

브라우저 지원
-------

CSS가 지정되면 하나 이상의 브라우저가 이를 구현한 경우에만 웹 페이지를 개발하는 데 유용합니다. 이것은 CSS 파일의 명령을 화면에 출력할 수 있는 것으로 바꾸도록 코드가 작성되었음을 의미합니다. CSS 작동 방식 수업에서 이것에 대해 자세히 살펴보겠습니다. 모든 브라우저가 동시에 기능을 구현하는 것은 드문 일이므로 일반적으로 일부 브라우저에서는 CSS의 일부를 사용할 수 있고, 다른 브라우저에서는 사용할 수 없는 경우가 있습니다. 이러한 이유로, 구현 상태를 확인할 수 있는 것이 유용합니다. MDN 의 각 속성 페이지에서 관심있는 속성의 상태를 볼 수 있으므로 웹 사이트에서 해당 속성을 사용할 수 있는지 알 수 있습니다.

브라우저 지원 상태는 모든 MDN CSS 속성 페이지에 "브라우저 호환성" 이라는 이름을 가진 표에 표시됩니다. 해당 표를 이용해서 속성을 당신의 웹사이트에서 사용할 수 있는지 확인하세요. CSS `font-family` 속성을 위한 브라우저 호환성 (en-US)에서 예시를 확인할 수 있습니다.

요구사항에 따라 브라우저 호환 표를 사용할 수 있습니다. 이것을 이용해 얼마나 이 속성이 다양한 브라우저에서 지원되는지 또는 당신이 사용중인 특정 브라우저와 버전이 이 속성을 지원하는지 또는 사용중인 브라우저와 버전에 대해서 유의해야할 사항이 있는지 확인할 수 있습니다.

다음은 뭐죠
------

CSS가 무엇인지 이해했으니, 이제 CSS 시작하기 로 넘어가서 CSS를 직접 작성할 수 있습니다.

* Overview: First steps
* 다음


새로운 지식을 사용하기 - Web 개발 학습하기

새로운 지식을 사용하기
============

* 이전
* Overview: First steps

지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하여 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 평가는 그 기회를 제공합니다.

|  |  |
| --- | --- |
| 전제조건: |
 이 평가를 시도하기 전에 나머지 CSS 기본 과목을 살펴보고 HTML 기본 사항
 (HTML 소개
 학습) 을 이해해야 합니다.
  |
| 목적: | CSS 를 가지고 놀면서 새로운 지식을 테스트하기 |

시작점
---

아래의 라이브 편집기에서 작업하거나 , 시작점을 다운로드 하여 자신의 편집기에서 작업할 수 있습니다. 이 페이지는 HTML 과 문서 head 의 시작점 CSS 가 포함된 단일 페이지 입니다. 원하는 경우 로컬 컴퓨터에서 예제를 만들 때, 이 CSS 를 별도의 파일로 옮길수 있습니다. 또는 CodePen, jsFiddle 또는 Glitch 와 같은 온라인 도구를 사용하여 작업을 수행하십시오.

**참고:** 문제가 발생하면, 도움을 요청하십시오 — 이 페이지 하단의 평가 또는 추가 도움말 섹션을 참조하십시오.

CSS 를 사용한 작업
------------

다음 라이브 예는 CSS 를 사용하여 스타일이 지정된 전기(biography) 를 보여줍니다. 내가 사용한 CSS 속성은 다음과 같습니다 — 각 속성은 MDN 의 속성 페이지에 연결되어 더 많은 사용 예를 제공합니다.

* `font-family` (en-US)
* `color`
* `border-bottom`
* `font-weight`
* `font-size`
* `text-decoration`

나는 선택자, h1 및 h2 와 같은 스타일 요소를 혼합하여 사용했지만, 작업 제목 및 스타일을 위한 class 를 만들었습니다.

CSS 를 사용하여 내가 사용한 속성 값을 변경하여 이 전기(biography) 의 모양을 변경하십시오.

1. CSS color 키워드인 `hotpink` 를 사용하여 h1 제목을 분홍색으로 만듭니다.
2. CSS color 키워드 `purple` 을 사용하는 10px 점선 `border-bottom` 을 제목으로 지정하십시오.
3. h2 제목을 기울임 꼴로 만듭니다.
4. 연락처 세부 정보에 사용된 `ul` 에 `background-color` 를 `#eeeeee` 및 5px 의 단색 자주색 `border` 으로 만듭니다. `padding` 을 사용하여 콘텐츠를 테두리에서 밀어냅니다.
5. 마우스를 가리키면 `green` 으로 만듭니다.

이 이미지와 비슷한 결과가 나옵니다.

![Screenshot of how the example should look after completing the assessment.](/ko/docs/Learn/CSS/First_steps/Styling_a_biography_page/learn-css-basics-assessment.png)

그런 다음 MDN CSS 참조 에서 이 페이지에 언급되지 않은 일부 속성을 찾아보고 시도해 보십시오!

여기에 오답이 없다는 것을 기억하십시오 — 이 단계의 학습에서는 약간의 즐거움을 가질 수 있습니다.

평가 또는 추가 도움
-----------

작업을 평가하고 싶거나 작업이 정체되어 도움을 요청하려는 경우:

1. 작업을 CodePen, jsFiddle 또는 Glitch 와 같은 온라인 공유 가능 편집기에 입력합니다.
2. MDN 토론 포럼 학습 카데고리 에 평가 및 도움을 요청하는 게시물을 작성 하십시오. 게시물에는 다음이 포함되어야 합니다:
    * "CSS 첫 단계에 대한 평가가 필요했습니다" 와 같은 설명적인 제목입니다.
    * 당신이 이미 시도한 내용 및 당신이 우리가 무엇을 하기를 원하는지에 대한 세부 사항 입니다. 예: 당신이 정체되어 있고 도움이 필요하거나 평가를 원하는지에 대한 세부사항들.
    * 온라인 공유 가능 편집기 (위의 1 단계에서 언급한) 에서 평가하거나 도움이 필요한 예에 대한 링크입니다. 이것은 좋은 습관입니다 — 코드가 보이지 않으면 코딩에 문제가 있는 사람을 돕는 것이 매우 어렵습니다.
    * 실제 작업 또는 평가 페이지에 대한 링크로 도움이 필요한 질문을 찾을 수 있습니다.
다음은 뭐죠?
-------

첫 번째 강의를 완료한 것을 축하합니다. 이제 CSS 에 대해 잘 이해하고 스타일 시트에서 발생하는 많은 부분을 이해할 수 있어야 합니다. 다음 강의인 CSS building blocks 에서는 여러 가지 주요 영역을 자세히 살펴보겠습니다.

* 이전
* Overview: First steps


커뮤니티 대학 홈페이지 레이아웃 구성하기 - Web 개발 학습하기

커뮤니티 대학 홈페이지 레이아웃 구성하기
======================

* 이전
* Overview: Styling text

이 평가에서는 커뮤니티 대학 홈페이지의 텍스트 스타일을 지정하도록 하여 이 모듈에서 다룬 모든 텍스트 스타일링 기법에 대한 이해도를 테스트합니다. 여러분은 그 과정에서 재미를 느낄 수 있습니다.

|  |  |
| --- | --- |
| 필요한 사전 지식: | 이 평가를 진행하기 전에 이 모듈의 모든 문서를 이미 살펴봤어야 합니다. |
| 목표: | CSS 텍스트 스타일링 기법에 대한 이해도를 테스트합니다. |

시작 지점
-----

이 평가를 시작하기 위해서는 다음과 같이 해야 합니다.

* 연습용 HTML 및 CSS 파일과 제공된 외부 링크 아이콘을 가져옵니다.
* 여러분의 로컬 컴퓨터에 복사본을 만듭니다.

또는, JSBin이나 Glitch와 같은 사이트를 사용하여 평가를 수행할 수도 있습니다. 이러한 온라인 편집기 중 하나에 HTML을 붙여 넣고 CSS를 입력한 다음, 이 URL을 사용하여 배경 이미지를 지정할 수 있습니다. 사용 중인 온라인 편집기에 별도의 CSS 패널이 없는 경우, 문서의 head 부분의 `<style>` 요소에 자유롭게 입력할 수 있습니다.

**참고:** 만약 문제가 해결되지 않으면, 이 페이지 하단의 평가 및 추가적인 도움말 섹션을 참조하여 도움을 요청하세요.

프로젝트 개요
-------

가상의 커뮤니티 대학 홈페이지에 대한 가공되지 않은 HTML과 페이지를 3열 레이아웃으로 스타일링하고 다른 기초적인 스타일을 제공하는 CSS를 제공받았습니다. CSS 파일 하단의 주석 아래에 추가한 CSS를 작성하여 작업한 부분을 쉽게 표시할 수 있도록 해야 합니다. 선택자 중 일부가 반복적이더라도 걱정하지 마세요. 이 경우에는 그냥 넘어갈 수 있습니다.

글꼴:

* 우선, 무료로 사용할 수 있는 글꼴 몇 가지를 다운로드하세요. 대학교 홈페이지이기 때문에 글꼴은 상당히 진지하고, 공식적이며, 신뢰할 수 있는 느낌을 줄 수 있도록 선택해야 합니다. 일반 본문 텍스트에는 serif site-wide 글꼴을 사용하고, 제목에는 sans-serif 또는 slab serif 글꼴을 사용하는 것이 좋을 수 있습니다.
* 적절한 서비스를 사용하여 이 두 글꼴에 대한 견고한 `@font-face` 코드를 생성하세요.
* 본문 글꼴은 페이지 전체에 적용하고 제목 글꼴은 제목(heading)에 적용합니다.

일반적인 텍스트 스타일링:

* 페이지의 `font-size`를 사이트 전체에 `10px`로 설정하세요.
* 제목 및 기타 요소 유형에 적절한 상대 단위를 사용하여 정의된 적절한 글꼴 크기를 지정하세요.
* 본문 텍스트에 적절한 `line-height`를 지정하세요.
* 페이지의 최상위 레벨 제목을 중앙에 배치하세요.
* 제목에 `letter-spacing`을 설정하여 너무 눌리지 않고 글자가 숨을 쉴 수 있도록 하세요.
* 본문 텍스트의 `letter-spacing`과 `word-spacing`도 적절하게 조절하세요.
* `<section>`의 각 제목 뒤 첫 번째 단락에 텍스트 들여 쓰기(예: 20px)를 설정하세요.

링크:

* link, visited, focus와 hover 상태에 페이지 위쪽과 아래쪽의 가로 막대 색상과 어울리는 색상을 지정하세요.
* 링크에 기본적으로 밑줄이 그어져 있지만, 마우스를 가리키거나, 초점을 맞추면 밑줄이 사라지도록 설정하세요.
* 페이지의 모든 링크에서 기본 초점 윤곽선을 제거하세요.
* 활성 상태에 눈에 띌 수 있게 다른 스타일을 지정하여 눈에 잘 띄도록 하되, 전체 페이지 디자인에 어울려야 합니다.
* 외부 링크 옆에 외부 링크 아이콘이 삽입되도록 설정하세요.

목록:

* 목록과 목록 항목의 간격이 전체 페이지의 스타일과 잘 어울리는지 확인해야 합니다. 각 목록 항목의 `line-height`는 단락 줄과 같아야 하며, 각 목록의 위쪽과 아래쪽의 간격은 단락 사이의 간격과 같아야 합니다.
* 목록 항목에 페이지 디자인에 적합한 글머리 기호를 부여합니다. 사용자 정의 글머리 기호 이미지를 선택할지 다른 이미지를 선택할지는 여러분이 결정할 수 있습니다.

탐색 메뉴:

* 탐색 메뉴가 페이지와 조화를 이루도록 스타일을 지정하세요.
힌트 및 팁
------

* 이 연습을 위해 HTML을 어떤 식으로든 편집할 필요는 없습니다.
* 탐색 메뉴를 반드시 버튼처럼 만들 필요는 없지만, 페이지 측면에서 우스꽝스러워 보이지 않도록 약간 더 커야 하며, 세로 탐색 메뉴로 만들어야 한다는 점도 기억해야 합니다.
예시
--

다음 스크린샷은 완성된 디자인이 어떤 모습일지 보여주는 예시입니다.

!['커뮤니티 대학 웹사이트 홈페이지' 텍스트 스타일링 평가의 완성된 디자인 스크린샷 입니다. 제목은 '세인트 헉슬리 커뮤니티 대학'입니다. 배너 헤더와 콘텐츠를 구분하는 빨간색 선이 있습니다. 기본 콘텐츠에는 세 개의 열이 있습니다. 가장 넓은 첫 번째 열에는 학생에게 대학의 중요성을 암시하는 몇 개의 단락이 있습니다. 두 번째 열에는 대학에서 제공하는 상위 코스 선택에 대한 링크 목록이 있습니다. 세 번째 열에는 직사각형으로 윤곽이 그려진 버튼 링크가 있는 세로 탐색 모음과 웹사이트의 여러 섹션으로 연결되는 링크가 포함되어 있습니다.](/ko/docs/Learn/CSS/Styling_text/Typesetting_a_homepage/example2.png)

평가 또는 추가적인 도움
-------------

작업에 대한 평가를 받고 싶거나 막혀서 도움을 요청하는 경우 아래와 같이 하세요.

1. CodePen, jsFiddle, 또는 Glitch와 같은 공유 가능한 온라인 편집기에 작업을 입력합니다.
2. MDN 담론 포럼 학습 카테고리에서 평가 및 도움을 요청하는 게시물을 작성합니다. 게시물에는 아래 사항이 포함되어야 합니다.
    * "커뮤니티 대학 홈페이지 레이아웃 구성하기에 대한 평가 요청"과 같은 설명이 포함된 제목을 입력합니다.
    * 이미 시도해 본 부분과, 궁금한 부분에 대한 세부 정보에 대해 포함하세요. 예를 들어, 막히거나 평가를 원하는 부분을 써넣으세요.
    * 평가받거나 도움이 필요한 예제에 대한 온라인 공유 가능 편집기 링크(위 1단계에서 설명한 대로)를 포함하세요. 코드를 볼 수 없다면 코딩 문제가 있는 사람을 도와주기 어렵기 때문에 이 방법을 사용하는 것이 좋습니다.
    * 실제 과제 또는 평가 페이지로 연결되는 링크를 통해 도움을 원하는 문제를 찾을 수 있습니다.
* 이전
* Overview: Styling text


목록 스타일링 - Web 개발 학습하기

목록 스타일링
=======

* 이전
* Overview: Styling text
* 다음

목록 은 대부분 다른 텍스트처럼 작동하지만, 알아야 할 목록과 관련된 몇 가지 CSS 속성과 고려해야 할 모범 사례가 있습니다. 이 기사는 모든 것을 설명합니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본적인 컴퓨터의 이해, HTML 기본 (
 HTML 소개 둘러보기), CSS 기본 (
 CSS 소개 둘러보기),
 CSS 글꼴과 폰트 기본.
  |
| 목적: | 목록 스타일과 관련된 모범 사례 및 속성에 익숙해지기. |

간단한 목록 예제
---------

우선, 간단한 목록 예제를 봅시다. 이 기사 전체에서 우리는 순서가 없는, 순서가 있는, 설명 목록을 살펴볼 것입니다. 모두 유사한 스타일링 기능이 있으며, 일부 유형은 목록 유형과 다릅니다. 스타일이 지정되지 않은 예제는 Github 에서 가능 합니다 (소스 코드 도 확인하십시오.)

목록 예제의 HTML 은 다음과 같습니다.

```html
<h2>장바구니</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ul>
  <li>허머스</li>
  <li>피타</li>
  <li>그린 샐러드</li>
  <li>할루미</li>
</ul>

<h2>레시피 목록</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ol>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

<h2>성분 설명 목록</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<dl>
  <dt>Hummus</dt>
  <dd>
    A thick dip/sauce generally made from chick peas blended with tahini, lemon
    juice, salt, garlic, and other ingredients.
  </dd>
  <dt>Pita</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>
    A semi-hard, unripened, brined cheese with a higher-than-usual melting
    point, usually made from goat/sheep milk.
  </dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>
```

지금 라이브 예제로 이동하여 브라우저 개발자 도구 (en-US)를 사용하여 목록 요소를 조사하면, 몇 가지 스타일 기본값을 알 수 있습니다.:

* `<ul>` 및 `<ol>` 요소의 위쪽 및 아래쪽 `margin`은 `16px`(`1em`)이고 `padding-left`은 `40px`(`2.5em`)입니다.
* 목록 항목(`<li>` 요소)에는 간격에 대한 기본값이 설정되어 있지 않습니다.
* `<dl>` 요소에는 `16px`(`1em`)의 상단 및 하단 `margin`이 있지만 안쪽 여백 세트는 없습니다.
* `<dd>` 요소의 `margin-left`는 `40px`(`2.5em`)입니다.
* 참조용으로 포함된 `<p>` 요소의 상단 및 하단 `margin`은 다른 목록 유형과 마찬가지로 `16px`(`1em`)입니다.
목록 간격 처리
--------

목록 스타일을 지정할 때 스타일을 조정하여 주변 요소(예: 단락 및 이미지, 때로는 수직 리듬이라고도 함)와 동일한 세로 간격을 유지하고 서로 동일한 가로 간격을 유지해야 합니다(Github에서 완성된 스타일 예제를 볼 수 있으며 소스 코드도 찾을 수 있음).

텍스트 스타일 및 간격에 사용되는 CSS는 다음과 같습니다.

```css
/\* General styles \*/

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/\* Description list styles \*/

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}
```

* 첫 번째 규칙은 사이트 전체 글꼴과 기준 글꼴 크기를 10px로 설정합니다. 이는 페이지의 모든 항목에 상속됩니다.
* 두번째 규칙과 세번째 규칙은 제목, 다양한 목록 유형(목록 요소의 자식이 이를 상속함) 및 단락에 대한 상대 글꼴 크기를 설정합니다. 즉, 각 단락과 목록은 동일한 글꼴 크기와 위쪽 및 아래쪽 간격을 가지므로 세로 리듬을 일관되게 유지하는 데 도움이 됩니다.
* 네번째 규칙은 단락과 목록 항목에 동일한 `line-height` (en-US)를 설정하므로 단락과 각 개별 목록 항목은 줄 사이의 간격이 동일합니다. 이것은 또한 수직 리듬을 일관되게 유지하는 데 도움이 됩니다.
* 다섯번째 규칙과 여섯번째 규칙은 설명 목록에 적용됩니다. 단락 및 목록 항목에서와 마찬가지로 설명 목록 용어 및 설명에 동일한 `line-height`를 설정했습니다. 다시 말하지만 일관성이 좋습니다! 또한 설명 용어를 굵은 글꼴로 만들어 시각적으로 더 쉽게 눈에 띕니다.
목록별 스타일
-------

이제 목록에 대한 일반적인 간격 기술을 살펴보았습니다. 이제 몇 가지 목록 관련 속성을 살펴보겠습니다. `<ul>` 또는 `<ol>` 요소에 설정할 수 있는 세 가지 속성으로 시작해야 합니다.

* `list-style-type` (en-US): 목록에 사용할 글머리 기호 유형을 설정합니다. 예를 들어 정렬되지 않은 목록의 경우 사각형 또는 원형 글머리 기호, 순서가 지정된 목록의 경우 숫자, 문자 또는 로마 숫자입니다.
* `list-style-position` (en-US): 글머리 기호가 목록 항목 내부에 표시되는지 아니면 각 항목 시작 전에 목록 항목 외부에 표시되는지 설정합니다.
* `list-style-image` (en-US): 간단한 사각형이나 원이 아닌 글머리 기호에 대한 사용자 지정 이미지를 사용할 수 있습니다.
### 글머리 기호 스타일

위에서 언급했듯이, `list-style-type` (en-US) 속성을 사용하면 글머리 기호에 사용할 글머리 기호 유형을 설정할 수 있습니다. 예시에서는 대문자 로마 숫자를 사용하도록 정렬된 목록을 다음과 같이 설정했습니다.

```css
ol {
  list-style-type: upper-roman;
}
```

이는 다음과 같은 모습을 보여줍니다.

![an ordered list with the bullet points set to appear outside the list item text.](/ko/docs/Learn/CSS/Styling_text/Styling_lists/outer-bullets.png)

`list-style-type` (en-US) 참조 페이지를 확인하면 더 많은 옵션을 찾을 수 있습니다.

### 글머리 기호 위치

`list-style-position` (en-US) 속성은 글머리 기호가 목록 항목 내부에 표시되는지 또는 각 항목 시작 전에 목록 항목 외부에 표시되는지를 설정합니다. 기본값은 `outside`이며, 위에 표시된 것처럼 글머리 기호가 목록 항목 외부에 위치합니다.

값을 `inside`로 설정하면 글머리 기호가 줄 안쪽에 표시됩니다.

```css
ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}
```

![an ordered list with the bullet points set to appear inside the list item text.](/ko/docs/Learn/CSS/Styling_text/Styling_lists/inner-bullets.png)

### 맞춤 글머리 기호 이미지 사용

`list-style-image` (en-US) 속성을 사용하면 글머리 기호에 맞춤 이미지를 사용할 수 있습니다. 구문은 매우 간단합니다.

```css
ul {
  list-style-image: url(star.svg);
}
```

그러나 이 속성은 글머리 기호의 위치, 크기 등을 제어하는 측면에서 약간 제한됩니다. 스타일 지정 상자 모듈에서 자세히 알아볼 `background` 속성 계열을 사용하는 것이 좋습니다. 지금은 맛보기가 있습니다!

완성된 예제에서는 정렬되지 않은 목록의 스타일을 다음과 같이 지정했습니다.(위에서 이미 본 것 위에)

```css
ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}
```

여기서 우리는 다음을 수행했습니다.

* `<ul>`의 `padding-left`를 기본 `40px`에서 `20px`로 아래로 설정한 다음 목록 항목에 동일한 양을 설정합니다. 이는 전체 목록 항목이 여전히 주문 목록 항목 및 설명 목록 설명과 정렬되지만 목록 항목에는 배경 이미지가 내부에 놓일 수 있도록 약간의 패딩이 있습니다. 이렇게 하지 않으면 배경 이미지가 목록 항목 텍스트와 겹쳐 지저분해 보일 수 있습니다.
* 기본적으로 글머리 기호가 표시되지 않도록 `list-style-type` (en-US)을 `none`으로 설정합니다. 대신 글머리 기호를 처리하기 위해 `background` 속성을 사용할 것입니다.
* 순서가 지정되지 않은 각 목록 항목에 글머리 기호를 삽입했습니다. 관련 속성은 다음과 같습니다.
    + `background-image`: 글머리 기호로 사용하려는 이미지 파일의 경로를 참조합니다.
    + `background-position` (en-US): 선택한 요소의 배경에서 이미지가 나타날 위치를 정의합니다. 이 경우에는 `0 0`을 의미합니다. 이는 글머리 기호가 각 목록 항목의 왼쪽 상단에 나타남을 의미합니다.
    + `background-size` (en-US): 배경 이미지의 크기를 설정합니다. 우리는 이상적으로 글머리 기호가 목록 항목과 같은 크기(또는 아주 약간 작거나 더 크게)를 원합니다. 우리는 `1.6rem`(`16px`)의 크기를 사용하고 있는데, 이는 글머리 기호가 안쪽에 놓이도록 허용한 `20px` 안쪽 여백과 매우 잘 맞습니다.
    + `background-repeat`: 기본적으로 배경 이미지는 사용 가능한 배경 공간을 채울 때까지 반복됩니다. 각각의 경우에 하나의 이미지 사본만 삽입하기를 원하므로 `no-repeat` 값으로 설정합니다.

결과는 다음과 같습니다.

![an unordered list with the bullet points set as little star images](/ko/docs/Learn/CSS/Styling_text/Styling_lists/list_formatting.png)

### 목록 스타일 속기

위에서 언급한 세 가지 속성은 모두 `list-style` (en-US)이라는 단일 속기 속성을 사용하여 설정할 수 있습니다. 예를 들어 다음 CSS는 다음과 같습니다.

```css
ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}
```

다음으로 대체할 수 있습니다.

```css
ul {
  list-style: square url(example.png) inside;
}
```

값은 임의의 순서로 나열할 수 있으며 1개, 2개 또는 3개 모두를 사용할 수 있습니다(포함되지 않은 속성에 사용되는 기본값은 `disc`, `none`, `outside`임). `type`과 `image`가 모두 지정된 경우 어떤 이유로 이미지를 로드할 수 없는 경우 해당 유형이 폴백으로 사용됩니다.

목록 계산 제어
--------

때로는 순서가 지정된 목록에서 다르게 계산하고 싶을 수 있습니다. 1이 아닌 숫자부터 시작하거나 거꾸로 세거나 1보다 많은 단계로 세십시오. HTML과 CSS에는 여기에서 도움이 되는 몇 가지 도구가 있습니다.

### start

`start` 속성을 사용하면 1이 아닌 숫자부터 카운트하는 목록을 시작할 수 있습니다. 예시는 다음과 같습니다.

```html
<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
```

다음과 같은 출력을 제공합니다.

### reversed

`reversed` 속성은 목록을 위로 카운트하는 대신 카운트 다운을 시작합니다. 예시는 다음과 같습니다.

```html
<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
```

다음과 같은 출력을 제공합니다.

**참고:** 반전된 목록에 `start` 속성 값보다 더 많은 목록 항목이 있는 경우 개수는 계속해서 0이 된 다음 음수 값이 됩니다.

### value

`value` 속성을 사용하면 목록 항목을 특정 숫자 값으로 설정할 수 있습니다. 예시는 다음과 같습니다.

```html
<ol>
  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
  <li value="4">
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
```

다음과 같은 출력을 제공합니다.

**참고:** 숫자가 아닌 `list-style-type` (en-US)을 사용하는 경우에도 `value` 속성에 동일한 숫자 값을 사용해야 합니다.

능동적 학습: 중첩 목록 스타일 지정
--------------------

이 활성 학습 세션에서는 위에서 배운 내용을 사용하여 중첩 목록의 스타일을 지정해 보기를 바랍니다. HTML을 제공했고, 그 다음을 수행하시기 바랍니다.

1. 정렬되지 않은 목록에 사각형 글머리 기호를 지정합니다.
2. 정렬되지 않은 목록 항목과 정렬된 목록 항목에 글꼴 크기의 1.5 `line-height`를 지정합니다.
3. 순서가 지정된 목록에 하위 알파벳 글머리 기호를 지정합니다.
4. 글머리기호 유형, 간격 또는 찾을 수 있는 모든 항목을 실험하면서 목록 예제를 원하는 만큼 자유롭게 사용해 보십시오.

실수한 경우 *재설정* 버튼을 사용하여 언제든지 재설정할 수 있습니다. 정말 막히면 *해결 방법 표시* 버튼을 눌러 잠재적인 답변을 확인하세요.
```

<div
 class="body-wrapper"
 style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea
 id="code"
 class="html-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<ul>
  <li>First, light the candle.</li>
  <li>Next, open the box.</li>
  <li>Finally, place the three magic items in the box, in this exact order, to complete the spell:
    <ol>
      <li>The book of spells</li>
      <li>The shiny rod</li>
      <li>The goblin statue</li>
    </ol>
  </li>
</ul></textarea
 >

  <h2>CSS Input</h2>
  <textarea
 id="code"
 class="css-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>

  <h2>Output</h2>
  <div
 class="output"
 style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
  <div class="controls">
    <input
 id="reset"
 type="button"
 value="Reset"
 style="margin: 10px 10px 0 0;" />
    <input
 id="solution"
 type="button"
 value="Show solution"
 style="margin: 10px 0 0 10px;" />
  </div>
</div>
```

```
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement("style");
var headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function () {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function () {
  htmlInput.value = htmlCode;
  cssInput.value =
    "ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}";
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

또한
--

CSS counters는 목록 계산 및 스타일 지정을 사용자 지정하기 위한 고급 도구를 제공하지만 매우 복잡합니다. 실력을 늘리고 싶다면 다음을 살펴보는 것이 좋습니다.

* `@counter-style` (en-US)
* `counter-increment` (en-US)
* `counter-reset` (en-US)
요약
--

몇 가지 관련 기본 원칙과 특정 속성을 알고 있으면 목록의 스타일을 비교적 쉽게 익힐 수 있습니다. 다음 본문에서는 스타일링 기술을 연결하는 방법을 살펴보겠습니다.

* 이전
* Overview: Styling text
* 다음


웹 폰트 - Web 개발 학습하기

웹 폰트
====

* 이전
* Overview: Styling text
* 다음

이 과정의 첫 번째 기사에서 우리는 폰트와 텍스트를 꾸미는데 가능한 CSS 기본 기능들에 대해서 살펴보았습니다. 이 글에서는 더 나아가 웹 폰트를 자세히 살펴보겠습니다. 웹 페이지에서 사용자 정의 폰트를 사용하여 보다 다양한 사용자 정의 텍스트 스타일을 지정하는 방법을 살펴보겠습니다.

|  |  |
| --- | --- |
| 사전 지식: |
 기본 컴퓨터 활용 능력, HTML 기초
 (HTML 소개 공부하기), CSS 기초
 (CSS 소개 공부하기),
 CSS 텍스트 및 폰트 기본 사항.
  |
| 목표: | 타사 서비스를 사용하거나, 직접 코드를 작성해서 웹 폰트를 웹 페이지에 적용하는 방법을 학습하기. |

Font families 요약하기
------------------

CSS 텍스트 및 폰트 기본 사항에서 살펴본 것처럼, `font-family` (en-US) 속성을 사용하여 HTML에 적용되는 폰트를 제어할 수 있습니다. 여기에는 하나 이상의 폰트 패밀리 이름이 필요합니다. 웹페이지를 표시할 때 브라우저는 실행 중인 시스템에서 사용 가능한 폰트를 찾을 때까지 폰트 패밀리 값 목록을 아래로 살펴봅니다.

```css
p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
```

이 시스템은 잘 작동하지만, 기존에는 웹 개발자가 선택할 수 있는 폰트가 제한적이었습니다. 모든 일반적인 시스템에서 사용 가능하다고 보장할 수 있는 폰트는 웹 안전 폰트 라고 불리는 소수의 폰트뿐입니다. 폰트 스택을 사용하여 선호하는 폰트, 웹 안전 대체 폰트, 기본 시스템 폰트 순서로 지정할 수 있습니다. 그러나 이렇게 하면 당신의 디자인이 각 폰트에서 작동하는지 확인하는 데 필요한 테스트가 필요하므로 작업량이 증가합니다.

웹 폰트
----

하지만 아주 잘 작동하는 대안도 있습니다. CSS를 사용하면 웹에서 사용할 수 있는 폰트 파일을 지정하여 웹 사이트에 액세스할 때 함께 다운로드 할 수 있습니다. 이 CSS 기능을 지원하는 어떤 브라우저라도 당신이 특별히 선택한 폰트를 표시할 수 있습니다. 놀랍습니다! 필요한 구문은 다음과 같습니다.

우선, 다운로드 할 폰트 파일을 명시하는 `@font-face` 규칙 집합이 CSS의 시작 부분에 있습니다.

```css
@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}
```

그 아래에는 `@font-face` 안에 지정된 폰트 패밀리 이름을 사용하여 평소처럼 원하는 폰트에 사용자 지정 폰트를 적용할 수 있습니다.

```css
html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}
```

구문은 이보다 조금 더 복잡해집니다. 아래에서 더 자세히 살펴보겠습니다.

웹 폰트에 관해서 염두에 두어야 할 몇 가지 중요한 내용들이 있습니다.

1. 폰트는 일반적으로 무료로 사용할 수 없습니다. 폰트에 대한 비용을 지불하거나 코드(또는 사이트)에서 폰트 제작자에게 크레딧을 부여하는 등 다른 라이센스 조건을 따라야 합니다. 적절한 크레딧을 제공하지 않고 폰트를 훔쳐서 사용하면 안 됩니다.
2. 모든 주요 브라우저는 WOFF/WOFF2 (Web Open Font Format versions 1 and 2)를 지원합니다. 심지어 IE9(2011년 출시)와 같은 구형 브라우저에서도 WOFF 형식을 지원합니다.
3. WOFF2는 가변 폰트, 크로마틱 폰트 및 폰트 컬렉션을 포함한 TrueType 및 OpenType의 모든 사양을 지원합니다.
4. 폰트 파일을 나열하는 순서가 중요합니다. 다운로드할 여러 폰트 파일 목록을 브라우저에 제공하면, 브라우저는 사용할 수 있는 첫 번째 폰트 파일을 선택합니다. 따라서 가장 먼저 나열하는 형식은 가장 선호하는 형식, 즉 WOFF2여야 하고 이전 형식은 그 뒤에 나열해야 합니다. 브라우저가 한 형식을 이해하지 못하면 그 뒤에 있는 다음 형식으로 넘어갑니다.
5. 레거시 브라우저에서 작업해야 하는 경우, 다운로드 할 수 있는 EOT (Embedded Open Type), TTF (TrueType Font) 및 SVG 웹 폰트를 제공해야 합니다. 이 기사에서는 필요한 파일을 생성할 수 있는 Fontsquirrel 웹폰트 생성기를 사용합니다.

Firefox 폰트 편집기를 사용해서 웹 폰트의 여부에 관계없이 페이지에서 사용 중인 폰트를 확인하고 조작할 수 있습니다. 이 동영상은 좋은 방법을 제공합니다.

능동적 학습: 웹 폰트 예시
---------------

이를 염두에 두고 기본 원칙에 따라 기본 웹 폰트 예제를 만들어 보겠습니다. 임베드된 라이브 예제를 사용해서 시연하기는 어렵습니다. 대신에 아래 섹션에 자세히 설명된 단계를 따라 과정에 대한 아이디어를 얻으세요.

web-font-start.html 및 web-font-start.css 파일을 코드를 추가할 시작점으로 사용해야 합니다. (live example 를 확인해 주세요). 지금 컴퓨터의 새 디렉터리에 이 파일의 복사본을 만드세요. `web-font-start.css` 파일에는 예제의 기본 레이아웃과 조판을 처리하기 위한 최소한의 CSS가 있습니다.

### 폰트 찾기

이 예제에서는 제목과 본문 텍스트에 각각 하나씩 두 개의 웹 폰트를 사용하겠습니다. 먼저 폰트가 포함된 폰트 파일을 찾아야 합니다. 폰트는 폰트 파운드리에서 제작하며 다양한 파일 형식으로 저장됩니다. 일반적으로 폰트를 구할 수 있는 사이트는 세 가지 유형이 있습니다.

* 무료 폰트 배포자: 무료로 폰트를 다운로드 할 수 있는 사이트입니다. (폰트 제작자에게 크레딧을 제공해야 하는 등 일부 라이센스 조건이 있을 수 있습니다). 예를 들면 Font Squirrel, dafont 및 Everything Fonts 을 포함합니다.
* 유료 폰트 배포자: fonts.com 또는 myfonts.com 같은 사이트는 유료로 폰트를 제공합니다. 예를 들어 Linotype, Monotype, 또는 Exljbris 같은 폰트 파운드리에서 직접 폰트를 구매할 수도 있습니다.
* 온라인 폰트 서비스: 폰트를 저장하고 제공하는 사이트로, 전체 과정을 더 쉽게 만들어 줍니다. 온라인 폰트 서비스 사용하기 에서 자세한 내용을 확인하세요.

폰트를 찾아봅시다! Font Squirrel로 이동해서 두 가지 폰트를 선택합니다. 제목에는 멋진 디스플레이 폰트이나 슬랩 세리프 폰트를, 단락에는 약간 덜 화려하고 가독성이 좋은 폰트를 선택하세요. 폰트를 찾았으면 다운로드 버튼을 누르고, 이전에 저장한 HTML 및 CSS 파일과 같은 디렉터리에 파일을 저장합니다. TTF (True Type Fonts) 또는 OTF (Open Type Fonts)의 여부는 중요하지 않습니다.

두 개의 폰트 패키지의 압축을 해제합니다. (웹 폰트는 일반적으로 폰트 파일과 라이센스 정보가 포함된 ZIP 파일로 배포됩니다) 패키지에는 여러 개의 폰트 파일이 있을 수 있습니다. 일부 폰트는 얇은 폰트, 중간 폰트, 굵은 폰트, 이탤릭 폰트, 얇은 이탤릭 등등 다양한 변형이 있는 형태로 배포됩니다. 이 예시에서는 각 선택에 대해 하나의 폰트 파일만 신경 쓰세요.

**참고:** Font Squirrel에서 오른쪽 열에 있는 "폰트 찾기" 섹션에서 다양한 태그와 분류를 클릭하여 표시된 선택 항목들을 필터링할 수 있습니다.

### 필요한 코드 생성하기

이제 필요한 코드(및 폰트 형식)를 생성해야 합니다. 각 폰트에 대해 다음 단계를 따르세요.

1. 상업용 및/또는 웹 프로젝트에 사용하려는 경우 라이센스 요구 사항을 충족했는지 확인하세요.
2. Fontsquirrel 웹 폰트 생성기로 이동합니다.
3. "폰트 업로드" 버튼을 사용해서 두 개의 폰트 파일을 업로드 합니다.
4. "예, 업로드하는 폰트는 법적으로 웹 임베딩에 사용할 수 있는 폰트입니다." 라는 체크박스 라벨을 체크합니다.
5. "키트 다운로드" 를 클릭합니다

생성기의 처리가 완료되면 ZIP 파일을 다운로드 할 수 있습니다. HTML 및 CSS와 같은 디렉터리에 저장합니다.

레거시 브라우저를 지원하고 싶다면, 웹 폰트 생성기에서 "전문가" 모드를 선택하고 SVG, EOT 및 TTF 형식을 선택한 후 키트르 다운로드 하세요.

폰트 생성을 위한 웹 서비스들을 일반적으로 파일 크기에 제한이 있습니다. 이런 상황에서는 다음과 같은 도구를 사용하는 것을 고려해 보세요.

1. sfnt2woff-zopfli ttf에서 woff로 변환
2. fontforge ttf에서 svg로 변환
3. batik ttf2svf ttf에서 svg로 변환
4. woff2 ttf에서 woff2로 변환
### 데모에 코드 구현하기

방금 생성한 웹 폰트 키트의 압축을 풉니다. 그 안에는 몇 가지 유용한 아이템들이 있습니다.

* 각 폰트의 두 가지 버전 `.woff`, `.woff2` 파일
* 각 폰트에 대한 데모 HTML 파일. 브라우저에서 이 파일들을 불러와 다양한 사용 환경에서 폰트가 어떻게 보이는지 확인할 수 있습니다.
* `stylesheet.css` 파일에는 생성된 @font-face 코드가 포함되어 있습니다.

데모에서 이러한 폰트를 구현하려면 다음 단계를 따르세요.

1. 압축을 푼 디렉터리의 이름을 `fonts`와 같이 쉽고 간단한 이름으로 변경합니다.
2. `stylesheet.css`파일을 열고 두 개의 `@font-face` 규칙 집합을 `web-font-start.css` 파일에 복사합니다. 사이트에서 폰트를 사용하기 전에, 폰트를 가져와야 하므로 CSS의 맨 위에 배치해야 합니다.
3. 각 `url()` 함수는 CSS로 가져올 폰트 파일을 가리킵니다. 파일 경로가 올바른지 확인해야 하므로 각 경로의 시작 부분에 `fonts/`를 추가합니다. (필요에 따라 조정)
4. 이제 웹 안전 또는 시스템 기본 폰트 같은 폰트 스택에서 이러한 폰트들을 사용할 수 있습니다. 예시를 확인하세요

```css
@font-face {
  font-family: "zantrokeregular";
  src:
    url("fonts/zantroke-webfont.woff2") format("woff2"),
    url("fonts/zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
```

```css
font-family: "zantrokeregular", serif;
```

멋진 폰트가 구현된 데모 페이지가 완성됩니다. 폰트마다 크기가 다르기 때문에 크기, 간격 등을 조정해서 모양과 느낌을 정리해야 할 수 있습니다.

![The finished design of a Web font active learning exercise. The page has two headings and three paragraphs. The page contains different fonts and text at different sizes.](/ko/docs/Learn/CSS/Styling_text/Web_fonts/web-font-example.png)

**참고:** 작동하는데 문제가 있는 경우 완성된 파일과 비교해 보세요. web-font-finished.html 및 web-font-finished.css을 확인해 보세요. 또한 Github에서 코드를 다운로드 받거나 완성된 예제를 실행시킬 수 있습니다.

온라인 폰트 서비스 이용하기
---------------

온라인 폰트 서비스는 일반적으로 폰트를 저장하고 제공하므로 `@font-face` 같은 코드를 작성할 필요가 없습니다. 대신에 일반적으로 사이트에 한 두줄의 간단한 코드를 넣기만 하면 모든 것이 작동합니다. Adobe Fonts 및 Cloud.typography 같은 예시가 있습니다. 특히 빠른 테스트 작업과 데모 작성에 유용한 이러한 서비스들은 Google Fonts를 제외하고 구독 기반입니다.

이러한 서비스는 대부분 사용하기 쉬우므로 여기서 자세히 다루지 않습니다. 아이디어를 얻을 수 있도록 여기서 Google Fonts에 대해 간단히 살펴봅니다. 다시 말하지만 `web-font-start.html` 및 `web-font-start.css` 사본을 시작점으로 이용하세요.

1. Google Fonts로 이동합니다.
2. 좋아하는 폰트를 검색하거나 페이지 상단의 필터를 사용해 원하는 폰트의 종류를 표시하고 원하는 폰트 몇 개를 선택합니다.
3. 폰트 패밀리를 선택하기 위해 폰트 미리 보기를 클릭하고, 폰트 옆에 있는 ⊕ 버튼을 누릅니다.
4. 폰트를 선택했으면 우측 상단에 있는 '선택한 폰트 보기' 버튼을 누릅니다.
5. 결과 화면에서 먼저 표시된 HTML 코드를 복사하여 HTML 파일의 head에 붙여 넣습니다. 기존 `<link>` 요소 위에 붙여 넣어 폰트를 가져온 다음 CSS에서 폰트를 사용하도록 합니다.
6. 그런 다음 사용자 정의 폰트를 HTML에 적용하려면 나열된 CSS 선언을 적절하게 CSS에 복사해야 합니다.

**참고:** 완성된 버전을 google-font.html 및 google-font.css에서 확인할 수 있습니다. 작업물을 비교하려면 (라이브 확인하기)를 사용하세요.

@font-face 자세히 알아보기
-------------------

Fontsquirrel에서 생성한 `@font-face` 구문을 살펴봅시다. 다음은 규칙 집합 중 하나의 모습입니다.

```css
@font-face {
  font-family: "zantrokeregular";
  src:
    url("zantroke-webfont.woff2") format("woff2"),
    url("zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
```

어떤 기능을 하는지 살펴봅시다.

* `font-family`: 이 줄은 폰트를 참조할 이름을 정합니다. CSS 전체에서 일관되게 사용한다면 어떤 이름이라도 지정할 수 있습니다.
* `src`: 이 줄은 CSS로 가져올 폰트 파일의 경로 (`url` 부분)와 각 폰트 파일의 형식(`format` 부분)을 지정합니다. 각 경우에 후자는 선택 사항이지만, 브라우저에서 사용할 수 있는 폰트를 더 빨리 결정할 수 있기에 선언하는 것이 좋습니다. 쉼표로 구분하여 여러 개의 선언을 나열할 수 있습니다. 브라우저는 캐스케이드 규칙에 따라 검색하므로 WOFF2와 같이 선호하는 형식을 앞에 선언하는 것이 가장 좋습니다.
* `font-weight`/`font-style` (en-US): 이 줄은 폰트의 가중치와 이탤릭체 여부를 지정합니다. 동일한 폰트의 가중치를 여러 개 가져오는 경우, 폰트 패밀리의 모든 다른 구성원을 다른 이름으로 호출할 필요 없이, 폰트 가중치/스타일을 선택한 다음 `font-weight`/`font-style` (en-US)의 다른 값을 사용하여 폰트 중에 선택할 수 있습니다. @font-face 팁: 폰트 가중치와 폰트 스타일을 정의하여 CSS를 단순하게 유지하는 방법에 대한 자세한 내용은 Roger Johansson의 글에서 확인할 수 있습니다.

**참고:** 웹 폰트에 `font-variant` (en-US) 및 `font-stretch` (en-US) 값을 지정할 수 있습니다. 최신 브라우저에서는 웹 폰트에서 사용할 특정 문자 범위인 `unicode-range` (en-US) 값을 지정할 수도 있습니다. 지원 브라우저에서는 지정된 문자만 다운로드 되므로 불필요한 다운로드를 줄일 수 있습니다. Drew McLellan가 작성한 유니코드 범위를 사용하여 Unicode-Range를 사용하여 사용자 정의 폰트 스택 만들기에서 이 기능을 활용하는 방법에 대한 좋은 아이디어를 확인할 수 있습니다.

가변 폰트
-----

가변 폰트라는 브라우저에서 사용가능한 새로운 폰트 기술이 있습니다. 가변 폰트는 너비, 굵기 및 스타일에 따라 별도의 폰트 파일을 사용하는 대신 하나의 파일에 다양한 서체 변형을 통합할 수 있는 폰트입니다. 초보자 과정에서는 다소 고급스러운 내용이지만, 좀 더 자세히 알아보고 싶다면 가변 폰트 가이드 (en-US) 를 읽어보세요.

요약
--

텍스트 스타일링의 기본에 대한 글을 살펴봤으니, 이제 과정에 대한 평가를 통해 이해도를 테스트할 시간입니다. 커뮤니티 학교 홈페이지 조판.

* 이전
* Overview: Styling text
* 다음


스타일링 링크 - Web 개발 학습하기

스타일링 링크
=======

* 이전
* Overview: Styling text
* 다음

링크의 스타일을 지정할 때는 의사 클래스를 사용하여 링크의 상태를 효과적으로 스타일링하는 방법을 이해하는 것이 중요합니다. 탐색 메뉴 및 탭과 같이 콘텐츠가 다양한 공통 인터페이스 기능에서 사용할 링크의 스타일을 지정하는 방법도 알아야 합니다. 이 글에서는 이 두 가지 주제를 모두 살펴보겠습니다.

|  |  |
| --- | --- |
| 필요한 사전 지식: | 기본적인 컴퓨터 활용 능력, HTML 기초(HTML 입문L 학습), CSS 기초(CSS 입문 학습), CSS 텍스트 및 글꼴 기초를 학습합니다. |
| 목표: | 링크 상태의 스타일을 지정하는 방법과 탐색 메뉴와 같은 일반적인 UI 기능에서 링크를 효과적으로 사용하는 방법을 알아보세요. |

몇 가지 링크를 살펴보겠습니다
----------------

하이퍼링크 만들기의 모범 사례에 따라 HTML에서 링크가 구현되는 방식을 살펴봤습니다. 이 글에서는 이러한 지식을 바탕으로 링크의 스타일을 지정하는 모범 사례를 보여드리겠습니다.

### 링크 상태

가장 먼저 이해해야 할 것은 링크가 존재할 수 있는 다양한 상태인 링크 상태의 개념입니다. 이러한 상태는 다양한 의사 클래스를 사용하여 스타일을 지정할 수 있습니다.

* **링크**: `:link` 의사 클래스를 사용하여 스타일이 지정된 대상(즉, 명명된 앵커가 아닌)이 있는 링크입니다.
* **방문 횟수**: 이미 방문한 링크(브라우저 기록에 존재)로, `:visited` 의사 클래스를 사용하여 스타일이 지정됩니다.
* **호버**: 사용자의 마우스 포인터로 가리키는 링크이며, `:hover` 의사 클래스를 사용하여 스타일이 지정됩니다.
* **포커스**: 초점이 맞춰진 링크(예: 키보드 사용자가 `Tab` 키 또는 이와 유사한 키를 사용하여 이동하거나 `HTMLElement.focus()` (en-US)를 사용하여 프로그래밍 방식으로 초점이 맞춰진 링크) `:focus` 의사 클래스를 사용하여 스타일이 지정됩니다.
* **활성**: 활성화(예: 클릭)된 링크이며, `:active` 의사 클래스를 사용하여 스타일이 지정됩니다.
### 기본 스타일

아래 예시는 링크의 기본 모양과 동작을 보여 주지만, CSS는 텍스트를 확대하고 중앙에 배치하여 더 눈에 잘 띄도록 합니다. 예시에서 기본 스타일링의 모양과 동작을 이 페이지에서 더 많은 CSS 스타일이 적용된 다른 링크의 모양과 동작과 비교할 수 있습니다. 기본 링크에는 다음과 같은 속성이 있습니다.

* 링크는 밑줄이 그어져 있습니다.
* 방문하지 않은 링크는 파란색입니다.
* 방문한 링크는 자주색입니다.
* 링크를 가리키면 마우스 포인터가 작은 손 아이콘으로 바뀝니다.
* 초점이 맞춰진 링크에는 주위에 윤곽선이 표시되므로 탭 키를 눌러 키보드로 이 페이지의 링크에 초점을 맞출 수 있습니다. Mac의 경우 `option` + `tab` 을 사용하거나 전체 키보드 액세스: 모든 컨트롤 옵션을 활성화해야 합니다(Mac에서는 `Ctrl` + `F7`을 눌러 활성화해야 합니다.
* 활성 링크는 빨간색입니다. 링크를 클릭할 때 마우스 버튼을 길게 눌러 보세요.

```html
<p><a href="#">A simple link</a></p>
```

```css
p {
  font-size: 2rem;
  text-align: center;
}
```

**참고:** 이 페이지의 모든 링크 예시는 해당 창 상단으로 연결됩니다. 빈 조각(`href="#"`)은 간단한 예제를 생성하고 각각 `<iframe>` (en-US)에 포함된 라이브 예제가 깨지지 않도록 하는 데 사용됩니다.

흥미롭게도 이러한 기본 스타일은 1990년대 중반 브라우저 초창기 때와 거의 동일합니다. 링크의 스타일이 달라지면 많은 사람들이 혼란스러워할 것이기 때문에 사용자들은 이러한 동작을 알고 있고 기대하게 되었기 때문입니다. 그렇다고 링크 스타일을 전혀 지정하지 말아야 한다는 뜻은 아닙니다. 다만 예상되는 동작에서 너무 멀리 벗어나지 않아야 한다는 의미입니다. 최소한 아래와 같도록 해야 합니다.

* 링크에는 밑줄을 사용하되 다른 항목에는 밑줄을 사용하지 마세요. 링크에 밑줄을 긋고 싶지 않다면 다른 방법으로 강조 표시하세요.
* 마우스를 가져가거나 초점을 맞추면 어떤 방식으로 반응하고, 활성화하면 약간 다른 방식으로 반응하도록 설정하세요.

기본 스타일은 다음 CSS 속성을 사용하여 해제/변경할 수 있습니다.

* `color`을 텍스트 색상으로 지정합니다.
* 마우스 포인터 스타일에 대한 `cursor`는 특별한 이유가 없는 한 이 기능을 끄지 않는 것이 좋습니다.
* `outline`을 텍스트 윤곽선으로 설정합니다. 윤곽선은 테두리와 비슷합니다. 유일한 차이점은 테두리는 상자에서 공간을 차지하지만 윤곽선은 그렇지 않고 배경 위에 위치한다는 것입니다. 윤곽선은 유용한 접근성 보조 도구이므로 초점이 맞춰진 링크를 표시하는 다른 방법을 추가하지 않고 제거해서는 안 됩니다.

**참고:** 링크 스타일 지정에 위의 속성만 사용할 수 있는 것이 아니라 원하는 모든 속성을 자유롭게 사용할 수 있습니다.

### 일부 링크 스타일링

이제 기본 상태에 대해 자세히 살펴봤으니 일반적인 링크 스타일 세트를 살펴보겠습니다.

우선 빈 규칙 집합을 작성해 보겠습니다.

```css
a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}
```

링크 스타일은 서로를 기반으로 구축되므로 이 순서가 중요합니다. 예를 들어 첫 번째 규칙의 스타일은 이후의 모든 규칙에 적용됩니다. 링크가 활성화되면 보통은 마우스가 링크 위에 올라가있습니다. 이러한 규칙을 잘못된 순서로 배치하고 각 규칙 집합에서 동일한 속성을 변경하면 예상대로 작동하지 않습니다. 순서를 기억하기 위해 **L**o**V**e **F**ears **HA**te와 같은 니모닉을 사용해 볼 수 있습니다.

이제 스타일을 제대로 지정하기 위해 몇 가지 정보를 추가해 보겠습니다.

```css
body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
}

a:link {
  color: #6900ff;
}

a:visited {
  color: #a5c300;
}

a:focus {
  text-decoration: none;
  background: #bae498;
}

a:hover {
  text-decoration: none;
  background: #cdfeaa;
}

a:active {
  background: #6900ff;
  color: #cdfeaa;
}
```

또한 CSS를 적용할 수 있는 몇 가지 샘플 HTML도 제공합니다.

```html
<p>
  There are several browsers available, such as <a href="#">Mozilla Firefox</a>,
  <a href="#">Google Chrome</a>, and <a href="#">Microsoft Edge</a>.
</p>
```

이 두 가지를 합치면 다음과 같은 결과가 나옵니다.

그래서 우리는 여기서 무엇을 했나요? 기본 스타일링과는 확실히 달라 보이지만 사용자가 무슨 일이 일어나고 있는지 알 수 있을 정도로 친숙한 경험을 제공합니다.

* 처음 두 가지 규칙은 이 논의에서 그다지 흥미롭지 않습니다.
* 세 번째 규칙은 `a` 선택자를 사용하여 브라우저마다 다를 수 있는 초점이 맞춰진 윤곽선을 제거합니다.
* 다음으로, `a:link` 및 `a:visited` 선택자를 사용하여 방문하지 않은 링크와 방문한 링크에 몇 가지 색상 변형을 설정하여 구분할 수 있도록 합니다.
* 다음 두 규칙은 `a:focus` 및 `a:hover`를 사용하여 초점이 맞춰진 링크와 마우스오버된 링크에 밑줄이 없고 배경색이 다르도록 설정합니다.
* 마지막으로, `a:active`는 링크가 활성화되는 동안 반전된 색 구성표를 사용하여 중요한 일이 일어나고 있음을 명확하게 표시하는 데 사용됩니다!
### 능동적 학습: 나만의 링크 스타일 지정

이 능동적 학습 세션에서는 빈 규칙 세트를 가지고 자신만의 선언문을 추가하여 링크를 멋지게 만들어 보시기 바랍니다. 상상력을 마음껏 발휘해 보세요. 위의 예시처럼 더 멋지고 기능적인 것을 생각해낼 수 있을 것입니다.

실수한 경우 언제든지 재설정 버튼을 사용하여 재설정할 수 있습니다. 정말 막히는 경우 솔루션 표시 버튼을 눌러 위에 표시된 예제를 삽입하세요.
```

<div
 class="body-wrapper"
 style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea
 id="code"
 class="html-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<p>There are several browsers available, such as <a href="#">Mozilla
 Firefox</a>, <a href="#">Google Chrome</a>, and
<a href="#">Microsoft Edge</a>.</p>
  </textarea>

  <h2>CSS Input</h2>
  <textarea
 id="code"
 class="css-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
a {

}

a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}
  </textarea>

  <h2>Output</h2>
  <div
 class="output"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input
 id="reset"
 type="button"
 value="Reset"
 style="margin: 10px 10px 0 0;" />
    <input
 id="solution"
 type="button"
 value="Show solution"
 style="margin: 10px 0 0 10px;" />
  </div>
</div>
```

```
const htmlInput = document.querySelector(".html-input");
const cssInput = document.querySelector(".css-input");
const reset = document.getElementById("reset");
const htmlCode = htmlInput.value;
const cssCode = cssInput.value;
const output = document.querySelector(".output");
const solution = document.getElementById("solution");

const styleElem = document.createElement("style");
const headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = `p {
 font-size: 1.2rem;
 font-family: sans-serif;
 line-height: 1.4;
}

a {
 outline: none;
 text-decoration: none;
 padding: 2px 1px 0;
}

a:link {
 color: #265301;
}

a:visited {
 color: #437A16;
}

a:focus {
 border-bottom: 1px solid;
 background: #BAE498;
}

a:hover {
 border-bottom: 1px solid;
 background: #CDFEAA;
}

a:active {
 background: #265301;
 color: #CDFEAA;
}`;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

링크에 아이콘 포함하기
------------

링크에 아이콘을 추가하여 링크가 가리키는 콘텐츠의 종류를 더 쉽게 알 수 있도록 하는 것이 일반적입니다. 외부 링크(다른 사이트로 연결되는 링크)에 아이콘을 추가하는 아주 간단한 예를 살펴봅시다. 이러한 아이콘은 일반적으로 상자 밖을 가리키는 작은 화살표처럼 보입니다. 이 예제에서는 icons8.com의 이 훌륭한 예제를 사용하겠습니다.

원하는 효과를 낼 수 있는 몇 가지 HTML과 CSS를 살펴봅시다. 먼저 스타일을 지정할 간단한 HTML입니다.

```html
<p>
  For more information on the weather, visit our <a href="#">weather page</a>,
  look at <a href="https://en.wikipedia.org/">weather on Wikipedia</a>, or check
  out
  <a href="https://www.nationalgeographic.org/topics/resource-library-weather/">
    weather on National Geographic</a>.
</p>
```

다음은 CSS입니다.

```css
body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus,
a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href^="http"] {
  background: url("external-link-52.png") no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}
```

무슨 내용일까요? 대부분의 CSS는 이전에 살펴본 것과 동일한 정보이므로 생략하겠습니다. 하지만 마지막 규칙이 흥미로운데, 지난 글에서 목록 항목의 사용자 정의 글머리 기호를 처리한 것과 비슷한 방식으로 외부 링크에 사용자 정의 배경 이미지를 삽입하고 있습니다. 하지만 이번에는 개별 속성 대신 `background` 약어를 사용합니다. 삽입할 이미지의 경로를 설정하고, 사본이 한 번만 삽입되도록 `no-repeat`로 지정한 다음, 위치를 텍스트 콘텐츠의 오른쪽 100%, 상단에서 0픽셀로 지정합니다.

또한 `background-size` (en-US)를 사용하여 배경 이미지가 표시될 크기를 지정할 수 있습니다. 반응형 웹 디자인을 위해 아이콘을 크게 만든 다음 필요에 따라 이와 같이 크기를 조정하는 것이 유용합니다. 하지만 이 기능은 IE 9 이상에서만 작동합니다. 따라서 이전 브라우저를 지원해야 하는 경우 이미지 크기를 조정하여 그대로 삽입하면 됩니다.

마지막으로, 배경 이미지가 텍스트와 겹치지 않도록 링크에 `padding-right`을 설정하여 배경 이미지가 표시될 공간을 확보했습니다.

마지막으로 외부 링크만 어떻게 선택했나요? HTML 링크를 올바르게 작성했다면 외부 링크에는 절대 URL만 사용해야 하며, 내 사이트의 다른 부분으로 연결할 때는 상대 링크를 사용하는 것이 더 효율적입니다(첫 번째 링크와 마찬가지로). 따라서 "http" 텍스트는 두 번째 및 세 번째 링크와 같이 외부 링크에만 표시되어야 하며, 속성 선택자를 사용하여 이를 선택할 수 있습니다. `a[href^="http"]`는 `<a>` 요소를 선택하지만 값이 "http"로 시작하는 `href` 속성이 있는 경우에만 선택됩니다.

여기까지입니다. 위의 능동적 학습 섹션을 다시 한 번 살펴보고 이 새로운 기법을 사용해 보세요!

**참고:** `href` 값이 이상하게 보이는데, 여기서는 실제로 아무데도 연결되지 않는 더미 링크를 사용했습니다. 그 이유는 실제 링크를 사용하면 라이브 예제가 임베드된 `<iframe>`에 외부 사이트가 로드되어 예제가 손실될 수 있기 때문입니다.

**참고:** 배경과 반응형 웹 디자인에 아직 익숙하지 않더라도 다른 곳에서 설명되어 있으니 걱정하지 마세요.

버튼으로 링크 스타일링하기
--------------

이 글에서 지금까지 살펴본 도구는 다른 방식으로도 사용할 수 있습니다. 예를 들어, 링크뿐만 아니라 문단, 목록 항목 등의 마우스오버 상태를 스타일링하는 등 다양한 요소의 스타일을 지정하는 데 마우스오버 상태를 사용할 수 있습니다.

또한 링크는 특정 상황에서 버튼처럼 보이고 작동하도록 스타일링하는 것이 일반적입니다. 웹사이트 탐색 메뉴는 링크 집합으로 마크업할 수 있으며, 사용자가 사이트의 다른 부분에 액세스할 수 있도록 제어 버튼이나 탭 집합처럼 보이도록 스타일을 지정할 수 있습니다. 방법을 살펴보겠습니다.

먼저 HTML입니다.

```html
<nav class="container">
  <a href="#">Home</a>
  <a href="#">Pizza</a>
  <a href="#">Music</a>
  <a href="#">Wombats</a>
  <a href="#">Finland</a>
</nav>
```

그리고 이제 CSS입니다.

```css
body,
html {
  margin: 0;
  font-family: sans-serif;
}

.container {
  display: flex;
  gap: 0.625%;
}

a {
  flex: 1;
  text-decoration: none;
  outline: none;
  text-align: center;
  line-height: 3;
  color: black;
}

a:link,
a:visited,
a:focus {
  background: palegoldenrod;
  color: black;
}

a:hover {
  background: orange;
}

a:active {
  background: darkred;
  color: white;
}
```

이렇게 하면 다음과 같은 결과가 나옵니다.

HTML은 `"container"` 클래스가 있는 `<nav>` 요소를 정의합니다. `<nav>`에는 링크가 포함되어 있습니다.

CSS에는 컨테이너와 컨테이너에 포함된 링크에 대한 스타일이 포함됩니다.

* 두 번째 규칙은 다음과 같습니다:
    + 컨테이너는 플렉스 박스입니다. 여기에 포함된 항목(이 경우 링크)은 *플렉스 항목*이 됩니다.
    + 플렉스 항목 사이의 간격은 컨테이너 너비의 `0.625%`가 됩니다.
* 세 번째 규칙은 링크의 스타일을 지정합니다.
    + 첫 번째 선언인 `flex: 1`은 컨테이너의 사용 가능한 모든 공간을 사용하도록 항목의 너비를 조정한다는 의미입니다.
    + 다음으로, 기본 `text-decoration`과 `outline`을 꺼서 모양을 망치지 않도록 합니다.
    + 마지막 세 가지 선언은 각 링크 내부의 텍스트를 가운데에 배치하고, `line-height` (en-US)를 3으로 설정하여 버튼에 약간의 높이를 부여하고(텍스트가 세로로 중앙에 배치되는 이점도 있습니다), 텍스트 색상을 검정색으로 설정하는 것입니다.
요약
--

이 글이 링크에 대해 알아야 할 모든 것을 알려드렸기를 바랍니다. 스타일링 텍스트 모듈의 마지막 글에서는 웹사이트에 사용자 정의 글꼴(또는 더 잘 알려진 웹 글꼴)을 사용하는 방법에 대해 자세히 설명합니다.

* 이전
* Overview: Styling text
* 다음


기본적인 텍스트 및 글꼴 스타일링 - Web 개발 학습하기

기본적인 텍스트 및 글꼴 스타일링
==================

* Overview: Styling text
* 다음

이 기사에서는 CSS 를 사용하여 텍스트 스타일링을 마스터하기 위한 과정을 시작합니다. 여기에서는 글꼴 굵기, 종류 및 스타일, 글꼴 약식 (shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여, 텍스트/글꼴 스타일링의 모든 기본 사항에 대해 자세히 설명합니다.

|  |  |
| --- | --- |
| 전제조건 |
 기본적인 컴퓨터의 이해, HTML 기본 (
 HTML 소개 둘러보기), CSS 기본 (study
 CSS 소개 둘러보기).
  |
| 목적: |
 웹 페이지에서 텍스트 스타일을 지정하는 데 필요한 기본 속성 및 기술
 습득하기.
  |

CSS 에서 텍스트 스타일링과 관련이 있는 것은 무엇입니까?
---------------------------------

HTML 및 CSS 를 사용한 작업에서 이미 경험한 것처럼 요소 내부의 텍스트는 요소의 내용 박스안에 배치됩니다. 콘텐츠 영역의 왼쪽 상단 (또는 RTL 언어 콘텐츠의 경우, 오른쪽 상단) 에서 시작하여 행의 끝으로 흐릅니다. 끝까지 도달하면 다음 줄로 내려가서 모든 내용이 박스에 들어갈 때까지 다음 줄로 계속 진행합니다. 텍스트 내용은 일련의 인라인 요소처럼 효과적으로 작동하며, 서로 인접한 줄에 배치되면 줄 끝에 도달할 때까지 줄 바꿈을 만들지 않거나, `<br>` 요소를 사용하여 수동으로 줄 바꿈을 수행하지 않습니다.

**참고:** 위의 단락으로 인해 혼동을 느끼게 되더라도 상관없이 — go back and review our 박스 모델 (en-US) 기사를 검토하여, 박스 모델 이론을 정리하십시오.

텍스트 스타일을 지정하는 데 사용되는 CSS 속성은 일반적으로 두 가지 카테고리로 분류되며, 이 기사에서는 별도로 살펴보겠습니다.

* **글꼴 스타일**: 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기, 이탤릭체 등에 영향을 주는 속성입니다.
* **텍스트 레이아웃 스타일**: 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 예를 들어 선 과 문자 사이의 간격 및 내용 박스 내에서 텍스트가 정렬되는 방식을 조작할 수 있습니다.

**참고:** 요소 내부의 텍스트는 모두 하나의 단일 entity 로 영향을 받습니다. 텍스트의 하위 섹션은 적절한 요소 (예: `<span>` 또는 `<strong>` (en-US)) 으로 감싸거나, 또는 ::first-letter (en-US)와 같은 텍스트 관련 의사 요소를 사용하십시오.(요소 텍스트의 첫 번째 문자 선택), ::first-line (en-US) (요소 텍스트의 첫 번째 행 선택) 또는 ::selection (en-US) (커서로 현재 강조 표시된 텍스트 선택) 과 같은 텍스트 특정 의사 요소를 사용하십시오.

글꼴
--

글꼴 스타일링의 속성을 살펴보도록 하겠습니다. 이 예에서는 동일한 HTML 샘플에 몇 가지 다른 CSS 속성을 적용합니다.

```html
<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

완성된 예제는 Github 에서 찾을 수 있습니다 (소스 코드 참조.)

### 색상

`color` 속성은 선택한 요소의 전경 내용의 색상을 설정합니다 (일반적으로 텍스트이지만, `text-decoration` 속성을 사용하여 텍스트에 배치되는 밑줄이나 오버라인과 같은 몇 가지 다른 것도 포함할 수 있습니다.

`color` 은 모든 CSS 색상 단위 를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

```css
p {
  color: red;
}
```

이렇게 하면 다음과 같이 표준 브라우저 기본값이 검은색이 아닌 빨간색으로 표시됩니다.
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

### 글꼴 종류

텍스트에 다른 글꼴을 설정하려면, `font-family` (en-US) 속성을 사용하여 브라우저에서 선택한 요소에 적용할 글꼴 (또는 글꼴 목록) 을 지정할 수 있습니다. 브라우저는 웹 사이트에 액세스하는 컴퓨터에서 글꼴을 사용할 수 있는 경우에만 글꼴을 적용합니다. 그렇지 않으면, 브라우저 default font 만 사용합니다. 간단한 예는 다음과 같습니다.

```css
p {
  font-family: arial;
}
```

이렇게 하면 페이지의 모든 단락이 임의의 컴퓨터에 있는 `arial` 글꼴을 채택하게 됩니다.

#### 웹 안전 글꼴

글꼴 사용가능 여부에 대해 말하자면, 일반적으로 모든 시스템에서 사용할 수 있는 글꼴의 수는 한정되어 있으므로 큰 걱정없이 사용할 수 있습니다. 이른바 **웹 안전 글꼴** 입니다.

대부분의 경우, 웹 개발자로서 텍스트 내용을 표시하는 데 사용되는 글꼴을 보다 구체적으로 제어하려고 합니다. 문제는 웹 페이지를 보는 데 사용되는 컴퓨터에서 어떤 글꼴을 사용할 수 있는지 알 수 있는 방법을 찾는 것입니다. 모든 경우에 이것을 알 수 있는 방법은 없지만, 웹 안전 글꼴은 가장 많이 사용되는 운영 체제 (윈도우, 맥, 가장 일반적인 리눅스 배포판, 안드로이드 및 iOS) 의 거의 모든 인스턴스에서 사용할 수 있는 것으로 알려져 있습니다.

실제 웹 안전 글꼴 목록은 운영 체제가 발전함에 따라 변경될 수 있지만, 최소한 다음과 같은 웹 안전 글꼴을 고려하는 것이 좋습니다 (이중 많은 글꼴이 90 년대 후반과 2000 년대 초에 웹 initiative 를 위한 Microsoft *Core 글꼴* 덕분에 많은 사람들이 대중화 되었습니다):

| 이름 | 일반 유형 | 참고 |
| --- | --- | --- |
| Arial | sans-serif | It's often considered best practice to also add *Helvetica* as a preferred alternative to *Arial* as, although their font faces are almost identical, *Helvetica* is considered to have a nicer shape, even if *Arial* is more broadly available. |
| Courier New | monospace | Some OSes have an alternative (possibly older) version of the *Courier New* font called *Courier*. It's considered best practice to use both with *Courier New* as the preferred alternative. |
| Georgia | serif |  |
| Times New Roman | serif | Some OSes have an alternative (possibly older) version of the *Times New Roman* font called *Times*. It's considered best practice to use both with *Times New Roman* as the preferred alternative. |
| Trebuchet MS | sans-serif | You should be careful with using this font — it isn't widely available on mobile OSes. |
| Verdana | sans-serif |  |

**참고:** 다양한 리소스 중에서 cssfontstack.com 웹 사이트는 Windows 및 macOS 운영 체제에서 사용할 수 있는 웹 안전 글꼴 목록을 유지하며, 이를 통해 사용하기에 안전하다고 생각하는 글꼴을 결정하는 데 도움이 될 수 있습니다.

**참고:** 웹 페이지와 함께 사용자 지정 글꼴을 다운로드하여 원하는 방식으로 글꼴 사용을 사용자 지정할 수 있는 방법이 있습니다. **웹 글꼴**. 이것은 조금 더 복잡하며 이 모듈의 뒷부분에 있는 별도의 문서에서 이에 대해 논의할 것입니다.

#### 기본 글꼴

CSS 는 글꼴의 일반적인 다섯 가지 이름: `serif`, `sans-serif`, `monospace`, `cursive` 및 `fantasy` 를 정의합니다. 이러한 일반 이름을 사용할 때 사용되는 정확한 글꼴은 각 브라우저에 달려 있으며, 실행중인 운영체제에 따라 다를 수 있습니다. 브라우저가 최소한 적합한 글꼴을 제공하기 위해 최선을 다하는 최악의 시나리오를 나타나냅니다. `serif`, `sans-serif` 및 `monospace` 는 상당히 예측가능하며 합리적인 무언가를 제공해야 합니다. 반면에 , `cursive` 및 `fantasy` 는 예측하기 어렵기 때문에, 테스트할 때 신중하게 사용하는 것이 좋습니다.

5개의 이름은 다음과 같이 정의됩니다.

| 용어 | 정의 | 예제 |
| --- | --- | --- |
| `serif` | serifs 가 있는 글꼴 (일부 서체에서 획 끝에 표시되는 번창 및 기타 작은 세부 사항) | My big red elephant |
| `sans-serif` | serifs 가 없는 글꼴. | My big red elephant |
| `monospace` | 모든 문자의 너비가 같은 글꼴로, 일반적으로 코드 목록에 사용됩니다. | My big red elephant |
| `cursive` | 흐르고 연결된 획을 사용하여 손글씨를 에뮬레이션하기 위한 글꼴입니다. | My big red elephant |
| `fantasy` | 장식용 글꼴. | My big red elephant |

#### 글꼴 스택

웹 페이지에서 글꼴의 사용가능 여부를 보장할 수 없으므로 (어떤 이유로 웹 글꼴이 실패할 수 있음) 브라우저에서 선택할 수 있는 **글꼴 스택(font stack)** 을 제공할 수 있습니다. 여기에는 여러 글꼴 이름으로 구성된 `font-family` 값이 포함됩니다. 예제는 다음과 같습니다.

```css
p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}
```

이 경우, 브라우저는 목록 시작 부분에서 시작하여 해당 글꼴이 시스템에서 사용 가능한지 확인합니다. 이 글꼴이 있으면, 해당 글꼴이 선택한 요소에 적용됩니다. 그렇지 않으면, 다음 글꼴로 이동합니다.

나열된 글꼴 중 사용 가능한 글꼴이 없는 경우, 브라우저가 최소한 대략 비슷한 것을 제공할 수 있도록 스택 끝에 적절한 일반 글꼴 이름을 제공하는 것이 좋습니다. 이 점을 강조하기 위해 다른 옵션을 사용할 수 없는 경우 단락에 브라우저의 기본 serif 글꼴이 지정됩니다. 일반적으로 Times New Roman은 sans-serif 글꼴에 적합하지 않습니다!

**참고:** `Trebuchet MS` 와 같이 둘 이상의 단어가 있는 글꼴 이름은 따옴표로 묶어야합니다, 예를 들면 `"Trebuchet MS"`.

#### font-family 예제

단락에 sans-serif 글꼴을 제공하여 이전 예제에 추가하겠습니다.

```css
p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

결과는 다음과 같습니다.
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

### 글꼴 크기

이전 모듈의 CSS 값 및 단위 기사에서 길이 및 크기 단위를 검토했습니다. 글꼴 크기(`font-size` 속성으로 설정)는 이러한 대부분의 단위(및 백분율과 같은 기타 단위)로 측정된 값을 가질 수 있지만 텍스트 크기를 조정하는 데 사용하는 가장 일반적인 단위는 다음과 같습니다.

* `px` (픽셀): 원하는 텍스트 높이의 픽셀 수입니다. 이것은 절대 단위입니다. 거의 모든 상황에서 페이지의 글꼴에 대해 동일한 최종 계산 값을 생성합니다.
* `em`s: 1em은 우리가 스타일링하고 있는 현재 요소의 부모 요소에 설정된 글꼴 크기와 같습니다(더 구체적으로는 부모 요소 안에 포함된 대문자 M의 너비). 서로 다른 글꼴 크기가 설정된 많은 중첩 요소가 있지만 아래에서 볼 수 있듯이 실행 가능합니다. 왜 귀찮게 할까요? 익숙해지면 매우 자연스럽고 `em`s를 사용하여 텍스트뿐만 아니라 모든 크기를 조정할 수 있습니다. ems를 사용하여 전체 웹 사이트 크기를 조정할 수 있으므로 유지 관리가 쉽습니다.
* `rem`s: 1`rem`이 부모 요소가 아닌 문서의 루트 요소(예: `<html>`)에 설정된 글꼴 크기와 같다는 점을 제외하면 `em`s와 동일하게 작동합니다. 이렇게 하면 수학 계산을 통해 글꼴 크기를 훨씬 쉽게 계산할 수 있지만 불행하게도 Internet Explorer 8 이하에서는 `rem`이 지원되지 않습니다. 프로젝트에서 이전 브라우저를 지원해야 하는 경우 `em`s 또는 `px`를 계속 사용하거나 REM-unit-polyfill과 같은 polyfill을 사용할 수 있습니다.

요소의 `font-size`는 해당 요소의 상위 요소에서 상속됩니다. 이 모든 것은 전체 문서의 루트 요소인 `<html>`에서 시작합니다. 이 요소의 `font-size`는 모든 브라우저에서 표준으로 16px로 설정됩니다. 루트 요소 내부의 모든 단락(또는 브라우저에서 다른 크기를 설정하지 않은 다른 요소)의 최종 크기는 16px입니다. 다른 요소는 기본 크기가 다를 수 있습니다. 예를 들어 `<h1>` 요소의 크기는 기본적으로 2ems로 설정되어 있으므로 최종 크기는 32px입니다.

중첩된 요소의 글꼴 크기를 변경하기 시작하면 상황이 더 까다로워집니다. 예를 들어 페이지에 `<article>` 요소가 있고 글꼴 크기를 `1.5em`s(24px 최종 크기로 계산됨)로 설정한 다음 `<article>` 요소 내부의 단락에 계산된 글꼴을 지정하려는 경우 크기가 20px이면 어떤 em 값을 사용하시겠습니까?

```html
<!-- document base font-size is 16px -->
<article>
  <!-- If my font-size is 1.5em -->
  <p>My paragraph</p>
  <!-- How do I compute to 20px font-size? -->
</article>
```

`em` 값을 20/24 또는 0.83333333`em`로 설정해야 합니다. 수학은 복잡할 수 있으므로 스타일을 지정하는 방법에 주의해야 합니다. 가능한 한 `rem`을 사용하여 작업을 단순하게 유지하고 가능한 경우 컨테이너 요소의 `font-size`를 설정하지 않는 것이 가장 좋습니다.

#### 간단한 사이즈 예시

텍스트 크기를 조정할 때 일반적으로 문서의 기본 `font-size`를 10px로 설정하는 것이 좋습니다. 그러면 계산이 훨씬 쉬워집니다. 필요한 (r)em 값은 픽셀 글꼴 크기로 나뉩니다. 16이 아닌 10으로. 그런 다음 문서의 다양한 유형의 텍스트를 원하는 크기로 쉽게 조정할 수 있습니다. 스타일시트의 지정된 영역에 모든 `font-size` 규칙들을 나열하여 쉽게 찾을 수 있도록 하는 것이 좋습니다.

우리의 새로운 결과는 다음과 같습니다.
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```css
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

### 글꼴 스타일, 글꼴 두께, 텍스트 변형 및 텍스트 장식

CSS는 텍스트의 시각적 무게/강조를 변경하는 네 가지 공통 속성을 제공합니다.

* `font-style` (en-US): 이탤릭체 텍스트를 켜고 끄는 데 사용됩니다. 가능한 값은 다음과 같습니다(어떤 이유로 이탤릭체 스타일을 끄고 싶지 않는 한 이것을 거의 사용하지 않을 것입니다).
    + `normal`: 텍스트를 일반 글꼴로 설정합니다(기존 이탤릭체를 끕니다.)
    + `italic`: 사용 가능한 경우 글꼴의 기울임꼴 버전을 사용하도록 텍스트를 설정합니다. 사용할 수 없는 경우 기울임꼴 대신 기울임꼴을 시뮬레이트합니다.
    + `oblique`: 일반 버전을 기울여 만든 이탤릭체 글꼴의 시뮬레이션 버전을 사용하도록 텍스트를 설정합니다.
* `font-weight`: 텍스트의 굵기를 설정합니다. 사용 가능한 글꼴 변형이 많은 경우(예: -light, -normal, -bold, -extrabold, -black 등) 많은 값을 사용할 수 있지만 현실적으로 `normal` 및 `bold`를 제외하고는 거의 사용하지 않습니다.
    + `normal`, `bold`: 일반 및 **굵은** 글꼴 두께
    + `lighter`, `bolder`: 현재 요소의 굵기를 부모 요소의 굵기보다 한 단계 더 가볍거나 무겁게 설정합니다.
    + `100`–`900`: 필요한 경우 위의 키워드보다 더 세분화된 제어를 제공하는 숫자 굵기 값입니다.
* `text-transform` (en-US): 글꼴을 변환하도록 설정할 수 있습니다. 값은 다음과 같습니다.
    + `none`: 변형을 방지합니다.
    + `uppercase`: 모든 텍스트를 대문자로 변환합니다.
    + `lowercase`: 모든 텍스트를 소문자로 변환합니다.
    + `capitalize`: 첫 글자를 대문자로 모든 단어를 변환합니다.
    + `full-width`: 모노스페이스 글꼴과 유사한 고정 너비 사각형 안에 작성되도록 모든 글리프를 변환하여 예를 들어 정렬할 수 있습니다. 라틴 문자와 아시아 언어 글리프(예: 중국어, 일본어, 한국어)
* `text-decoration`: 글꼴에 대한 텍스트 장식을 설정/해제합니다.(주로 링크 스타일을 지정할 때 링크의 기본 밑줄을 설정 해제하는 데 사용합니다.) 사용 가능한 값은 다음과 같습니다.
    + `none`: 이미 존재하는 모든 텍스트 장식을 해제합니다.
    + `underline`: **텍스트에 밑줄을 긋습니다.**
    + `overline`: 텍스트에 오버라인을 제공합니다.
    + `line-through`: ~~텍스트 위에 취소선~~을 그립니다.예를 들어 `text-decoration: underline overline`과 같이 여러 장식을 동시에 추가하려는 경우 `text-decoration`은 한 번에 여러 값을 허용할 수 있습니다. 또한 `text-decoration`은 `text-decoration-line` (en-US), `text-decoration-style` (en-US) 및 `text-decoration-color` (en-US)의 속기 속성입니다. 이러한 속성 값의 조합을 사용하여 재미있는 효과를 만들 수 있습니다(예: `text-decoration: line-through red wavy`).

예제에 이러한 속성 몇 가지를 추가하는 방법을 살펴보겠습니다.

우리의 새로운 결과는 다음과 같습니다.
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```css
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

### 텍스트 그림자

`text-shadow` (en-US) 속성을 사용하여 텍스트에 그림자를 적용할 수 있습니다. 아래 예와 같이 최대 4개의 값을 사용합니다.

```css
text-shadow: 4px 4px 5px red;
```

네 가지 속성은 다음과 같습니다.

1. 원본 텍스트에서 그림자의 수평 오프셋 — 사용 가능한 대부분의 CSS 길이 및 크기 단위를 사용할 수 있지만 가장 일반적으로 px를 사용합니다. 이 값이 포함되어야 합니다.
2. 원본 텍스트에서 그림자의 수직 오프셋. 그림자를 왼쪽/오른쪽이 아닌 위/아래로 이동한다는 점을 제외하면 기본적으로 수평 오프셋과 동일하게 동작합니다. 이 값이 포함되어야 합니다.
3. 흐림 반경 - 값이 높을수록 그림자가 더 넓게 분산됩니다. 이 값이 포함되지 않은 경우 기본값은 0이며 이는 흐림이 없음을 의미합니다. 사용 가능한 대부분의 CSS 길이 및 크기 단위를 사용할 수 있습니다.
4. 모든 CSS 색상 단위를 사용할 수 있는 그림자의 기본 색상입니다. 포함되지 않은 경우 기본적으로 `black`입니다.

**참고:** 양수 오프셋 값은 그림자를 오른쪽과 아래로 이동하지만 음수 오프셋 값을 사용하여 그림자를 왼쪽과 위쪽으로 이동할 수도 있습니다(예: `-1px -1px`).

#### 여러 그림자

쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다. 예를 들면 다음과 같습니다.

```css
text-shadow:
  -1px -1px 1px #aaa,
  0px 4px 1px rgba(0, 0, 0, 0.5),
  4px 4px 5px rgba(0, 0, 0, 0.7),
  0px 0px 7px rgba(0, 0, 0, 0.4);
```

고양이 Tommy 예제의 `<h1>` 요소에 이것을 적용하면 다음과 같이 됩니다.
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```
html {
  font-size: 10px;
}

h1 {
  font-size: 26px;
  text-transform: capitalize;
  text-shadow:
    -1px -1px 1px #aaa,
    0px 2px 1px rgba(0, 0, 0, 0.5),
    2px 2px 2px rgba(0, 0, 0, 0.7),
    0px 0px 3px rgba(0, 0, 0, 0.4);
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 14px;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

**참고:** Sitepoint 문서 Moonlighting with CSS text-shadow에서 `text-shadow` 사용에 대한 더 흥미로운 예를 볼 수 있습니다.

텍스트 레이아웃
--------

기본 글꼴 속성을 살펴보았으니 이제 텍스트 레이아웃에 영향을 주는 데 사용할 수 있는 속성을 살펴보겠습니다.

### 텍스트 정렬

`text-align` 속성은 포함하는 콘텐츠 상자 내에서 텍스트 정렬 방법을 제어하는 데 사용됩니다. 사용 가능한 값은 다음과 같으며 일반 워드 프로세서 응용 프로그램에서와 거의 동일한 방식으로 작동합니다.

* `left`: 텍스트를 왼쪽으로 정렬합니다.
* `right`: 텍스트를 오른쪽 정렬합니다.
* `center`: 텍스트를 중앙에 맞춥니다.
* `justify`: 모든 텍스트 줄이 동일한 너비가 되도록 단어 사이의 간격을 다양하게 조정하여 텍스트를 펼치십시오. 이것은 신중하게 사용해야 합니다. 특히 긴 단어가 많은 단락에 적용할 때 끔찍해 보일 수 있습니다. 이것을 사용하려는 경우 `hyphens`과 같은 다른 것을 함께 사용하여 더 긴 단어 중 일부를 여러 줄로 나누는 것도 고려해야 합니다.

`text-align: center;`를 적용한 경우; 예에서 `<h1>`에 다음과 같이 끝납니다.
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow:
    -1px -1px 1px #aaa,
    0px 2px 1px rgba(0, 0, 0, 0.5),
    2px 2px 2px rgba(0, 0, 0, 0.7),
    0px 0px 3px rgba(0, 0, 0, 0.4);
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

### 선 높이

`line-height` (en-US) 속성은 각 텍스트 줄의 높이를 설정합니다. 이 속성은 대부분의 길이 및 크기 단위를 사용할 수 있지만 승수 역할을 하고 일반적으로 최상의 옵션으로 간주되는 단위 없는 값을 사용할 수도 있습니다. `font-size`를 곱하여 `line-height`를 얻습니다. 본문 텍스트는 일반적으로 줄 간격이 떨어져 있을 때 더 보기 좋고 읽기 쉽습니다. 권장 줄 높이는 약 1.5–2(두 배 간격)입니다. 따라서 텍스트 줄을 글꼴 높이의 1.5배로 설정하려면 다음을 사용합니다.

```css
line-height: 1.5;
```

이것을 예제의 `<p>` 요소에 적용하면 다음과 같은 결과가 나타납니다.
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow:
    -1px -1px 1px #aaa,
    0px 2px 1px rgba(0, 0, 0, 0.5),
    2px 2px 2px rgba(0, 0, 0, 0.7),
    0px 0px 3px rgba(0, 0, 0, 0.4);
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
```

### 문자 및 단어 간격

`letter-spacing` 및 `word-spacing` 속성을 사용하면 텍스트에서 문자와 단어 사이의 간격을 설정할 수 있습니다. 자주 사용하지는 않지만 특정 모양을 얻거나 특히 조밀한 글꼴의 가독성을 향상시키는 용도를 찾을 수 있습니다. 대부분의 길이 및 크기 단위를 사용할 수 있습니다.

예를 들어, 예제에서 `<p>` 요소의 첫 번째 줄에 다음을 적용한 경우입니다.

```css
p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}
```

우리는 다음을 얻습니다.
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow:
    -1px -1px 1px #aaa,
    0px 2px 1px rgba(0, 0, 0, 0.5),
    2px 2px 2px rgba(0, 0, 0, 0.7),
    0px 0px 3px rgba(0, 0, 0, 0.4);
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
```

### 볼 가치가 있는 다른 속성들

위의 속성은 웹 페이지에서 텍스트 스타일 지정을 시작하는 방법에 대한 아이디어를 제공하지만 사용할 수 있는 더 많은 속성이 있습니다. 우리는 여기서 가장 중요한 것들을 다루고 싶었습니다. 위의 사용에 익숙해지면 다음 사항도 탐색해야 합니다.

글꼴 스타일:

* `font-variant` (en-US): 작은 대문자와 일반 글꼴 대체 사이를 전환합니다.
* `font-kerning` (en-US): 글꼴 커닝 옵션을 켜거나 끕니다.
* `font-feature-settings`: 다양한 OpenType 글꼴 기능을 켜거나 끕니다.
* `font-variant-alternates` (en-US): 지정된 글꼴에 대한 대체 글리프 사용을 제어합니다.
* `font-variant-caps` (en-US): 대체 대문자 글리프의 사용을 제어합니다.
* `font-variant-east-asian` (en-US): 일본어 및 중국어와 같은 동아시아 스크립트의 대체 글리프 사용을 제어합니다.
* `font-variant-ligatures` (en-US): 텍스트에서 사용되는 합자 및 상황별 형식을 제어합니다.
* `font-variant-numeric` (en-US): 숫자, 분수 및 서수 마커에 대한 대체 글리프의 사용을 제어합니다.
* `font-variant-position` (en-US): 위 첨자 또는 아래 첨자로 배치된 더 작은 크기의 대체 글리프 사용을 제어합니다.
* `font-size-adjust` (en-US): 실제 글꼴 크기와 독립적으로 글꼴의 시각적 크기를 조정합니다.
* `font-stretch` (en-US): 주어진 글꼴의 가능한 대체 확장 버전 간에 전환합니다.
* `text-underline-position` (en-US): `text-decoration-line` 속성 `underline` 값을 사용하여 설정된 밑줄의 위치를 지정합니다.
* `text-rendering` (en-US): 일부 텍스트 렌더링 최적화를 수행해 보십시오.

텍스트 레이아웃 스타일

* `text-indent` (en-US): 텍스트 콘텐츠의 첫 번째 줄이 시작되기 전에 얼마만큼의 수평 공간을 남겨야 하는지 지정합니다.
* `text-overflow` (en-US): 표시되지 않은 오버플로된 콘텐츠를 사용자에게 알리는 방법을 정의합니다.
* `white-space`: 요소 내부의 공백 및 관련 줄 바꿈을 처리하는 방법을 정의합니다.
* `word-break`: 단어 내에서 줄 바꿈 여부를 지정합니다.
* `direction` (en-US): 텍스트 방향을 정의합니다(이는 언어에 따라 다르며 일반적으로 HTML이 텍스트 콘텐츠에 연결된 부분을 처리하도록 하는 것이 좋습니다.)
* `hyphens`: 지원되는 언어에 대해 하이픈 연결을 켜거나 끕니다.
* `line-break`: 아시아 언어의 경우 줄 바꿈을 완화하거나 강화합니다.
* `text-align-last` (en-US): 강제 줄 바꿈 직전 블록 또는 줄의 마지막 줄을 정렬하는 방법을 정의합니다.
* `text-orientation` (en-US): 라인의 텍스트 방향을 정의합니다.
* `word-wrap` (en-US): 오버플로를 방지하기 위해 브라우저가 단어 내에서 줄을 끊을 수 있는지 여부를 지정합니다.
* `writing-mode` (en-US): 텍스트 라인이 수평 또는 수직으로 배치되는지 여부와 후속 라인이 흐르는 방향을 정의합니다.
글꼴 약식 (shorthand)
-----------------

많은 글꼴 속성은 단축 속성 `font`을 통해 설정할 수도 있습니다. 이들은 다음 순서로 작성됩니다: `font-style` (en-US), `font-variant` (en-US), `font-weight`, `font-stretch` (en-US), `font-size`, `line-height` (en-US)) 및 `font-family` (en-US)입니다.

이러한 모든 속성 중 `font` 속기 속성을 사용할 때 `font-size` 및 `font-family`만 필요합니다.

`font-size`와 `line-height` (en-US) 속성 사이에 슬래시를 넣어야 합니다.

전체 예는 다음과 같습니다.

```css
font:
  italic normal bold normal 3em/1.5 Helvetica,
  Arial,
  sans-serif;
```

능동적 학습: 스타일 지정 텍스트로 놀기
----------------------

이 활성 학습 세션에서는 수행할 특정 연습이 없습니다. 일부 글꼴/텍스트 레이아웃 속성을 잘 활용하고 무엇을 생성할 수 있는지 확인하기를 바랍니다! 오프라인 HTML/CSS 파일을 사용하여 이 작업을 수행하거나 아래의 라이브 편집 가능한 예에 코드를 입력할 수 있습니다.

실수한 경우 재설정 버튼을 사용하여 언제든지 재설정할 수 있습니다.
```

<div
 class="body-wrapper"
 style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea
 id="code"
 class="html-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
  <p>Some sample text for your delight</p></textarea
 >

  <h2>CSS Input</h2>
  <textarea
 id="code"
 class="css-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
p {

  }</textarea
 >

  <h2>Output</h2>
  <div
 class="output"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input
 id="reset"
 type="button"
 value="Reset"
 style="margin: 10px 10px 0 0;" />
  </div>
</div>
```

```
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement("style");
var headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function () {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

요약
--

이 기사에서 텍스트를 가지고 노는 것이 즐거웠기를 바랍니다! 다음 기사에서는 HTML 목록 스타일 지정에 대해 알아야 할 모든 정보를 제공합니다.

* Overview: Styling text
* 다음


다단 레이아웃 - Web 개발 학습하기

다단 레이아웃
=======

* 이전
* Overview: CSS layout
* 다음

CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 문서는 그 기능을 어떻게 사용하는지 설명합니다.

|  |  |
| --- | --- |
| 선결 사항: | HTML의 기초 (HTML 입문서)와 CSS 작동 방식에 대한 개념(CSS 입문서를 공부하세요.) |
| 목표: |
 신문에서 찾을 수 있는 것과 같은 웹 페이지상에 다단 레이아웃을 만드는
 방법을 학습합니다.
  |

기본 사례
-----

이제 다단 레이아웃을 사용하는 방법을 탐색할 것입니다. 이를 일컬어 *multicol*(다단)로 통칭합니다. 아래 내용을 따라하려면 다단 착수 파일을 다운로드하고 적절한 장소에 CSS를 추가할 수 있습니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.

우리의 착수 파일에는 아주 간단한 HTML이 포함되어 있습니다. 그 내용은 제목과 일부 단락이 내부에 있는 `container` 클래스 래퍼입니다.

컨테이너 클래스에 해당하는 `<div>` (en-US)는 다단 컨테이너가 될 예정입니다. `column-count` (en-US) 혹은 `column-width` (en-US) 속성 중의 하나를 사용해서 다단으로 전환합니다. `column-count` 속성은 당신이 부여하는 값만큼 다단을 생성하게 되며, 당신의 스타일시트에 다음과 같은 CSS를 추가하고 페이지를 새로고침하면 당신은 삼단 레이아웃을 얻게 됩니다:

```css
.container {
  column-count: 3;
}
```

당신이 생성하는 단은 가변 너비를 갖게됩니다. 말하자면 브라우저가 각 단에 할당한 공간의 크기를 계산합니다.<
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
```

```html
<div class="container">
  <h1>간단한 다단 예제</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
```

```css
.container {
  column-count: 3;
}
```

다음과 같이 `column-width`를 사용하여 당신의 CSS를 변경하세요:

```css
.container {
  column-width: 200px;
}
```

이제 브라우저는 당신이 지정한 크기의 단을 최대한 많이 제공합니다. 남은 공간은 현존하는 단 사이 공평하게 배분됩니다. 즉, 컨테이너가 해당 너비로 정확히 나뉠 수 없는 경우를 제외하고는 지정한 너비를 정확히 얻을 수 없습니다.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
```

```
<div class="container">
  <h1>간단한 다단 예제</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
```

```css
.container {
  column-width: 200px;
}
```

다단 스타일링
-------

다단으로 작성된 단은 개별적으로 스타일링할 수 없습니다. 하나의 단을 다른 단보다 크게 만들거나 단일 단의 배경 또는 텍스트 색상을 변경할 수 있는 방법이 없습니다. 단이 표시되는 방식을 바꿀 수 있는 기회는 두 가지가 주어집니다.

* `column-gap` (en-US)를 사용해 다단 사이 간격의 크리를 변경하기.
* `column-rule` (en-US)를 가지고 다단 사이 규칙을 추가하기.

상기 예제 용례에서 `column-gap` 속성을 추가해 간격의 크기를 변경하세요:

```css
.container {
  column-width: 200px;
  column-gap: 20px;
}
```

서로 다른 값을 가지고 마음대로 부릴 수 있습니다. 모든 길이 단위를 속성이 허용한다는 말입니다. 이제 `column-rule`를 가지고 다단 사이 규칙을 추가하세요. 이전 단원에서 접했던 `border` 속성과 비슷한 방식으로 `column-rule`는 `column-rule-color` (en-US)와 `column-rule-style` (en-US) `column-rule-width` (en-US)의 약칭이며 `border`와 동일한 값을 허용합니다.

```css
.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}
```

다른 스타일과 색상 규칙을 추가하세요
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}
```

```
<div class="container">
  <h1>간단한 다단 예제</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
```

주목할 점은 규칙이 자체적으로 폭을 점유하지 않는다는 것입니다. 규칙이 적용된 내용은 당신이 `column-gap`으로 생성된 간격을 가로질러 놓여 있습니다. 규칙을 따라 양쪽에 더 많은 공간을 만들려면 `column-gap` 크기를 늘려야 합니다.

Spanning columns
----------------

다단 레이아웃에 의해 콘텐츠가 span across 됩니다. 그것은 본질적으로 페이지 미디어상에 콘텐츠가 작동하는 것과 같은 방식으로 작동합니다. 예를 들면 웹페이지 인쇄가 그렇습니다. 콘텐츠를 다단 컨테이너로 만들면 다단으로 나눠지고, 그것이 가능해진 결과로 콘텐츠는 깨집니다.

때때로, 이런 깨짐 현상은 발생하는 위치에 따라 독서를 저해하는 경험을 낳을 것입니다. 아래의 실제 사용례에서 나는 다단을 사용하여 일련의 상자를 배치했는데, 각각에는 머리글과 약간의 텍스트가 들어 있습니다. 다단 사이가 단편화할 경우 제목은 텍스트와 분리됩니다.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
```

```html
<div class="container">
  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
</div>
```

```css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}
```

이러한 동작을 제어하기 위해 CSS 붕괴 (en-US) 규격에 있는 속성을 사용할 수 있습니다. 우리는 이 규격에 있는 속성을 통해 다단과 페이지 미디어에 포함된 콘텐츠가 깨지는 것을 제어할 수 있습니다. 예를 들어, `.card` 클래스에 대한 규칙에 `avoid` 값을 사용한 `break-inside` (en-US)을 추가하세요. 이것은 머리글과 텍스트로 구성된 컨테이너입니다. 따라서 우리는 이 상자를 분열하고 싶지 않습니다.

현 시점에 이전 속성인 `page-break-inside: avoid`을 최상의 브라우저 지원을 위해 추가할 가치가 있습니다.

```css
.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}
```

페이지를 새로고침하면 상자가 하나의 형태를 갖추고 있어야 합니다.
```

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
```

```
<div class="container">
  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>나는 머리글이다.</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
</div>
```

```css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}
```

요약정리
----

이제 당신이 현재 설계 중인 레이아웃 메서드를 선택할 때 맘껏 사용할 수 있는 다단 레이아웃의 기본 기능과 다른 도구를 사용하는 방법을 알게 되었습니다.

참조 항목
-----

* CSS 붕괴 (en-US)
* 다단 레이아웃 사용하기
* 이전
* Overview: CSS layout
* 다음


Flexbox - Web 개발 학습하기

Flexbox
=======

* 이전
* Overview: CSS layout
* 다음

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 전체를 설명합니다.

|  |  |
| --- | --- |
| 선결 사항: | HTML의 기초 (HTML 입문서)와 CSS 작동 방식에 대한 개념(CSS 입문서를 공부하세요.) |
| 목표: |
 웹 레이아웃을 생성하기 위해 flexbox 레이아웃 시스템을 사용하는 방법을
 학습하기.
  |

왜 flexbox인가?
------------

오랫동안 CSS 레이아웃을 작성할 수 있는 신뢰할 수 있는 크로스 브라우저 호환 도구는 부동체 및 위치잡기 도구였습니다. 이것들은 무난하고 작동하지만, 어떤 면에서는 되려 제한적이고 좌절감을 맞보게 합니다.

다음과 같은 간단한 레이아웃 요구 사항은 그러한 도구를 사용하여 달성하기가 어렵거나 불가능합니다. 또한, 편리하지도 유연한 방식도 못됩니다.

* 부모 요소 내부에 포함된 블록 콘텐츠를 세로로 중심부에 맞추기.
* 사용 가능한 너비와 높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 너비와 높이를 똑같은 크기로 점유하기.
* 다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 콘텐츠를 포함하고 있더라도 동일한 높이로 채택하기.

다음 섹션에서 확인하겠지만, flexbox는 많은 레이아웃 작업을 훨씬 쉽게 만들어 줍니다. 본격적으로 파헤쳐봅시다!

간단한 예제 소개
---------

이 문서에서 우리는 여러분이 flexbox의 작동 방식을 이해하는데 도움이 되는 일련의 연습을 수행하도록 하겠습니다. 시작하려면, 첫 번째 착수 파일인 flexbox0.html을 우리의 깃허브 저장소에서 사본을 내려받기하여 최신 브라우저(Firefox 또는 Chrome 등)에서 동 파일을 열어 코드 편집기에서 코드를 살펴봐야 합니다. 당신은 그걸 시연한 실제 장면을 여기서도 볼 수 있습니다.

(편집기로 본) 소스안에 최상위 수준에 `<header>` 요소와 세 개의 `<article>`를 포함한 `<section>` 요소가 있음을 알 수 있습니다. 우리는 이것들을 사용해 상당히 표준적인 삼단 레이아웃을 생성할 겁니다.

![](/ko/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example1.png)

flexbox로 레이아웃할 요소 지정
--------------------

먼저 어떤 요소들을 flexbox로 레이아웃할 요소를 선택해야 합니다. 이를 위해 영향을 주고 싶은 요소의 부모 요소에 특별한 `display` (en-US) 속성값을 지정합니다. 이 경우 우리는 `<article>` 요소를 레이아웃하길 원하므로 (flex container가 될) `<section>`에 해당 속성값을 지정합니다:

```css
section {
  display: flex;
}
```

그 결과는 다음과 같아야 합니다:

![](/ko/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example2.png)

자. 이 단일 선언이 우리에게 필요한 모든 것을 제공합니다. 놀랍죠, 그쵸? 우리는 단의 크기가 동일한 다단 레이아웃를 갖게 되었고, 단의 높이가 모두 같습니다. 이렇게 된 까닭은 (flex container의 자식인) flex item에 주어진 기본값이 이와 같은 일반적인 문제를 해결하도록 설정되었기 때문입니다. 관련 내용은 나중에 추가합니다.

**참고:** 인라인 항목을 flexbox로 취급해 레이아웃하길 희망한다면 `display` (en-US) 속성값을 `inline-flex`로 지정할 수도 있습니다.

flex 모델의 측방
-----------

요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.

![flex_terms.png](/ko/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png)

* **`기본 축`** (`main axis`)
 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다(예: 페이지를 가로지르는 행 또는 페이지 밑으로 쌓이는 열). 이 기본 축의 시작과 끝을 일컬어 **main start**과 **main end**라고 합니다.
* **`교차축`** (`cross axis`)
 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 **cross start**과 **cross end**라고 합니다.
* `display: flex`이 설정된 부모 요소(우리 예제에서 `<section>`이 해당)를 일컬어
 **`flex container`** (`flex container`)
 라고 합니다.
* flex container 내부에 flexbox로 레이아웃되는 항목을 일컬어
 **`flex item`** (`flex items`)
 이라고 합니다(우리 예제에서 `<article>` 요소가 해당됩니다).

후속 절을 진행할 때 이러한 용어를 명심하길 바랍니다. 사용 중인 어떤 용어에 대해 혼란스러워지면 언제든지 다시 참조할 수 있습니다.

행 또는 열?
-------

flexbox는 기본 축이 진행되는 방향(자식 flexbox들이 컨테이너 내부에 배치되는 방향)을 지정하는 `flex-direction` 속성을 제공합니다. 기본값으로 이것은 `row`로 설정되어 브라우저의 기본 언어가 작동하는 방향(영어 브라우저의 경우 왼쪽에서 오른쪽)을 따라 일렬로 배치됩니다.

다음 선언문을 `<section>` 규칙에 추가하세요:

```css
flex-direction: column;
```

이로써 항목 무리를 열 레이아웃으로 되돌려 놓는걸 확인하게 된다. 해당 항목들은 어떤 내용의 CSS를 추가하기 이전 상황과 유사하다. 진도를 더 나가기 전에 동 선언문을 예제에서 삭제하십시오.

**참고:** 당신은 `row-reverse`와 `column-reverse` 속성값을 사용하여 역방향으로 배치할 수 있습니다. 이들 값으로도 실험해보십시오!

접기
--

당신의 레이아웃에 너비 또는 높이가 고정 크기를 갖고 있어 생기는 한 가지 문제는 결국 flexbox 자식 요소가 컨테이너에서 대열이탈하면서 레이아웃이 깨진다는 것입니다. 우리가 제시하는 flexbox-wrap0.html 예제를 확인하고 난 뒤 라이브 보기를 시도하세요(이 예제를 따라해보고 싶다면 이제 이 파일의 사본을 내려받으세요):

![](/ko/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example3.png)

여기서 우리는 자식들이 정말로 소속 컨테이너에서 이탈하는 모습을 확인할 수 있습니다. 이것을 해소할 수 있는 한 가지 방법은 다음 선언을 `<section>` 규칙 부분에 추가하면 됩니다:

```css
flex-wrap: wrap;
```

또한, 다음 선언문을 `<article>` 규칙 부분에 추가해보세요:

```css
flex: 200px;
```

지금 시도해보십시오. 이 규칙이 포함되면 레이아웃이 훨씬 더 나아 보입니다:

![](/ko/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example4.png)우리는 이제 여러 행을 갖게 되었다. 많은 flexbox 자녀들이 합당하다 싶게 각 행마다 (분배되어) 알맞게 맞춰졌습니다. 대열이탈된 것들은 다음 행으로 넘어갑니다. 아티클 요소에 `flex: 200px` 선언이 지정되었다는 의미는 각 요소에 적어도 200px 너비가 지정되었다는 의미이다. 우리는 나중에 이 속성에 대해 더 자세히 논의할 겁니다. 마지막 행에 있는 마지막 몇몇 자식들의 각 너비가 더 연장되면서 전체 행이 마찬가지로 채워진 것을 볼 수 있습니다.

하지만 할 수 있는 게 더 있습니다. 우선, `flex-direction` 속성값을 `row-reverse`로 변경해 보십시오. 이제 여러 행 레이아웃을 보유한 것은 마찬가지지만, 브라우저 창의 반대쪽 구석에서 시작하여 역방향 대열이 된 것이 확인될 겁니다.

flex-flow 약칭
------------

이 시점에서 `flex-direction`와 `flex-wrap` — `flex-flow`를 대신하는 약칭이 존재한다는 점을 언급할 가치가 있다. 예를 들어, 여러분은 다음을

```css
flex-direction: row;
flex-wrap: wrap;
```

다음으로 대체할 수 있다.

```css
flex-flow: row wrap;
```

flex item의 flex 크기 조정
---------------------

이제 첫 번째 예제로 복귀해서, 우리가 어떻게 flex item의 비율을 조절할 수 있는지 살펴봅시다. flexbox0.html사본을 브라우저 탭으로 열거나 flexbox1.html 사본을 새로운 출발점으로 삼으세요.(라이브 참조).

첫째, 당신의 CSS 파일 하단에 다음 규칙을 추가하십시오:

```css
article {
  flex: 1;
}
```

이것은 각 flex item이 기본 축을 따라 남은 공간을 어느 정도나 점유할지를 결정하는 단위가 없는 비율 값입니다. 이 경우, 우리는 각각의 `<article>` 요소에 1의 값을 부여하고 있는데, 이는 패딩과 여백이 지정된 이후 남은 여분의 공간을 모두 동등한 크기로 점유하게 된다는 의미입니다. 그것은 비율이며, 각 flex item에 400000의 값을 부여하면 정확히 동일한 효과가 있음을 의미합니다.

이제 이전 규칙 아래에 다음 규칙을 추가합시다.

```css
article:nth-of-type(3) {
  flex: 2;
}
```

이제 새로 고침할 때, 세 번째 `<article>`이 다른 두 개보다 사용 가능한 너비의 두 배나 많이 점유한다는 것을 알 수 있습니다. 말하자면 현재 총 4개의 비례 단위가 있는 겁니다. 처음 두 개의 flex item은 각각 하나로 구분되어 사용 가능한 공간의 1/4을 차지합니다. 세 번째 것은 두 개의 단위(2배율)를 차지하기 때문에 사용 가능한 공간의 2/4를 점유합니다(또는 1/2).

또한 flex 값 내에서 최소 크기 값을 지정할 수 있습니다. 다음과 같이 문서 부분의 기존 규칙을 업데이트해 보십시오.

```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}
```

이것은 기본적으로 "각 flex item은 먼저 사용 가능한 공간에서 200px를 부여받습니다. 그 후, 나머지 사용 가능한 공간은 비례 단위에 따라 분배됩니다." 새로 고침을 해보면 공간 배분 방식이 달라진 것이 확인될 겁니다.

![](/ko/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example1.png)

flexbox의 실제 값은 flex성/반응성에 포함되어 있다고 볼 수 있습니다. 다시 말해 브라우저 창의 크기를 재조정하거나 다른 `<article>` 요소를 추가하더라도 레이아웃이 계속 정상적으로 작동합니다.

flex: 약칭 對 정식 명칭
----------------

`flex` 최대 세 가지 서로 다른 값을 지정할 수 있는 약칭 속성입니다.

* 단위없는 비례 값은 우리가 위에서 논의한 바 있습니다. 단위없는 비례 값은 `flex-grow`라는 정식 명칭 속성을 사용하여 개별적으로 지정할 수 있습니다.
* 두 번째 단위없는 비례 값인 `flex-shrink`는 flex item이 컨테이너에서 넘칠 때(대열이탈) 존재를 드러냅니다. 이 값은 컨테이너 대열이탈을 방지하기 위해 넘치는 양을 각 flex item의 크기에서 어느 정도나 뺏어올지를 지정합니다. 이 값은 꽤 고수준의 flexbox 기능이며, 우리는 이 문서에서는 추가 내용을 다루지 않겠습니다.
* 위에서 논의했던 최소 크기 값입니다. 최소 크기 값은 `flex-basis`라는 정식 명칭 값을 사용하여 개별적으로 지정될 수 있습니다.

우리는 꼭 사용해야 할 경우가 아니라면(예를 들어, 이전 설정을 재정의하는 등) flex 속성에 정식 명칭을 사용하지 말라고 권고합니다. 정식 명칭의 사용은 추가 코드 작성이 많아 질뿐만 아니라 다소 혼란스러울 수도 있습니다.

수평 및 수직 정렬
----------

또한 flexbox 기능을 사용하여 기본 축 또는 교차축을 따라 flex item을 정렬할수 있습니다. 이 기능은 새로운 예제인 flex-align0.html을 통해 살펴보자(라이브로도 보세요). flexbox가 우리는 깔끔한 flex형 단추/툴바로 바뀌게될 겁니다. 지금 당장은 몇몇 단추들이 왼쪽 상단 모서리에 몰린 상태의 수평 메뉴 표시줄이 보입니다.

![](/ko/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example5.png)

우선 이 예제의 사본을 취득합니다.

이제 예제의 CSS의 맨 아래에 다음 내용을 추가하세요:

```css
div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
```

페이지를 새로 고치면 버튼들이 수평 및 수직으로 중심이 잘 맞춰져 있음을 알 수 있습니다. 우리는 두 가지 새로운 속성을 통해 이 작업을 수행했습니다.

`align-items` (en-US) 속성은 flex item이 교차축 어디에 놓일 지를 제어합니다.

* 이 속성값은 기본값으로 `stretch`입니다. 이 값은 교차축 방향으로 부모 요소를 채우기 위해 모든 flex item을 연장합니다. 부모가 교차 축 방향으로 고정폭이 주어지지 않았다면 모든 flex item이 최장 항목만큼 길어집니다. 이런 방식으로 우리의 첫 번째 예제가 기본값으로 같은 높이의 열을 얻게 된 것입니다.
* 우리가 위의 코드에서 사용한 `center` 값은 항목 무리가 자기들 고유의 면적를 유지하는 동시에 교차축을 따라 중심에 놓이게 만듭니다. 그런 까닭에 현재 예제 속 버튼이 수직으로 중심에 놓여있습니다.
* 또한 교차축의 시작과 끝에 맞춰 모든 항목을 정렬하게 해주는 `flex-start`와 `flex-end`와 같은 값도 가질 수 있습니다. 자세한 내용은 `align-items` (en-US)을 참조하십시오.

`align-self` (en-US) 속성을 단추에 적용함으로써 flex item에 속한 개별 항목에 대한 `align-items` (en-US)동작을 재지정할 수 있습니다. 예를 들어 다음을 CSS에 추가해보세요:

```css
button:first-child {
  align-self: flex-end;
}
```

이것이 어떤 효과를 미치는지 한번 보고, 다 보았다면 다시 제거하세요.

`justify-content`는 flex item 무리가 기본 축 상 어디에 놓이는지를 제어합니다.

* 기본값은 `flex-start`이며, 이는 모든 항목이 기본 축의 시작 부분에 놓이도록 만듭니다.
* 당신은 `flex-end`를 사용하여 항목 무리를 기본 축의 가장자리에 놓이도록 만들 수도 있습니다.
* `center`는 `justify-content`를 대체할 수 있는 값으로 flex item 무리를 기본 축의 중심에 놓이도록 만들 겁니다.
* 우리가 위에서 사용했던 값인 `space-around`는 유용합니다. 모든 항목을 기본 축을 따라 고르게 분배하고 양쪽 끝에 약간의 공간도 남겨 놓습니다.
* 그 외에도 `space-between`이라는 값도 있습니다. 이는 `space-around`와 매우 흡사하다. 다만 이것은 양쪽 끝에 공간을 남기지 않습니다.

우리는 진도를 더 나가기 전에 여러분이 이들 값을 가지고 어떻게 작동하는지 시험해보라고 권장하고 싶습니다.

flex item 순서 정하기
----------------

flexbox에는 소스 순서에 영향을 미치지 않고 flex item의 레이아웃 순서를 변경하는 기능도 있습니다. 이는 전통적인 레이아웃 메서드로는 불가능했던 내용입니다.

이를 위한 코드는 간단합니다: 당신의 버튼바 예제 코드에 다음과 같은 CSS를 추가해 보십시오:

```css
button:first-child {
  order: 1;
}
```

페이지를 새로 고치면 이제 "Smile" 버튼이 기본 축의 끝으로 이동한 것이 확인될 겁니다. 어떻게 이런 식으로 작동하는지 좀 더 상세히 얘기해 보겠습니다:

* 기본값으로 모든 flex item들은 `order` 값이 0입니다.
* 순위값이 높은 flex item들은 디스플레이 순서상 순위값이 낮은 항목들보다 나중에 나타납니다.
* 순위값이 동일한 항목들은 소스 순서대로 나타납니다. 따라서 4개 항목의 순서값이 각기 2, 1, 1, 0로 설정된 경우 표시 순서는 제4, 제2, 제3, 제1 순이 됩니다.
* 제 3항목은 동일한 순서값을 가지고 있지만, 소스 순서 상 제 2항목 뒤에 있기 때문에 제 2 항목 뒤에 나타납니다.

당신은 0 지정 항목보다 일찍 항목을 표시하도록 음수 순서 값을 설정할 수 있습니다. 예를 들어, 다음 규칙을 사용하여 "Blush" 버튼을 기본 축의 시작 부분에 표시할 수 있습니다:

```css
button:last-child {
  order: -1;
}
```

중첩된 flexbox box
---------------

flexbox를 사용하여 꽤 복잡한 레이아웃을 만들 수 있습니다. flex item을 flex container로 설정해도 전혀 문제없습니다. 그렇게 되면 그 컨테이너의 자녀가 flexbox처럼 배치됩니다. complex-flexbox.html를 찾아보세요. (라이브로도 보세요).

![](/ko/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example7.png)

이를 위한 HTML은 상당히 간단합니다. 세 개의 `<article>`를 포함하는 `<section>` 요소가 있습니다. 세 번째 `<article>`은 세 개의 `<div>` (en-US)를 포함하고 있습니다. :
```

section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button
```

앞의 레이아웃에 사용했던 코드를 살펴봅시다.

먼저 `<section>`의 자식들을 flexbox로 취급해 배치하였습니다.

```css
section {
  display: flex;
}
```

다음으로 `<article>` 무리 자체에 대해 약간의 flex 값을 설정하였습니다. 여기서 두 번째 규칙에 주목하십시오. 우리는 세 번째 `<article>`이 자기 자식들을 flex item처럼 배치하도록 설정하고 있습니다. 그러나 이번에는 열처럼 배치하고 있습니다.

```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}
```

다음으로 첫 번째 `<div>` (en-US)를 선택합니다. 우리는 먼저 선택된 요소에 100px의 최소 높이를 효과적으로 주기 위해 `flex:1 100px;`을 사용합니다. 그리고 나서 우리는 그것의 자식들을 (`<button>` 요소 무리를) flex item처럼 배치하도록 설정했습니다. 여기서 우리는 그것들을 줄 바꿈 행에 배치하고, 우리가 앞서 본 개별 버튼 예제에서 했던 것처럼 사용 가능한 공간의 중심에 정렬합니다.

```css
article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}
```

마지막으로, 우리는 버튼에 약간의 크기를 설정하되, 다소 흥미롭게도 1 auto라는 flex 값을 부여합니다. 이것은 매우 흥미로운 효과를 지니게 되는데, 브라우저 창의 폭을 조정해 보면 확인됩니다. 버튼은 최대한의 공간을 점유할 뿐만아니라 동일 선상에 가능한 한 많은 요소를 놓으려고 합니다. 그러나 해당 요소들이 더 이상 동일 선상에 안착할 수 없을 경우 새로운 라인으로 밀려납니다.

```css
button {
  flex: 1 auto;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}
```

크로스 브라우저 호환성
------------

flexbox 지원은 Firefox, 크롬, 오페라, 마이크로소프트 에지 및 인터넷 익스플로러 11, 안드로이드 및 iOS 최신 버전 등 대부분의 신형 브라우저에서 사용할 수 있습니다. 그러나 flexbox를 지원하지 않는 (또는 지원하지만, 실제로 구식 버전의 flexbox를 지원하는) 구형 브라우저 사용자가 여전히 존재한다는 것을 알아야 합니다.

여러분이 단지 기술을 익히고 실험할 뿐이라면 호환성 문제는 그다지 중요하지 않습니다; 그러나 만약 여러분이 실제 웹사이트에서 flexbox의 사용을 고려하고 있다면, 여러분은 (구형 브라우저에서) 테스트를 수행해야 하고, 최대한 다양한 브라우저 사용자들이 수용할만한 사이트 방문 경험을 보장할 필요가 있습니다.

flexbox는 몇몇 CSS 기능보다 다소 까다롭습니다. 예를 들어 브라우저에 CSS 그림자 기능이 빠진 경우 해당 사이트을 여전히 사용할 수 있습니다. 그러나 flexbox 기능을 지원하지 않을 경우 레이아웃이 완전히 깨져서 사용할 수 없게 됩니다.

크로스 브라우저 테스트 (en-US) 단원에서 크로스 브라우저 지원 문제를 극복하기 위한 전략에 대해 논의합니다.

요약정리
----

이로써 flexbox의 기본 안내서를 마감합니다. 재미있는 경험이었기 바라며, 당신이 학습 진도를 더해 갈수록 flexbox를 자유자제로 다룰 수 있게 될 겁니다. 다음으로 CSS 레이아웃의 또 다른 중요한 측면인 CSS grid를 살펴볼 것입니다.

* 이전
* Overview: CSS layout
* 다음


일반 대열 - Web 개발 학습하기

일반 대열
=====

* 이전
* Overview: CSS layout
* 다음

이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.

|  |  |
| --- | --- |
| 선결 사항: | HTML의 기초 (HTML에 대한 소개)와 CSS 작동 방식에 대한 개념(CSS 소개를 공부하세요.) |
| 목표: |
 변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는
 방법을 설명하기
  |

이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.

서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.

기본값으로 요소들은 어떻게 배치되는가?
---------------------

우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.

기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. 인라인 요소는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 `display: block;` 속성값이나 양쪽의 성격이 혼합된 `display: inline-block;`을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.

앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 쓰기 모드 (en-US)(*initial*: horizontal-tb)에 기초해 *블록 flow 방향*에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.

인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.

두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.

이 모든 것을 설명하는 간단한 예를 살펴봅시다.

```html
<h1>기본 문서 flow</h1>

<p>
  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
  자리합니다.
</p>

<p>
  기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의
  최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리
  너비 및 높이입니다.
</p>

<p>
  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
  구분됩니다. 두게의 여백이 아니라.
</p>

<p>
  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
  됩니다. 인라인 요소가 오버플로할 경우
  <span
 >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
    접혀들어갑니다.)</span
 >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
  것처럼: <img src="long.jpg" />
</p>
```

```css
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}
```

요약정리
----

이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.

* 이전
* Overview: CSS layout
* 다음