CSS Layout

nam2350·2021년 7월 7일
0

CheckPoint

목록 보기
2/2
post-thumbnail

반응형 Layout의 필요성

모바일과 태블릿의 사용자가 늘어남에 따라 디바이스의 스크린 크기에 따라 반응형 디자인이 웹 개발에 있어 필수 사항이 되었다.
반응형 디자인은 디바이스에 마다 다른 스크린 사이즈를 모두 커버 할 수 있어야 하기 때문에 CSS를 사용하여 디자인 한다.

1. position

position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

  • Use
position: relative;
top: 40px; left: 40px;

position 속성은 하나의 키워드 값을 선택해 지정할 수 있다.

relative

realative는 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용하고 오프셋은 다른 요소에는 영향을 주지 않는다.

absolute

absolute는 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 가장 가까운 위치 지정 부모 요소에 대해 상대적으로 배치한다. 부모 요소 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 배치한다. 최종 위치는 top, right, bottom, left 값이 지정 한다.

fixed

fixed는 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. 요소의 부모 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 부모를 컨테이닝 블록으로 한다. 최종 위치는 top, right, bottom, left 값이 지정 한다.

2.Block Level

  • 블록 요소
  1. div
  2. h1,h2....
  3. p
  4. margin, padding 위, 아래 ,좌 ,우 사용가능
  5. Layout을 잡는 용도

사용가능한 최대 가로 너비를 사용한다.
width: 100%; height:0;부터 시작한다.
수직으로 스택된다.


  • 인라인 요소
  1. span
  2. img
  3. margin, padding 좌 ,우 사용가능
  4. text를 사용할때

필요한 너비 만큼을 사용한다.
크기를 지정할 수 없다. (가로 사이즈 세로 사이즈를 넣어줘도 내용만큼만 변한다)
width:0; height:0;으로 시작한다.
수평으로 스택된다.

float

float은 한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다. 요소가 부동되면 문서의 보통 흐름에서 빠지고 부동된 요소는 포함 박스나 다른 부동된 요소의 가장자리에 닿을 때까지 좌나 우로 이동된다.

  • Use
float : none; // 요소가 부동하지 않아야 된다.

float : left; // 좌측에 부동

float : right; // 우측에 부동
  • value
    left는 요소가 자신의 포함 블록의 좌측에 부동 해야 함을 나타내는 키워드
    right는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드
    none는 요소가 부동하지 않아야 함을 나타내는 키워드입니다.
    inline-start는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드
    ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.
    inline-end는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드
    즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽
profile
호잇호잇

0개의 댓글