HTML & CSS

[edwith] 초보 HTML&CSS 5강 - ID와 Class

펜네임 2019. 6. 2. 15:32

ID를 주는 이유

1. 각 element를 각각 따로 제어하기 위해서

2. 검색하기 쉽게

 

 

Class를 주는 이유

1. 같은 스타일을 다른 element들에 적용하기 위해

 

 

 

진행된 코딩

<!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 id="nav_section">
    <nav>
      <ul>
        <li>Home</li>
        <li>Home</li>
        <li>About</li>
        <li>Map</li>
      </ul>
    </nav>
    
    <section id="roll_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 id="text_section">
      <ul>
        <li class="me_description">
          <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 class="me_description">
          <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 class="me_description">
          <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>
    
  </section>
  
  <footer><span>Copyright &copy;Pennek</span></footer>
</body>
</html>
저작자표시 (새창열림)