인터넷활용 10 - 1 CSS 속성 - 배치

용어체크

1. Position

• position : static(디폴트) -정적 배치
• position : relative - 상대적으로 기준으로 배치
• position : absolute - 절대기준으로 배치
• position : fixed - 항상 고정 위치에 배치

2. Float

• 유동적 배치로 브라우저의 요소를 왼쪽이나 오른쪽에 떠 있게 만드는 속성으로 브라우저의 크기에 따라 위치가 유동적으로 변경됨

3. Z-index

• 요소가 겹치는 현상이 발생할 때 겹치는 순서를 변경

 

학습내용 1. 선택한 요소들의 배치 방법 2. float 속성을 이용한 유동 배치 3. z-index를 이용하여 겹치는 순서 변경 선택 요소의 상대, 절대 기준으로 배치 요소를 float 속성을 이용하여 왼쪽, 오른쪽 배치 z-index를 이용하여 겹치는 순서 변경 학습목표 1. 선택한 요소의 상대, 절대 기준으로 배치하는 방법을 설명할 수 있다. 2. float, clear 속성에 대해서 설명할 수 있다. 3. 요소들의 겹치는 순서와 보이거나 숨기는 방법을 설명할 수 있다.

 

 

 

 

 

---

CSS 포지션이란 무엇을 말하는 것일까요?

CSS의 웹 문서 요소를 적절히 배치하므로 웹 문서의 내용은 같은 것이지만 다양하게 배치하고 효과를 줌으로써 다른 페이지의 디자인으로 표현할 수 있습니다.

---

Quiz 01요소의 겹치는 순서를 변경하는 속성은 position이다.

• 1 O
• 2 X

정답 :2

해설 :요소의 겹치는 순서를 변경하는 속성은 z-index이다.

 

 

 

Quiz 02position 속성 중 브라우저의 스크롤바가 움직여도 항상 그 위치에 보이도록 할 때 사용하는 속성 값은?

• 1 position : static
• 2 position : relative
• 3 position : absolute
• 4 position : fixed

정답 :4

해설 :position : fixed 속성을 이용해 위치를 고정한다.

 

 

 

Quiz 03브라우저의 크기에 따라 유동적으로 왼쪽이나 오른쪽으로 배치할 때 사용하는 속성은?

• 1 visibility
• 2 z-index
• 3 position
• 4 float

정답 :4

해설 :float 속성에 대한 설명이다.

 

 

---

학습정리

1. position 속성

• 웹 요소들을 다양하게 배치하여 다양한 모양으로 디자인할 수 있음
• position:static, relative, absolute, fixed 이용

2. Float 속성

• 유동적 배치로 브라우저의 요소를 왼쪽이나 오른쪽에 떠 있게 만드는 속성
• Float속성을 해제하기 위해서는 clear 속성을 이용

3. z-index 속성

• 요소가 겹치는 현상이 발생할 때 겹치는 순서를 변경
• Z-index의 숫자 값이 크면 클수록 위에 표시

4. visibility, overflow 속성

• visibility 속성: 특정 요소를 화면에 보이거나 보이지 않게 설정할 때 사용
• overflow 속성: 콘텐츠의 분량이 요소의 박스 크기를 초과할 때 어떻게 처리할 것인지를 결정