[TIL 04] CSS | layout style

블록 요소

한 줄 전체를 차지하는 요소
한 줄에 여러 요소가 올 수 없다.

• <div>, <p>, <h?>, <ul>, <ol>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>

인라인 요소

한줄에서 일부분만 차지하는 요소
한 줄에 여러 요소가 올 수 있다.

• <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

display

화면 배치 방법 변경 속성
박스 레벨와 인라인 레벨 요소를 변경 가능하게 해준다.

• none : 화면에서 표현되지 않고 공간도 차지하지 않음
• block block레벨 요소로 변경. inline을 block처럼 배치가능
• inline : inline레벨 요소로 변경. block을 inline처럼 배치가능
• inline-block : inline레벨이면서 content에는 block에 대한 속성을 지정

선택자 {
  display : 속성값;
}

padding, margin

• padding

  테두리와 컨텐츠 영역사이의 거리를 조절하는 속성

선택자 {
  padding-[위치] : 숫자(단위);
}

• margin

  box레벨이나 inline레벨의 요소들간의 간격을 조절하는 속성

선택자 {
  margin-[위치] : 숫자(단위);
}

position

페이지의 요소들을 자유롭게 배치해 주는 속성
top, left, right, bottom으로 위치 지정

• static : 요소를 문서의 흐름에 맞춰 배치(default)
• relative : 이전 요소와 자연스럽게 연결해 배치, 위치지정 가능
• absolute : 원하는 위치를 지정해 배치
  -> 부모/조상 요소의 position속성이 반드시 relative여야함.
• fixed : 지정한 위치에 고정배치

선택자 {
  position : 속성값 ;
  [top:숫자(단위)]; [left:숫자(단위)];
  [right:숫자(단위)]; [bottom:숫자(단위)];
}

visibility

페이지에 특정 속성을 보이거나 보이지 않게 하는 속성

• visible : default, 요소가 화면에 보임
• hidden : 요소를 화면에서 안보이게 하지만 페이지의 공간은 차지하
  고 있음
• collapse : 표의 행, 열, 행그룹, 열그룹 등에서 지정하면 서로 겹치도록 조절, 이외 영역에서는 hidden으로 처리

z-index

페이지 안의 요소들을 순서대로 위로 쌓는 속성
속성값이 크면 가장 위에 있는 요소 작으면 밑에 있는 속성
-> 항상 맨위에 요소가 위치해야하면 값을 999 또는 1000 등의 큰 값으로 설정

선택자 {
  z-index : 속성값;
}

float, clear

• float

  페이지의 내의 요소의 위치를 왼쪽이나 오른쪽으로 지정하는 속성
  • left, right, none

• clear

  페이지에 float 설정이 되어 있으면 그 속성이 그대로 다음 요소에 영향을 미치는데 이를 초기화시키는 속성
  • left, right, none, both