CSS - 레이아웃 스타일

 

 

 

 

레이아웃 스타일

 

• width와 height
• 화면 배치 방법 변경 - display
• 여백 관련 속성 - padding, margin
• 배치 관련 속성 - position, top, left, bottom, right
• 페이지에 특정 속성을 보이거나 보이지 않게 하는 속성 - visivility
• 페이지 안의 요소들을 순서대로 위로 쌓는 속성 - z-index

 

 

 

 

width와 height

 

• 내용(content)이 차지하고 있는 영역의 크기를 조절할 수 있는 속성

 

<h4>고정 크기</h4>
<div id="test1" class="size-test"></div>
<h4>가변 크기</h4>
<div id="test2" class="size-test"></div>

---

 

display

 

• 화면 배치 방법 변경
• 블럭 요소와 인라인 요소의 속성을 변경하여 배치 방식을 변경할 수 있다.

 

블럭 요소인 <div>태그를 인라인 요소로 변경

<div class="block block-test1 area1">첫 번째 영역</div>
<div class="block block-test1 area2">두 번째 영역</div>
<div class="block block-test1 area3">세 번째 영역</div>

 

인라인 요소인 <span>태그를 블럭 요소로 변경

<span class="block block-test2 area1">첫 번째 영역</span>
<span class="block block-test2 area2">두 번째 영역</span>
<span class="block block-test2 area3">세 번째 영역</span>

 

블럭 요소인 <div>태그를 인라인 요소로 변경(width, height 속성 값 유지)

<div class="block block-test3 area1">첫 번째 영역</div>
<div class="block block-test3 area2">두 번째 영역</div>
<div class="block block-test3 area3">세 번째 영역</div>

---

 

여백 관련 속성 - padding, margin

 

• padding : 테두리와 컨텐츠 영역 사이의 거리를 조절하는 속성
• margin : 요소들 간의 간격을 조정하는 속성

 

 

 

---

 

배치 관련 속성 - position, top, left, bottom, right

 

• position
         - static : 일반적인 문서 흐름에 따라 배치(기본 값)
                    top, right, bottm, left 속성이 아무런 영향을 주지 못한다.
         - relative : 일반적인 문서 흐름에 따라 배치
                    top, right, bottm, left의 값에 따라 오프셋 적용
         - absolute : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음
                         가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치된다.
                         top, right, bottom, left의 값으로 위치 결정
         - fixed : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음
                    해당 요소가 모든 페이지의 같은 위치에 출력(화면이 움직여도 같은 위치에 출력)

 

static과 relative

 

absolute

---

 

visivility

 

• 페이지에 특정 속성을 보이거나 보이지 않게 하는 속성
• display : none 속성은 페이지 공간을 차지하지 않는다.
• visivility : hidden 속성은 페이지 공간을 차지한다.

 

---

 

z-index

 

• 페이지 안의 요소들을 순서대로 위로 쌓는 속성
• 값이 높으면 맨 위에서 표시된다.

---