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 : 추가적인 데이터 정보를 표현한다.
[출처 - 부스트코스, 웹 프로그래밍]
728x90
'lang > HTML, CSS' 카테고리의 다른 글
| [CSS] 배치, 레이아웃 설계, float (1791) | 2019.10.05 |
|---|---|
| [CSS] 기초 (1809) | 2019.10.05 |
| [HTML] 기초 (0) | 2019.10.05 |
댓글