인터넷 활용 9 - 2 CSS속성 - 박스와 리스트 다루기

용어체크

1. 박스모델의 구성요소

• 콘텐츠, 패딩, 테두리, 여백

2. 여백조절속성

• margin: 요소와 요소 사이의 간격 여백을 조절
• padding: 테두리와 안쪽 콘텐츠 내용과의 간격을 조절

3. 리스트를 이용한 속성

• <ul>, <ol> 태그를 이용하여 표현된 리스트를 list-style-type과 display 속성을 이용하여 내비게이션 메뉴를 만들 때 이용

 

학습내용 1. 박스 모델 표 2. 여백, 크기, 테두리 다루기 3. 리스트 꾸미기 박스 모델 다루기 여백, 테두리 표현 리스트 위치, 머커 바꾸기 학습목표 1. 박스 구성 및 박스를 표현하는 과정을 설명할 수 있다. 2. 요소들의 테두리와 여백을 조절할 수 있다. 3. 리스트 위치, 마커 바꾸는 방법에 대해서 설명할 수 있다.

 

 

 

 

 

---

태그는 모두 박스 모델인가요?

태그는 모두 사각형 형태로 된 박스 모델입니다.
박스 모델은 두 가지 특성을 가지고 있습니다.
블록 레벨요소와 인라인 레벨요소로 구분되어 있으며, css를 이용하여 블록을 인라인으로 인라인을 블록으로 변경할 수 있습니다.

---

Quiz 01요소와 요소 사이의 간격 속성을 조절할 때 사용하는 속성은 padding이다.

• 1 O
• 2 X

정답 :2

해설 :요소와 요소 사이의 간격 속성을 조절할 때 사용하는 속성은 margin이다.

 

 

 

Quiz 02박스 모델의 속성 중 블럭레벨 요소를 인라인 요소 레벨로 수정할 때 사용하는 속성으로 크기와 여백이 적용되지 않는 특징을 가지고 있는 것은?

• 1 display : block
• 2 disaply : inline
• 3 display : inline-block
• 4 display : none

정답 :2

해설 :disaply : inline 속성은 크기와 여백이 적용되지 않는다.

 

 

 

Quiz 03요소의 테두리를 결정하며 모서리가 둥근 테두리를 설정하는 속성은?

• 1 border-radius
• 2 border-style
• 3 border-color
• 4 border

정답 :1

해설 :모서리가 둥근 테두리를 설정할 때는 border-radius 속성을 사용한다.

 

 

---

학습정리

1. 박스모델

• 모든 태그는 사각형 박스 모델로 구성되어 있으며 블럭레벨 , 인라인 레벨 특성을 가지고 있음
• 변경하기 위해서는 display 속성을 이용

2. 박스모델 속성

• width, height 속성: 박스의 크기를 조절
• margin, padding 속성: 바깥쪽 여백, 안쪽 여백 조절
• border 속성: 테두리를 다양하게 표현

3. 리스트 속성

• <ul>: 순서 없는 목록
• <ol>: 순서 있는 목록
• list-style 속성: 목록에 나타나는 기호나 번호를 없앨 수 있음
• display 속성: 블록 레벨을 인라인 레벨을 변경하여 메뉴처럼 다양하게 꾸밀 수 있음