너와 나의 개발 고리

[HTML] 태그를 활용해서 HTML 코드로 작성해보기(문제 풀기) 본문

CSS _HTML_JavaScript/문제 풀이

[HTML] 태그를 활용해서 HTML 코드로 작성해보기(문제 풀기)

Oli-Viaaaa 2023. 7. 19. 23:18

문제 1. 태그를 적절히 사용해 다음 포스트잇 UI를 HTML코드로 작성하시오 (CSS는 제외)

 

 

문제 2.  태그를 적절히 사용하여 아래의 이미지와 같은 로그인 화면 UI를 HTML 코드로 작성해보시오(CSS 제외)

 

 

문제 3. 태그를 적절히 사용하여 아래의 이미지와 같은 위키백과 사이트의 목차를 HTML 코드로 작성해보시오

 

 

 

 

▼▼▼ 아래에 정답 있어요 ▼▼▼

 

 

문제 1번 풀이

더보기
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PostIt</title>
  </head>
  <body>
    <div>
        <h1>To. 남편</h1>
        <p>
            여보~ 오늘 급하게 먼저 출근해야 해서<br>
            인사도 못하고 먼저 나가요~
        </p>
        <p>
            아침 굶지 말고 냉장고에 있는 반찬<br>
            전자레인지에 데워서 챙겨 먹고 나가요~
        </p>
        <p>
            그럼 오늘 하루도 힘내고 이따 저녁에 봐요~
            화이팅~!
        </p>
    </div>
  </body>
</html>

 

 

문제 2번 풀이

더보기
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>login</title>
  </head>
  <body>
    <form action="#">
      <fieldset>
        <legend>로그인</legend>
        <button type="button">
          Log in with Google
        </button>
        <p>
          or
        </p>
        <label for="username">
          <input type="text" id="username" name="username" placeholder="Username">
        </label><br>
        <label for="password">
          <input type="password" id="password" name="password" placeholder="Password">
        </label><br>
        <button type="button">LOGIN</button><br>
        <a href="#">Forgot your password?</a>
      </fieldset>
      </form>
  </body>
</html>

 

 

문제 3번 풀이

더보기
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>login</title>
  </head>
  <body>
    <h1>목차</h1>
    <div>
      <ol>
        <li>역사
            <ol>
                <li>개발</li>
                <li>최초 규격</li>
                <li>표준 버전의 역사
                    <ol>
                        <li>HTML 버전 스케줄</li>
                        <li>HTML 초안 버전 스케줄</li>
                        <li>XHTML 버전</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>마크업
            <ol>
                <li>HTML 요소</li>
                <li>데이터 형식</li>
                <li>문서 형식 선언</li>
            </ol>
        </li>
      </ol>
    </div>
  </body>
</html>

 

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

[CSS] CSS 선택자를 활용하여 작성하기(문제 풀기)  (0) 2023.07.24
[CSS] CSS 적용 3가지 방법을 활용하여 작성하기 (문제 풀기)  (0) 2023.07.20
'CSS _HTML_JavaScript/문제 풀이' Related Articles more