코드 그라데이션

3. CSS 기본 퀴즈 본문

Front/Mega-CSS

3. CSS 기본 퀴즈

완벽한 장면 2023. 5. 13. 01:19

퀴즈 1.

 

 

코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>낚시게임</title>
  <style>
    #container {  /* 내용 전체를 감싸는 영역 */
      width:600px;  /* 너비 600 픽셀 */
      margin:20px auto;  /* 내용이 화면 중앙에 오도록 지정 */
    }
    h1 {
      display: inline-block;   /* 글자 부분에만 배경 색이 채워지도록 지정 */   
      background-color:#0404aa;  /* 배경 색 - 짙은 파란색 */
      color:#fff;  /* 글자 색 - 흰색 */
    }
    .accent {
      font-weight: bold;  /* 글자 굵게 */
      color:red;  /* 글자 색 - 빨간색 */
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>낚시게임</h1>    
    <p>우선 랜덤 값을 받아서 물고기 3마리를 배치한다. 그리고 <span class="accent">낚시꾼이 캐스팅을</span>한다.</p>
    <p>캐스팅을 할 때는 예를 들어<sup>(0이상, 4이하)</sup> 로 하여야 한다.. <br>
      그리고 나서 위 아래 왼쪽 오른쪽으로 이동을 해서 물고기를 다잡으면 됩니다.
    </p>
  </div>
</body>
</html>
728x90

'Front > Mega-CSS' 카테고리의 다른 글

6. 박스 모델 (1) 블록 레벨 요소, 인라인 레벨 요소  (0) 2023.05.13
5. 목록 스타일, 표 스타일  (1) 2023.05.13
4. 텍스트 스타일  (0) 2023.05.13
2. 기본 선택자  (0) 2023.05.13
1. 스타일과 스타일 시트  (0) 2023.05.13
'Front/Mega-CSS' Related Articles more
Comments