[프론트엔드입문] 9-1 CSS를 이용한 HTML 태그 배치

일자 : 24-2 10주차 (1)

1. CSS를 이용한 HTML 태그 배치

[1] 배치

: CSS3로 HTML 태그가 출력되는 위치 지정
(HTML 태그는 웹 페이지에 작성된 순서와 달리 배치 가능)

1) 배치 기능의 CSS3 프로퍼티들

• display
• position
• left, right, top, bottom
• float
• z-index
• visibility
• overflow

[2] block와 inline

1) HTML 태그의 종류

• inline tag -> inline box로 출력
• block tag -> block box로 출력

2) 특징

• block : 한 줄을 독점적으로 차지하여 옆에 다른 태그 배치가 되지 않는다.
• inline : 라인 안에 다른 요소들과 함께 배치 된다.
  • 공간이 좁으면 남은 부분이 다음 라인으로 넘어간다.
• inline-block : 라인 안에 다른 요소들과 함께 배치한다.
  • 동시에 width, height, margin으로 크기 조절 가능하다.
• none : 해당 요소가 화면에서 완전히 사라지고, 레이아웃(공간)에도 영향을 미치지 않게 된다.

[3] 박스의 배치 : position

1) normal flow

: 기존에는 웹 페이지에 나타난 순서대로 HTML 태그를 배치하지만, position을 이용하여 normal flow 무시가 가능하다.

2) position 속성

• 정적 배치
  • position : static (default)
• 상대 배치
  • position : relative
• 절대 배치
  • position : absolute
• 고정 배치
  • position : fixed
• 유동 배치
  • float : left / right

3) position 속성을 사용할 때, 태그의 위치와 크기

• top, bottom, left, right, width, height의 속성으로 지정한다.
• 이들의 각 속성을 배치 방법에 따라 다르게 사용된다.

[4-1] position : relative (상대 배치)

• normal flow의 '기본 위치'에서 left, top, bottom, right의 값 만큼 이동한 '상대 위치'에 배치
• 자기 자신을 기준으로 이동한다.

[4-2] position : absolute (절대 배치)

• 부모를 기준으로 이동한다.
• 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모를 기준으로 절대적으로 움직이게 된다.

[4-3] position : fixed (고정 배치)

position: fixed는 요소를 화면(Viewport)에 고정하는 방식의 CSS 속성입니다. 요소가 스크롤에 영향을 받지 않고 항상 동일한 위치에 고정되어 표시됩니다.

[4-4] float : right / left / none

1. float: left

• 요소를 왼쪽으로 정렬하는 방식

2. float: right
   • 요소를 오른쪽으로 정렬하는 방식
3. float: none
   • 요소에 float 속성을 적용하지 않는 방식

[4-5] z-index

1. 숫자 값
   • 숫자가 클수록 위쪽에 표시된다.
   • 음수가 작을수록 아래쪽으로 배치된다.
2. 컨텍스트 제한
   • z-index는 부모 요소의 쌓임 컨텍스트(stacking context) 내에서만 영향을 미친다.
   • 새로운 쌓임 컨텍스트는 position 속성(relative, absolute, fixed, sticky)과 함께 사용하거나, 특정 속성(transform, opacity 등)을 적용했을 때 생성됩니다.

[4-6] visibility

• visible (기본값) : 요소가 화면에 표시된다.
• hidden : 요소가 화면에 보이지 않게 숨겨지지만, 레이아웃 공간은 유지된다.
• collapse (테이블 관련 요소에서 사용) : 테이블 행이나 열을 숨길 때 사용하며, 레이아웃 공간도 제거된다.
  • 일반 요소에서는 hidden과 동일하게 동작합니다.

[4-7] overflow

: overflow 속성은 요소의 콘텐츠가 요소의 크기(높이와 너비)를 초과할 경우, 이를 어떻게 처리할지 지정한다.

1. visible (기본값)
   • 초과된 콘텐츠가 잘리지 않고 보이도록 설정됩니다.
   • 콘텐츠가 박스 바깥으로 넘쳐도 아무런 제한이 없습니다.
2. hidden
   • 초과된 콘텐츠를 잘라내어 보이지 않게 합니다.
   • 스크롤 바도 나타나지 않습니다.
3. scroll
   • 초과된 콘텐츠를 볼 수 있도록 항상 스크롤 바를 추가합니다.
   • 콘텐츠가 초과되지 않더라도 스크롤 바가 표시됩니다.
4. auto
   • 초과된 콘텐츠가 있을 경우에만 스크롤 바를 추가합니다.
   • 초과되지 않으면 스크롤 바는 표시되지 않습니다.