09. 배경 이미지 속성을 사용한 문제 II

728x90

09. 배경 이미지 속성을 사용한 문제 II

다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.

(문서 안에 이미지 파일이 있다고 가정한다.)

1. 문서 전체의 배경색을 #02233b로 지정한다.

2. #container 의 배경색은 흰색으로 지정한다.

3. #container 의 배경 이미지는 images\mic.png로 지정하는데, 배경 이미지는 반복하지 않고 오른쪽 아래에 고정한다.

4. <h1> 태그를 사용한 제목의 배경색을 #004344로 지정하고, 글자색은 흰색으로 바꾼다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">    
  <title>CSS 문제 9</title>
  <style>   
  	
    // 코드를 작성하세요
    
    #container{
      margin:0 auto;	
      width:600px;
      height:700px;
      border:1px dotted gray;
      padding:20px;
    }
    img {	
      margin:30px 10px 30px 180px;
    }
    h1 {
      text-align:center;
      padding:20px;
    }
    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>
</head>
<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>
</html>

결과 화면

A. 해설

1. 문서 전체의 배경색을 #02233b로 지정한다.

--> body 스타일에 background-color 속성으로 지정한다.

2. #container 의 배경색은 흰색으로 지정한다.

--> #container 에 background-color 속성으로 지정한다.

3. #container 의 배경 이미지는 images\mic.png로 지정하는데, 배경 이미지는 반복하지 않고 오른쪽 아래에 고정한다.

--> #container 에 url속성으로 연결하고, no-repeat 속성과 right bottom 속성으로 지정한다.

4. <h1> 태그를 사용한 제목의 배경색을 #004344로 지정하고, 글자색은 흰색으로 바꾼다.

--> h1 스타일에 background-color 속성과 color 속성을 사용하여 지정한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">    
  <title>CSS 문제 9</title>
  <style>   
    body {
      background-color:#02233b;
    }  
    #container{
      margin:0 auto;	
      width:600px;
      height:700px;
      border:1px dotted gray;
      padding:20px;
    }
    img {	
      margin:30px 10px 30px 180px;
    }
    h1 {
      background-color:#004344;
      color:white;
      text-align:center;
      padding:20px;
    }
    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>
</head>
<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>
</html>

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)

728x90

'💠문제 풀이 > CSS 문제 풀이' 카테고리의 다른 글

11. 구조 가상 클래스와 가상 클래스를 사용한 문제 (0)	2022.07.04
10. 구조 가상 클래스를 사용한 문제 (0)	2022.07.04
08. 배경 이미지 속성을 사용한 문제 I (0)	2022.05.27
07. 레이아웃 속성을 사용한 문제 (0)	2022.05.16
06. 레이아웃 속성과 여백 속성을 사용한 문제 (0)	2022.05.13