CSS 이론

dongmo jeon·2025년 5월 10일

아래 HTML 문서를 조건에 맞게 디자인하세요.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML 실습</title>
    <!-- style.css 파일과 연결 -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- 이곳에 작성하세요. -->
    <!-- ozcodingschool 사이트로 이동하는 링크 -->
    <a href="https://ozcodingschool.com/" id="oz-link">
      <h1 class="daily-title">오늘의 할 일</h1>
    </a>
    <ul>
      <li class="task">HTML 예습하기</li>
      <li class="task">MDN 사이트 접속하기</li>
      <li class="task">w3school 사이트 접속하기</li>
      <li class="task" id="challenge-task">실습 도전하기</li>
    </ul>
  </body>
</html>

적용할 CSS 속성

<link rel="stylesheet" href="styles.css" /> 과제시작 전 체크!
- 이 태그가 무슨 뜻인지 알아보고 css파일을 추가하세요!

배경색은 #f4f4f4로 지정하세요.
폰트는 Arial로, Arial이 없는 경우 sans-serif로 지정하세요.
제목(오늘의 할 일)이 하이퍼링크라서 자동으로 적용된 스타일(파란색 글씨, 밑줄)을 제거하세요.
제목의 글자색은 #3498db로 지정하세요.
할 일 목록의 글자 크기는 18px, 아래 마진(margin)을 10px로 지정하세요.
‘실습 도전하기’만 bold처리 하세요.

바탕화면에 Beginner-track 폴더에 Beginner.html 파일을 생성해 두었었다. 이 파일에다가 실습을 해보도록 하겠다.

<link rel="stylesheet" href="styles.css" />라고 명시되어 있으므로 styles.css 파일을 생성했다. rel은 relationship의 줄임말로 작성중인 html 문서와 styles.css 파일의 관계를 뜻한다.

styles.css파일로 이동해서 나머지 미션을 수행해보도록 하겠다.

배경색이나 폰트는 <body>태그에 작성하면 된다. background-color에 배경색 #f4f4f4를 입력하고 font-family 속성에 두가지 폰트가 입력되었는데 문서를 보는 사용자의 컴퓨터가 Arial 폰트가 있다면 그대로 보여주고 만약 없다면 sans-serif 폰트를 보여주라는 뜻이다.