본문 바로가기
HTML/HTML,CSS Ex

수업중 예제

by 요리하다그만둠 2022. 6. 27.

/* 작성 조건)

1) 글꼴의 종류 : 나눔 명조

2) 글자의 크기 : 1em

3) 단어간 간격(단어간) : 0.5em

4) 글자간의 간격(자간) : 2px

5) 문장(줄)간의 간격 : 1.8em (줄간격이 출력 보기 화면과 맞지 않을 경우는 크기를 조절하십시오)

6) 첫 문단 들여쓰기 : 3em

7) 글자 색상 : Sienna

8) 문단(div)의 크기(너비 * 높이) : 800px * 260px

9) 문단 외곽선 굵기 : 4px

10) 문단 외곽선 색상 : RosyBrown

11) 문단 외곽선 형태 : 이중선(double)

12) 문단 배경색상 : Snow

13) 문단 내부 간격(외곽선과의 간격) - 상하/좌우 : 15px 20px */

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="학생" >
    <meta name="Author" content="대한민국 정부">
    <meta name="Keywords" content="대한민국 헌법 전문">
    <meta name="Description" content="대한민국 헌법 전문">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>대한민국 헌법 전문</title>
    <link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800&amp;subset=korean" rel="stylesheet">
    <style>
        div {
            font-family: Nanum Myeongjo;
            font-size: 1em;
            word-spacing: 0.4;
            letter-spacing: 2px;
            line-height: 1.8;
            text-indent: 3em;
            color : sienna;
            height: 260px;
            width: 800px;
            background-color: Snow;
            border : 4px double rosybrown;
            padding : 15px 20px 15px 20px
            
        }
    </style>
</head>

<body>
    <div>
        유구한 역사와 전통에 빛나는 우리 대한국민은 3·1운동으로 건립된 대한민국 임시정부의<br>
        법통과 불의에 항거한 4·19민주이념을 계승하고, 조국의 민주개혁과 평화적 통일의 사명에<br>
        입각하여 정의·인도와 동포애로써 민족의 단결을 공고히 하고, 모든 사회적 폐습과 불의를<br>
        타파하며, 자율과 조화를 바탕으로 자유민주적 기본질서를 더욱 확고히 하여 정치·경제·사회·<br>
        문화의 모든 영역에 있어서 각인의 기회를 균등히 하고, 능력을 최고도로 발휘하게 하며,<br>
        자유와 권리에 따르는 책임과 의무를 완수하게 하여, 안으로는 국민생활의 균등한 향상을 기<br>
        하고 밖으로는 항구적인 세계평화와 인류공영에 이바지함으로써 우리들과 우리들의 자손의 안<br>
        전과 자유와 행복을 영원히 확보할 것을 다짐하면서 1948년 7월 12일에 제정되고 8차에 <br>
        걸쳐 개정된 헌법을 이제 국회의 의결을 거쳐 국민투표에 의하여 개정한다.
    </div>
</body>

</html>
</head>
<body>
    
</body>
</html>