3. Block의 특징(2)-padding (+ id)

<pagging>

block의 경계로부터 안쪽 공간

 

 

block뿐 아니라 inline에도 적용 가능함.

연두색의 부분이 padding

 

1) padding: 30px 50px 20px 10px;

적용한 값만큼 박스 안쪽 공간이 생김.

padding도 margin과 마찬가지로 padding: 30px 50px 20px 10px; 이라고 적게 되면

위쪽 30, 오른쪽 50, 아래쪽 20, 왼쪽 10의 공간을 가지게 됨.

 

 

2) 여러 개의 박스 구분하기 (id)

박스 안에 박스가 있도록 div태그 작성하면 겹쳐서 하나로 보임.

모든 div에 같은 스타일이 적용되어 구분하기 힘듬.

 

div 마다 다른 고유의 id를 부여함.

구분하기 위해서 div에 각 각 고유의 id를 부여 하기로 함.

 

 

3) id 불러오기

고유한 id로 구분하여 각 각의 크기와 색상을 적용함.

id는 '#' + '지정한 id'를 통해 불러와서 사용함.

div박스에만 적용되는것이 아님.

모든 id는 하나의 고유값이기 때문에 다른 태그에도 id를 작성하면 해당 아이디를 불러 올 수 있음.