HTML/CSS 최소 지식

화면을 다루기 전에 알아야 할 것

3부까지는 값만 다뤘습니다. 4부부터는 화면을 다룹니다. 그러려면 화면이 무엇으로 이루어져 있는지 알아야 합니다.

1.1 에서 본 대로 HTML 은 무엇이 있는지, CSS 는 어떻게 보일지 정합니다. 여기서는 JavaScript 로 화면을 다루는 데 필요한 만큼만 봅니다.

태그와 속성

HTML 은 태그로 이루어집니다. 여는 태그와 닫는 태그 사이에 내용이 들어갑니다.

<h1>상품 목록</h1>
<p class="note">오늘의 추천입니다</p>
<button id="buy">구매</button>

여는 태그 안에 적는 class 와 id 를 속성 이라고 합니다. JavaScript 로 요소를 찾을 때 이 둘을 가장 많이 사용합니다.

• id — 한 화면에 하나뿐인 이름입니다.
• class — 여럿이 같이 가질 수 있는 이름입니다. 빈칸으로 구분해 여러 개를 적습니다.

선택자

CSS 와 JavaScript 는 같은 방법으로 요소를 가리킵니다. 그것을 선택자(selector) 라고 합니다. 다음 단원부터 계속 사용하므로 이 넷만 기억하면 됩니다.

// 태그 이름
h1

// id 는 앞에 #
#buy

// class 는 앞에 점
.note

// 안에 든 것 (빈칸으로 잇습니다)
ul .item

CSS 로 모양 정하기

CSS 는 선택자 { 속성: 값; } 모양입니다. 아래 예제에는 HTML 과 CSS 가 미리 놓여 있습니다. 실행하면 미리보기 탭에서 실제 화면을 볼 수 있습니다.

// 화면은 미리보기 탭에서 볼 수 있습니다.
console.log("화면이 준비됐습니다");

이 트랙에서는 HTML 과 CSS 를 직접 작성하지 않습니다. 예제마다 미리 놓여 있고, JavaScript 로 그것을 다루는 방법만 배웁니다.

부모와 자식

태그 안에 태그가 들어갑니다. 감싸는 쪽을 부모, 안에 든 쪽을 자식 이라고 합니다. 이 관계를 알면 화면 전체를 나무처럼 오르내릴 수 있습니다.

<ul id="list">
	<li class="item">연필</li>
	<li class="item">공책</li>
</ul>

ul 이 부모이고 li 둘이 자식입니다. 이 구조를 DOM(Document Object Model) 이라고 부릅니다. 다음 단원부터 이 나무에서 원하는 요소를 찾습니다.

처음에 자주 걸리는 것

직접 해보기

이 단원의 정리