본문 바로가기
lang/HTML, CSS

[HTML] 구조설계

by Wordbe 2019. 10. 5.
728x90

3) HTML 구조설계

<head>

</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>AboutUs</h3>
                    <div>Lorem ipsum dolor sit amet, </div>
                </li>
                <li>
                    <h3>What we do</h3>
                    <div>Lorem ipsum dolor sit amet, </div>
                </li>
                <li>
                    <h3>Contact us</h3>
                    <div>Lorem ipsum dolor sit amet, </div>
                </li>
            </ul>
        </section>
    </section>

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

class 객체 : 비슷한 스타일을 함께 표현

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

id : identifier 고유한 하나의 객체, 객체 관리, 고유한 영역을 표시, 검색시 id를 가지고 쉽게 찾을 수 있음, 클래스로 표현할 수도 있다.

  • 고유한 속성으로 한 HTML 문서에 하나만 사용하자.
  • 고유한 ID값으로, 제어와 검색이 용이하다.

회사마다 약속, 관습(convention)이 다를 수 있다.

data : 추가적인 데이터 정보를 표현한다.

 

 

[출처 - 부스트코스, 웹 프로그래밍]

https://www.edwith.org/boostcourse-web/lecture/

728x90

'lang > HTML, CSS' 카테고리의 다른 글

[CSS] 배치, 레이아웃 설계, float  (0) 2019.10.05
[CSS] 기초  (0) 2019.10.05
[HTML] 기초  (0) 2019.10.05

댓글