[CSS -7] CSS 기초 요소

CSS 기초 요소

display - 요소의 유형

• 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의
• 요소의 유형을 변경할 수 있음
  • none : 요소를 화면에 표시하지 않음
  • block : 요소를 블록 레벨 요소로 만듦
  • inline : 요소를 인라인 요소로 만듦
  • inline-block : 요소를 인라인 요소로 표시하되 블록 레벨의 특성(크기 등)을 가진다

float - 문서의 흐름

• 웹 요소들이 화면에 표시되는 순서는 기본적으로 HTML 문서 내에 태그가 쓰인 순서를 따름
• float 속성은 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치를 변경
• 선택된 요소가 흐름에서 제외되어 상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치되도록 하는 특징이 있음
• 사용가능한 속성 값
  • left
  • right
  • none

• float 속성을 적용한 요소를 ‘부동 요소’라 부르기도 함
• 부동 요소는 위치를 이동하면서 다른 요소의 공간에 영향을 줌
• float을 적용하지 않는 요소의 공간에 영향을 주어 때로 역효과를 가져옴
  • 이러한 상황을 대응하기 위해 사용하는 속성으로 clear가 있음

position - 위치 지정하기

• 문서상의 요소의 배치하는 방법을 정의
• 최종 위치를 결정하는 방식
  • position : 난 이렇게 배치할 거야
  • top : 윗면에서부터 얼마큼 떨어트릴 거야
  • bottom : 아랫면에서부터 얼마큼 떨어트릴 거야
  • left : 왼쪽면에서부터 얼마큼 떨어트릴 거야
  • right : 오른쪽 면에서부터 얼마큼 떨어트릴 거야

• position의 유형

  속성 값	설명
  static	기본값으로, 요소를 일반적인 문서의 흐름에 맞게 배치
  relative	문서의 흐름에 맞춰 배치된 자리를 기준으로 요소를 이동
  absolute	position이 지정된 상위 요소를 기준으로 요소를 이동시킴, 이때 요소는 문서의 흐름에서 제외됨
  fixed	화면을 기준으로 요소의 위치를 고정

겹치거나 넘치는 요소 다루기

z-index 속성

• 요소의 쌓임 순서(stack order) 정의할 수 있음
• 정수 값을 지정하여 쌍힘 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용
• 위치 지정 요소(position 속성이 정의되어 있는 요소)에 대해 적용할 수 있는 속성

넘침 현상

• 요소 내부의 콘텐츠 양이 많아질수록 요소는 크기를 조절하는데 이때 요소의 크기가 정해져 있다고 콘텐츠가 요소보다 크면 넘침 현상이 발생
• 이러한 문제를 해결하기 위해 overflow속성을 사용
  • overflow처리 유형

  속성 값	설명
  visible	기본 값, 영역을 벗어난 콘텐츠를 그대로 보여줌
  hidden	영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 함
  scroll	영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 하고, 잘린 콘텐츠 진행 방향으로 스크롤을 만듦
  auto	웹 브라우저의 설정 값을 따름 데스크톱 브라우저에서는 주로 scroll 처리를 함

선택자 더 보기

• 선택자의 종류 및 기호

  선택자	의미	사용기호
  속성선택자	특정 속성을 명시하여 요소를 선택	[속성명]
  하위 요소 선택자	상위요소에 포함된 하위 요소를 선택	공백
  자식요소 선택자	상위 요소의 바로 한 단계 하위 요소를 선택	>
  인접 형제 선택자	형제 요소 중 첫 번째 형제 요소를 선택	+
  형제요소 선택자	형제 요소를 선택	~