HTML & CSS

[edwith] 초보 HTML&CSS 4강 - HTML 구조화 설계

펜네임 2019. 6. 2. 15:06
HTML structure design : HTML 구조화 설계

 

웹페이지 만들어 보기

 

진행된 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <h1>Company Name</h1>
    <img src="...." alt="logo">
  </header>
  
  <section>
    <nav>
      <ul>
        <li>Home</li>
        <li>Home</li>
        <li>About</li>
        <li>Map</li>
      </ul>
    </nav>
    
  <section>
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <button></button>
  </section>
    
  <section>
      <ul>
        <li>
          <h3>About me</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores optio at expedita, nobis, ab eveniet tempora veritatis placeat odit sint, vero accusamus nostrum! Dolorum eum architecto aliquam amet quo, ut?</div>
        </li>
        <li>
          <h3>What I do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores optio at expedita, nobis, ab eveniet tempora veritatis placeat odit sint, vero accusamus nostrum! Dolorum eum architecto aliquam amet quo, ut?</div>
        </li>
        <li>
          <h3>Contact me</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores optio at expedita, nobis, ab eveniet tempora veritatis placeat odit sint, vero accusamus nostrum! Dolorum eum architecto aliquam amet quo, ut?</div>
        </li>
      </ul>
  </section>
  
  <footer><span>Copyright &copy;Pennek</span></footer> //span 태그, copyright 표시
</body>
</html>

 

 

오늘의 태그

 

- span : 글자에 간단히 스타일을 줄 때 사용. div의 inline 버전. 더미 태그.

- &copy; : copyright 심볼 나타내기. 태그 안에 줄글로 적음.

저작자표시 (새창열림)