[CSS] 블로그 포스트 스타일 0.2.1

<style>

    .in_post_style__src_box{

        font-family:"D2Coding", "나눔고딕코딩", "굴림", "Consolas", "sans-serif";

        border: solid 2px black;

        background-color:black;

        color:white;

        line-height:110%;

    }

    .in_post_style__src_box:before {

            content: "소스";

            padding: 2px;

            border-bottom: 2px solid black;

            display: block;

            color: white;

            background-color: gray;

    }

    .in_post_style__edit_box {

        font-family:"D2Coding", "나눔고딕코딩", "굴림", "Consolas", "sans-serif";

        border: solid 2px black;

    }

        .in_post_style__edit_box:before {

            content: "소스 입력";

            padding: 2px;

            border-bottom: 2px solid black;

            display: block;

            color: white;

            background-color: gray;

        }

    .in_post_style__print_box {

        border: solid 2px black;

        font-family: sans-serif;

    }

        .in_post_style__print_box:before {

            content: "웹 브라우저 출력";

            padding: 2px;

            border-bottom: 2px solid black;

            display: block;

            color: white;

            background-color: gray;

        }

    .in_post_style__tip_box {

        border: dashed;

        background-color: #c5c5c5;

        padding: 10px;

    }

</style>

.in_post_style__src_box 스타일

미리보기

.in_post_style__edit_box 스타일

미리보기

.in_post_style__print_box 스타일

미리보기

.in_post_style__tip_box 스타일

미리보기

간만에 생각이 나서 몇가지 추가해보았습니다.

소스코드에 알맞게 글자 간격이 균일한 폰트들을 우선 설정하도록 변경하였으며, 소스 라는 박스를 하나 추가하였습니다.

소스 박스는 일반적으로 소스 입력할 때 이용하기 위해서 제작하였습니다.

편하게 가져가서 이용해도 되며, 수정해서 이용하여도 상관 없습니다.

+ in_post_style__src_box클래스의 소스간의 글자 간격이 너무 넓어 좁혔습니다.