웹 개발 강의 4편 - 페이지에 뼈대 넣기
3강까지 오면서 페이지에 사진과 링크, 목록이 들어갔습니다. 보기에는 꽤 채워졌는데,
브라우저 입장에서 보면 아직 그냥 글 덩어리의 나열입니다.
오늘은 그 덩어리들에 이름을 붙입니다. 2강에서 본 생각이 한 단계 올라간 것이라고
보시면 됩니다.
div 가 아니라 section 을 쓰는 이유
div 라는 태그가 있습니다. 아무 뜻도 담지 않는 상자입니다. 화면에는 section 과
똑같이 그려집니다.
차이는 읽는 쪽에 있습니다. 스크린 리더는 section 을 만나면 "여기부터 한 구역"
이라고 알려주고, 검색 엔진도 그 구분을 읽습니다. 구역 사이를 건너뛰는 기능은
구역이 실제로 있어야 동작합니다.
모양이 같으니 안 써도 된다는 말은, 모양만 보는 사람에게만 맞는 말입니다.
여섯 개면 거의 다 됩니다
| 태그 | 뜻 |
|---|---|
<header> | 페이지나 구역의 위쪽 |
<nav> | 다른 곳으로 가는 링크 묶음 |
<main> | 본문. 한 페이지에 하나 |
<section> | 자기 제목을 가진 한 부분 |
<article> | 떼어 놓아도 말이 되는 덩어리 |
<footer> | 페이지나 구역의 바닥 |
전부 평범한 덩어리로 그려집니다. 중요한 것은 의미입니다.
구역과 바닥글 추가하기
index.html 의 마지막 문단 아래, </body> 앞에 넣습니다.
<section id="contact">
<h2>Contact</h2>
<p>Write to me, or open an issue on GitHub.</p>
</section>
<footer>
<p>Made by hand in 2026. No frameworks.</p>
</footer>section 안의 제목과 글은 한 단계 더 들여써 줍니다. 들여쓰기를 보면 무엇이
무엇에 속하는지 보입니다.
section 은 거의 항상 제목으로 시작합니다. 제목이 없는 덩어리라면 아마section 이 아닙니다.
id 와 페이지 안 링크
id="contact" 가 이 덩어리에 이름을 붙입니다. 링크는 앞에 샵을 붙여서 그
이름을 가리킬 수 있습니다.
링크 목록에 한 줄을 더합니다.
<a href="#contact">Contact</a>이제 Contact 를 누르면 브라우저가 아무것도 새로 받지 않고 그 자리로 내려갑니다.
주소창 끝에 #contact 가 붙는데, 그 주소를 복사해서 보내면 상대가 바로 그
덩어리로 올 수 있습니다.
CSS 와 자바스크립트도 나중에 같은 이름을 사용합니다. 6강에서 바로 쓰게 됩니다.
id 와 class 중 무엇을 쓸까
고르는 기준은 개수입니다.
id 는 페이지에서 딱 하나에만 붙습니다. 링크로 찾아갈 자리, 머리글, 연락처
덩어리 같은 것들입니다.
class 는 원하는 만큼 여러 곳에 붙일 수 있습니다. 메모 줄, 카드, 버튼처럼
여러 개가 생길 수 있는 것들입니다.
애매하면 class 를 쓰시면 됩니다. 손해 볼 것이 없고, 나중에 하나 더 붙이면
됩니다.
확인하기
python -m http.server 5500처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.
브라우저에서 localhost:5500 으로 들어가시면 됩니다.
아래쪽에 Contact 구역과 바닥글이 생겼습니다. 아직 꾸민 것이 없어서 평범한
글처럼 보입니다. CSS 를 쓰기 전의 페이지는 원래 이런 모습입니다.
모양은 그대로지만 의미는 달라졌습니다.
자주 발생하는 오류
첫째, 같은 id 를 두 곳에 쓰는 경우입니다. id 는 페이지에서 유일해야 합니다.
두 개면 링크는 첫 번째로만 가고 두 번째는 닿을 수 없게 됩니다.
둘째, 제목 없는 section 입니다. 그러면 div 에 옷만 입힌 것과 다르지 않습니다.
셋째, 링크 주소에서 샵을 빠뜨리는 경우입니다. href="contact" 라고 쓰면 브라우저가contact 라는 파일을 찾으러 갑니다.
연습 문제
- Contact 구역 아래에
section을 하나 더 만들고id를 다르게 붙여보세요. - 링크 목록에 그 새 구역으로 가는 링크를 추가해보세요.
footer안에nav를 하나 넣어보세요. 바닥글에도 링크 묶음이 들어갈 수 있습니다.
다음 편
5강에서는 드디어 CSS 를 붙입니다. 페이지가 밋밋함을 벗기 시작합니다.
영상으로 보시려면 링바이트에 같은 내용이 올라가 있습니다.
강의 노트도 함께 보실 수 있습니다.