Front-end/부스트코스 : 웹 프로그래밍
[부스트코스] 1. 웹 프로그래밍 기초 : HTML 구조설계, class&id
byolee
2020. 2. 2. 22:54
참고 강의 : https://www.edwith.org/boostcourse-web/lecture/16668/
[LECTURE] 3) HTML 구조설계 : edwith
들어가기 전에 웹페이지를 만드는 것은 문서의 구조를 잡는 것과 같습니다. 제목, 단락 등이 있는 것과 같습니다. 그런 관점으로 웹사이트의 문서구조를 만드는 것이 가장 먼저 할 일 ... - 윤지수
www.edwith.org
* HTML 구조설계 (HTML structual design)
- body : 바탕이 되는 큰 레이아웃
- 계층적인 구조를 통해 html을 구성함
위 그림을 html 구조설계를 통해 대략적인 배치만 해보는 실습을 했다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</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="img1"></div>
<div><img src="" alt="img2"></div>
<div><img src="" alt="img2"></div>
<button>></button>
</section>
<section>
<ul>
<li>
<h3>About Us</h3>
<div>about</div>
</li>
<li>
<h3>What We Do</h3>
<div>what</div>
</li>
<li>
<h3>Contact Us</h3>
<div>contact</div>
</li>
</ul>
</section>
</section>
<footer>
<span>copyright</span>
</footer>
</body>
</html>
위 코드를 실행시키면 다음과 같다.
이미지도 없고 CSS도 적용을 안하니 뭔가 구리다...
* HTML class와 id
웹 페이지를 만들면 절대 빠질 수 없는 속성이 class와 id이다.
| class (클래스) | id (아이디) |
| 중복해서 여러 군데에 쓸 수 있음 | 고유한 속성 |
| 동일한 CSS 스타일 부여 | 하나하나 특별한 제어를 할 수 있음 |
즉 비슷한 스타일을 갖는 영역들은 같은 클래스 이름을 부여하고
고유하게 존재하는 영역에는 id값을 지정해주는 것이다.
이미지 출처
[코드스쿼드] HTML, CSS 개발을 위한 핵심가이드
HTML, CSS 개발을 위한 핵심가이드
antaehyeon.github.io
