TIL #9 - CSS Layout

rosarang·2021년 1월 12일
0

CSS

목록 보기
2/3
post-thumbnail

display 속성

block / inline / inline-block

block - p, form, header, footer, section 등과 같이 너비를 좌우로 full로 차지하는 속성 값

inline - span 등 단락 내에 존재하며 해당 너비만큼만 자리를 차지하는 속성 값

inline-block - 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하는 속성 값

none - display: none; 으로 되어 자신의 영역만큼 공간을 차지하지만 보이지 않는 값

*visibility: hidden; 는 해당 요소가 감춰지며 마치 존재하지 않는 것 처럼 공간을 차지하지 않는 차이가 있다.

box-sizing 속성

속성 값

  • content-box - padding과 content, border의 너비가 합쳐진 값이 width가 되도록 하는 값
  • border-box - width에서 border와 padding을 뺀 값이 content 너비가 되도록 하는 값

position 속성

웹 문서 안의 요소들을 자유롭게 배치해 주는 속성
static을 제외한 나머지는 좌표를 이용해 요소 위치 조정 - top, bottom, left, right

속성 값

  • static - 문서의 흐름에 맞춰 배치

  • relative - 이전 요소와 연결하여 배치하되 위치 지정 가능

  • absolute - position이 relative인 부모를 기준으로 원하는 위치 지정해 배치

  • fixed - 브라우저 창 기준으로 지정한 위치에 고정

float 속성

왼쪽 혹은 오른 쪽 구석에 요소 배치하는 속성

속성 값

  • left - 왼쪽 배치
  • right - 오른쪽 배치
  • none - 어느 쪽으로도 배치 x

*float이 부모의 높이를 인지할 수 없어 벗어날 때 이용하는 방법 3가지

  1. 바깥 div 마지막에 아무 태그나 넣고 clear 속성을 적용함
    (코드를 더 입력해야 해 좋지 않음)

  2. 바깥 div에 overflow: hidden;을 넣음 (가장 많이 쓰이는 방식)

  3. 바깥 div를 float시킴. 그럼 자식이 float을 인지하여 높이를 차지함. 그러나 float이 되어 block 요소의 성질이 사라져 문제될 수 있음. 이런 경우 width 100% 추가하는 등의 해결이 필요

clear 속성

float 속성 이후의 다른 요소들에게 해당 속성이 더 이상 쓰이지 않게 하기 위한 속성

속성값

  • none - 기본 값
  • left - left 값 celar
  • right - right 값 clear
  • both - 양쪽 값 모두 clear
profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글