타이포그래피

프로그래머스는 NotoSansKR과 Inter를 각각 한/영 서체로 사용합니다. 그래픽 리소스 제작시 일관된 스타일을 위하여 가급적 두 서체를 이용하지만, 이 두 가지 서체만을 사용해서 모든 그래픽 리소스를 제작하지는 않습니다. 프로그래머스의 모든 그래픽 리소스에는 메시지에 전달을 위한 다양한 서체를 사용할 수 있습니다.

Display 서체를 설명하는 이미지

프로그래머스의 웹 어플리케이션에는 NotoSansKR과 Inter를 사용하지만, IE에서 일정 크기 이하의 서체 크기에는 한글 서체를 사용하지 않고, 시스템 서체를 사용합니다. 프로그래머스는 온라인 코드 에디터 또는 마크다운을 통한 코드를 표현해야 하는 경우가 많습니다. 코드를 표시하는 모노 타입 서체는 Hack을 사용합니다. 제목 서체는 Viewport의 넓이에 따라 서체의 크기가 조정되도록 디자인되었습니다.

제목 1
font-size: 40px;
line-height: 50px;
font-weight: 700;

솔직히, 내 알바 아니요.

Frankly, my dear, I don’t give a damn.

제목 2
font-size: 32px;
line-height: 46px;
font-weight: 700;

그가 절대 거절하지 못할 제안을 할 거야.

I’m going to make him an offer he can’t refuse.

제목 3
font-size: 26px;
line-height: 32px;
font-weight: 700;

토토, 우리는 더 이상 켄사스에 있는 것 같지 않아.

Toto, I’ve got a feeling we’re not in Kansas anymore.

제목 4
font-size: 20px;
line-height: 28px;
font-weight: 700;

엄마는 항상 인생을 초콜렛 상자와 같은 거라고 말씀 하셨어요. 그걸 집기 전에는 알 수 없는거라고.

Mama always said life was like a box of chocolates. You never know what you’re gonna get.

제목 5
font-size: 16px;
line-height: 24px;
font-weight: 400;
스카웃, 한가지 기술만 배운다면, 여러 사람들과 훨씬 더 잘 지낼 수가 있어. 입장을 바꿔서 생각하기 전에는 상대방을 진정으로 이해할 수 없다는 거야.
If you just learn a single trick, Scout, you'll get along a lot better with all kinds of folks. You never really understand a person until you consider things from his point of view.
제목 6
font-size: 14px;
line-height: 20px;
font-weight: 400;
카르페 디엠. 오늘을 즐기게. 삶을 특별하게 만들어봐.
Carpe diem. Seize the day, boys. Make your lives extraordinary.
문단
font-size: 16px;
line-height: 28px;
font-weight: 400;

캐서린에게. 여기 앉아서 나는 계속 당신에게 사과하고 싶은 일들에 관해 생각하고 있어. 우리가 서로에게 줬던 고통들에 대해. 내가 당신 탓으로 돌렸던 모든 것들. 난 그저 당신에게 미안하다고 말할 수 있었으면 한 거였는데... 난 앞으로도 당신을 늘 사랑할거야, 우린 함께 자랐으니까. 넌 지금의 내가 될 수 있도록 도와줬지. 그냥.. 네가 알아줬으면 좋겠어. 내 속에는 늘 네가 한 조각 있고.. 그리고 난 그게 너무 고마워. 네가 어떤 사람이 되건, 네가 세상 어디에 있건... 난 네게 사랑을 보낼게. 언제까지라도 너는 내 친구야. 사랑을 담아, 테오도르.

Dear Catherine I've been sitting here thinking about all the things I wanted to apologize to you for. All the pain we caused each other. Everything I put on you. Everything I needed you to be or needed you to say.. I'm sorry for that. I'll always love you, because we grew up together. And you helped make me who I am. I just wanted you to know. that there will be a piece of you in me, always. And I'm grateful for that. Whatever someone you become, wherever you are in the world... I'm sending you love. You're my friend to the end. Love, Theodore.

모노타입
import java.util.Arrays;

class Divisible {
  public int[] divisible(int[] array, int divisor) {
    //ret에 array에 포함된 정수중, divisor로 나누어 떨어지는 숫자를 순서대로 넣으세요.
    int[] ret = new int[나누어 떨어지는 숫자의 개수];
    return ret;
  }
  // 아래는 테스트로 출력해 보기 위한 코드입니다.
  public static void main(String[] args) {
    Divisible div = new Divisible();
    int[] array = {5, 9, 7, 10};
    System.out.println( Arrays.toString( div.divisible(array, 5) ));
  }
}

색상

모든 텍스트의 기본 색상은 $blue-grey-900를 사용합니다. 또한 안내의 의미를 담은 설명 텍스트, 행동을 유도하는 텍스트, 긍정적 또는 정답을 의미하는 텍스트, 부정적 또는 오답, 위험을 의미하는 텍스트, 등 상황에 맞는 색상을 사용합니다. 서체의 색상은 전체 색상 시스템과 동일 한 맥락을 공유합니다.

일반
  • $color-text--primary
  • #263238
보조
  • $color-text--secondary
  • #7890A0
긍정
  • $color-success
  • #4CAF50
부정
  • $color-danger
  • #F44336
TOP