728x90
반응형
문제 1
다음 코드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.
<body>
<div id="container">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</div>
</body>
▶ 코드
<style>
body {
margin: 0;
background-image: url(../images/bg1.jpg);
height: 200px;
}
h1 {
font-size: 20px;
}
p {
line-height: 25px;
font-size: 16px;
}
h1, p {
color: white;
width: 80%;
}
#container {
background-color: gray;
padding: 10px;
height: 100%;
}
</style>
문제 2
다음 코드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.
<body>
<div class="container">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</div>
</body>
▶ 코드
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
background-color: black;
}
h1 {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 25px;
}
h1, p {
color: white;
}
</style>
문제 3
다음 코드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.
- 문서 전체의 배경색을 #02233b로 지정합니다.
- #container의 배경색은 흰색으로 지정합니다.
- #container의 배경 이미지는 반복하지 않고 오른쪽 아래에 고정합니다.
- <h1> 태그를 사용한 제목의 배경색을 #004344로 지정하고, 글자색은 흰색으로 바꿉니다.
<body>
<div id="container">
<h1>대학언론사 수습기자 모집</h1>
<h2>신입생 여러분을 기다립니다</h2>
<article>
<h3>모집분야</h3>
<ul>
<li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
<li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
<li>엔지니어(0명) : 라디오 방송 녹음 및 편집 </li>
</ul>
<h3>혜택</h3>
<ul>
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ul>
</article>
</div>
</body>
▶ 코드
<style>
body {
margin: 0;
background-color: #02233b;
}
#container {
margin:0 auto;
width:600px;
height:700px;
border:1px dotted gray;
padding:20px;
background: url(../images/mic.png) no-repeat right bottom;
background-color: white;
}
img {
margin:30px 10px 30px 180px;
}
h1 {
text-align:center;
padding:20px;
background-color: #004344;
color: white;
}
h2 {
text-align:center;
font-style:italic;
margin-bottom:50px;
}
h3 {
color:#cf3b00;
}
ul{
margin:20px;
list-style-type:none;
}
li {
line-height:30px;
}
</style>728x90
반응형
'HRD_훈련 > 실습' 카테고리의 다른 글
| [CSS] 선택자 실습 (29일차) (0) | 2023.06.26 |
|---|---|
| [CSS] 컬러 실습 (29일차) (0) | 2023.06.26 |
| [CSS] 스크립트 onclick 실습 (28일차) (0) | 2023.06.23 |
| [CSS] Postion 실습 (27일) (0) | 2023.06.22 |
| [CSS] Float 실습 (27일차) (0) | 2023.06.22 |