제이코딩

제이코딩 - 코딩 교육

인포앤북(주) - IT 도서

로그인 회원가입

02. 박스 모델

2-6. 프로젝트 2

PROJECT. 웹 소개 페이지

다음은 웹 소개 페이지를 CSS로 꾸민 것입니다. 밑줄을 채워 보세요.

브라우저 실행 결과

HTML 소스

<style>
h3 {
        : solid 10px blue;        /* 왼쪽 경계선 */
        : 10px;                     /* 왼쪽 패딩 */
}
ul {
: 30px;                 /* 패딩 */
: #eeeeee;    /* 배경 색상 */
        : solid 1px black;              /* 경계선 */
}
li {
: 10px; /* 위쪽 마진 */
}
</style>
<body>
<h3>웹 소개</h3>
<ul>
<li>웹(Web)은 거미줄을 의미하는데 WWW(World Wide Web)의 약어입니다.</li>
<li>인터넷과 웹 브라우저를 통하여 글자, 이미지 등을 사용자에게 제공합니다.</li>
<li>웹 브라우저를 통하여 서로 떨어져 있는 사용자 상호 간에 소통할 수 있게 해줍니다.</li>
<li>웹과 관련된 직업에는 웹 기획자, 웹 디자이너, 웹 퍼블리셔, 웹 프로그래머가 있습니다.</li>
</ul>
</body>

(1) border-left
(2) padding-left
(3) padding
(4) background-color
(5) border
(6) margin-top

PROJECT. 강좌 배너 만들기

다음은 강좌 배너 페이지를 CSS로 꾸민 것입니다. 밑줄을 채워 보세요.

브라우저 실행 결과

HTML 소스

<style>
* {
: 0; /* 마진 초기화 */
}
div {
: 300px; /* 너비 */
: solid 2px #aaaaaa;              /* 경계선 */
: 30px; /* 패딩 */
: 15px; /* 박스 모서리 */
: 20px 0 0 20px; /* 마진 */
}
h3 {
: solid 1px #cccccc;       /* 하단 경계선 */
: 8px; /* 하단 패딩 */
}
p {
: 180%; /* 줄 간격 */
border-bottom: dotted 1px #cccccc;    /* 하단 점선 경계선 */
padding: 10px 0; /* 패딩 */
}
h4 {
: right; /* 우측 정렬 */
: normal; /* 글자 기본 굵기 */
margin-top: 10px; /* 상단 마진 */
}
a: { /* 마우스 포인터를 올렸을 때 */
color: orange;
}
</style>
<body>
<div>
<h3>HTML/CSS 강좌</h3>
<p>HTML/CSS을 이용하면 텍스트, 이미지, 비디오, 오디오 등으로 웹 페이지를 제작할 수 있습니다.</p>
<h4><a href="#">바로가기 >></a></h4>
</div>
</body>
</html>

(1) margin
(2) width
(3) border
(4) padding
(5) border-radius
(6) margin
(7) border-bottom
(8) padding-bottom
(9) line-height
(10) text-align
(11) font-weight
(12) hover

PROJECT. 우대 정보 만들기

다음은 우대 정보 페이지에서 링크된 글자를 CSS로 꾸민 것입니다. 밑줄을 채워 보세요.

브라우저 실행 결과

HTML 소스

<style>
h3 {
: solid 10px green;    /* 좌측 경계선 */
: 20px;               /* 좌측 패딩 */
}
ul {
: solid 1px #cccccc;        /* 경계선 */
: #eeeeee;        /* 배경 색상 */
: 30px;                    /* 패딩 */
: 10px;              /* 모서리 둥글게 */
}
li {
: 10px;                 /* 상단 마진 */
: 150%;                /* 줄 간격 */
}
</style>
<h3>우대 정보</h3>
<ul>
<li>연령에 따른 우대 (나이 확인이 가능한 신분증 또는 서류 제시)<br>
- 경로 : 만 65세 ~<br>
- 청소년 : 만 13세 ~ 만 18세
</li>
<li>장애인 우대 (장애인등록증 제시) 우대가격<br>
- 1일 이용권 우대가로 구입 가능<br>
- 장애의 정도가 심한 장애인 : 본인+동반 1인
</li>
<li>국가유공자 우대 (증명서류 제시) 파크이용권 가격 보기<br>
- 본인 + 동반 1인, 1일 이용권 50% 우대가로 구입 가능<br>
</li>
</ul>

(1) border-left
(2) padding-left
(3) border
(4) background-color
(5) padding
(6) border-radius
(7) margin-top
(8) line-height