반응형

 

 

1. html5 layout tag

 

 

2. example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=divice-width">
    <title>Web Study</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="" alt=""></div>
            <div><img src="" alt=""></div>
            <div><img src="" alt=""></div>
            <button></button>
        </section>

        <section>
            <ul>
                <li><h3>About us</h3>
                    <div>adslfaksjdf;lajf;laksfdj;lkjf</div></li>
                <li><h3>What we do</h3>
                    <div>adslfaksjdf;lajf;laksfdj;lkjf</div></li>
                <li><h3>Contact us</h3>
                    <div>adslfaksjdf;lajf;laksfdj;lkjf</div></li>
            </ul>
        </section>
    </section>

    <footer>
        <span>Copyright @CompanyName</span>
    </footer>
</body>

</html>

 

 

 

3. ID와 Class

ID

  • 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
  • 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.

 

Class

  • 하나의 HTML문서 안에 중복해서 사용 가능합니다.
  • 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
  • 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.

이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다.

 

 

4. ID, Class 사용한 예시

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=divice-width">
    <title>Web Study</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="" alt=""></div>
            <div><img src="" alt=""></div>
            <div><img src="" alt=""></div>
            <button></button>
        </section>

        <section id="description">
            <ul>
                <li class="our_description"><h3>About us</h3>
                    <div>adslfaksjdf;lajf;laksfdj;lkjf</div></li>
                <li class="our_description"><h3>What we do</h3>
                    <div>adslfaksjdf;lajf;laksfdj;lkjf</div></li>
                <li class="our_description"><h3>Contact us</h3>
                    <div>adslfaksjdf;lajf;laksfdj;lkjf</div></li>
            </ul>
        </section>
    </section>

    <footer>
        <span>Copyright @CompanyName</span>
    </footer>
</body>

</html>

 

 

 

 

 

 

 

반응형
저작자표시

'Programming > MERN' 카테고리의 다른 글

CSS Selector, 기본 스타일 변경하기  (0) 2020.12.23
CSS 적용방법 , 우선순위, 상속  (0) 2020.12.22
! 인증 체크하기 !  (0) 2020.11.10
Node.js 와 스프링의 차이 🤫  (0) 2020.11.10
🌺 회원가입 페이지 만들기 🌺  (0) 2020.11.09

+ Recent posts

티스토리툴바