스타일 가이드

이 글은 Jekyll로 운영하는 GitHub Pages 블로그의 스타일 가이드입니다. 오랜만에 글을 쓸 때마다 서식이 뒤섞이는 걸 막기 위해, 제목·본문·코드·인용문 등 기본 규칙을 한곳에 기록해 두었습니다. 아래 예시는 영어 UI 기준으로 작성했지만, 한국어 글에도 같은 구조를 그대로 적용할 수 있습니다.

1. Code

@RestController
@RequiredArgsConstructor
public class MemberController {
 
    private final MemberService memberService;
 
    @GetMapping("/members")
    public List<MemberResponseDto.ListDto> getMemberList(){
        return memberService.findAll();
    }
 
    @PostMapping("/members")
    public Long createMember(@RequestBody MemberRequestDto.CreateDto createDto){
        return memberService.createMember(createDto.getName(), createDto.getAge());
    }
}

import { evaluate } from '@user/opensource-library';

evaluate('[1, 2, 3] |> map(_ + 1) |> sum');

evaluate('puts("Hello, world")', { puts: console.log.bind(console) });

Vivamus velit nulla, consectetur vel velit at, aliquet sodales arcu. Duis laoreet risus sapien. Praesent vestibulum leo et neque varius, nec sagittis velit rutrum. Etiam scelerisque id lorem elementum tempus. Curabitur eget orci mollis, efficitur ligula id, vulputate tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus dolor non hendrerit placerat. Nam erat metus, malesuada pharetra ultricies sed, consequat ut nisi.

<?php

$solution = file_get_contents(__DIR__ . '/solution.openai');

proxy_run($solution, cwd: __DIR__);

proxy_test($solution);

evaluate('1.. |> filter(_ % 2) |> take(3);');

#[macro_export]
macro_rules! T {
    [INT] => { $crate::lexer::TokenKind::Integer };
    [+]   => { $crate::lexer::TokenKind::Plus };
    [||]  => { $crate::lexer::TokenKind::PipePipe };
    // ..
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius cursus commodo. Aliquam nec sem efficitur, efficitur leo at, eleifend nibh. Vestibulum ut malesuada odio, vel lacinia magna. Nullam eget lobortis dui. Integer sollicitudin urna sit amet magna consectetur iaculis. Sed ac tristique tellus. Aenean at auctor risus. Ut a urna venenatis, tempor purus vitae, sollicitudin mauris. In finibus, ante eu tempor efficitur, est orci vehicula nulla, vel scelerisque justo magna molestie ligula. Mauris ac risus in tortor ultrices laoreet sit amet nec nibh. Quisque risus diam, blandit quis euismod dignissim, lobortis eu ex. Proin varius, enim vehicula sollicitudin bibendum, massa lectus pretium eros, vel congue quam justo sit amet tortor.

2. Links

3. Images

Nulla eu libero ut dui volutpat luctus. Nulla tempor mi at venenatis commodo. Nulla eget posuere ligula. Duis varius quis urna in efficitur. Vivamus rhoncus neque ac justo commodo, vel commodo purus laoreet. Mauris efficitur vehicula sem, ut lobortis mauris consequat non. Donec condimentum sem nunc, imperdiet ornare purus hendrerit vitae. Suspendisse bibendum scelerisque tempus. Quisque nisl lectus, aliquam sed sem ut, venenatis ultricies dui.

4. Videos

5. Lists

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis nisi id massa aliquam accumsan. Donec ac massa non orci placerat aliquet eget in erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Fusce quis nulla viverra, tincidunt est non, tristique orci. Sed dictum elit eu egestas consequat. Aliquam pellentesque lectus quis leo eleifend porttitor. Duis consectetur erat quis justo molestie ultrices.
3. Phasellus molestie justo in vestibulum facilisis. Ut id dui eleifend, auctor tellus eu, vestibulum ante. Aenean at ex pretium, mattis metus sit amet, luctus ex. Proin congue arcu eu ultricies iaculis.
4. Ut gravida enim sit amet condimentum blandit. Nullam et ligula luctus, vulputate sem vel, pharetra nulla. Cras at lacus at nulla tincidunt luctus vitae a tellus. Nullam quis dui vitae elit congue convallis eget nec nibh.
5. In nec mi non eros malesuada sollicitudin. Proin sed neque non justo efficitur suscipit. Cras accumsan odio ut nisl faucibus varius sit amet quis lacus. Nunc id nibh vehicula, iaculis mauris ut, maximus lorem.

• Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Praesent quis nisi id massa aliquam accumsan. Donec ac massa non orci placerat aliquet eget in erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Fusce quis nulla - viverra, tincidunt est non, tristique orci. Sed dictum elit eu egestas consequat. Aliquam pellentesque lectus quis leo eleifend porttitor. Duis consectetur erat quis justo molestie ultrices.
• Phasellus molestie justo - in vestibulum facilisis. Ut id dui eleifend, auctor tellus eu, vestibulum ante. Aenean at ex pretium, mattis metus sit amet, luctus ex. Proin congue arcu eu ultricies iaculis.
• Ut gravida enim - sit amet condimentum blandit. Nullam et ligula luctus, vulputate sem vel, pharetra nulla. Cras at lacus at nulla tincidunt luctus vitae a tellus. Nullam quis dui vitae elit congue convallis eget nec nibh.
• In nec mi - non eros malesuada sollicitudin. Proin sed neque non justo efficitur suscipit. Cras accumsan odio ut nisl faucibus varius sit amet quis lacus. Nunc id nibh vehicula, iaculis mauris ut, maximus lorem.

6. Blockquotes

If a tree falls in the woods, does it make a sound? If a pure function mutates some local data in order to produce an immutable return value, is that ok?

7. Tables

8. Iframes

See the Pen Waves Hello: css only by Amit (@ghaste) on CodePen.