우리가 지금까지는 그냥 바로 태그를 사용했지만 실제로 웹은
html이라는 큰 태그로 이루어져 있고 그 안에 head,body태그로 이루어져 있다.
따라서 보이는 모든 엘리먼트의 조상은 body이고, 그의 부모는 html이다.

이런 레이아웃을 구성하려고 하는데, 그 과정에서 가운데정렬을 위해
별도의 태그로 엘리먼트들을 감쌀 필요없이 body의 속성에 text-align:center;를 주면 된다.

id와 class

가상선택자를 배우기는 했지만 이것으로도 우리는 원하는 태그에 원하는 속성을 넣기 힘든경우가 있다. 이를 위해 id와 class가 있다.
div class="a b" id="b"
이러한 형식으로 작성되는데 class는 여러 개 부여가 가능하다.
id는 숫자로 시작할 수 없고 중복될 수 없다.

선택자로 기입할 때에는
class의 경우 .a
id의 경우 #b
로 입력한다.

border-radius

모서리가 둥근 사각형을 만들고 싶다면 사용한다.
border-radius: 10px;이면 10px만큼의 모서리를 사용한다는 것이고
border-radius: 10%이면 10%의 변을 모서리로 사용하다는 것이다. 이러한 원리로 50%의 값을 가진 border-radius라면 원이나 타원형태의 모양을 갖는다. 그 이상의 값은 의미가 없다.

cursor

커서를 올려뒀을 때 커서의 모양이 바뀌는 효과를 주고싶다면 cursor 속성을 이용하면 된다.
가장 기본적으로는 cursor:pointer를 많이 사용한다.
그 외에도 help,wait 등등 여러가지가 있는데 아래 페이지를 참고한다.
https://www.w3schools.com/cssref/pr_class_cursor.php
https://developer.mozilla.org/ko/docs/Web/CSS/cursor

페이지 버튼 박스 구현하기

위에서 배운내용을 바탕으로 슬라이더의 페이지 버튼 박스를 구현할 것이다.

inherit