☑️css - layout의 모든 것

1. position 속성

참고) 생활코딩 CSS-position

relative

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

• relative는 부모에 대해서 상대적임.

absolute

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

• 부모로부터 자유로워져 자신의 contents만큼의 크기를 갖음.

• 만약 부모에 position: relative;가 부여되었을 때, top : 0; left=0; 으로 설정한다면 부모의 최상단 좌측 끝에 붙는 것을 볼 수 있다.

  만약 부모에 position: relative;가 부여되지 않았다면, top : 0; left=0; 으로 설정했을 때 부모를 무시하고 body의 최상단 좌측 끝에 붙는 것을 볼 수 있다.

특정 부모에 대해 절대적으로 움직이며, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 됨.

relative는 무조건 부모를 참고하지만, absolute는 relative가 붙은 부모만 참고한다.

fixed

MDN 정의) 고정적인 위치에 배치된다. 브라우저의 스크롤에 의한 영역이동에 대해 고정된다. 또한 인쇄매체에 대해서도 각 페이지의 같은 위치에 인쇄된다. 위치는 top, right, bottom, left 속성에 의해 지정된다. 뒤에 계속되는 요소의 배치에 영향을 주지 않는다.

• 최상위에 있는 태그의 위치를 기준으로 하여 자신의 위치를 결정
  
  
  

2. inline, inline-block, block

display property

1) inline (레벨) 요소

• 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치
• content의 너비만큼 가로폭을 차지
• width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없음
• inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없음. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용.
• ex.<span>, <a>

2) inline-block

• inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있음.

3) block (레벨) 요소

• 항상 새로운 라인에서 시작하며 화면 크기 전체의 가로폭 차지
• width, height, margin, padding 프로퍼티 지정이 가능
• block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있음
• ex.<div>, <p>

4) none

• element가 존재하지 않는 것처럼 페이지가 렌더링됨.(공간조차 사라짐)

브라우저 창이 설정한 element의 너비보다 좁을 경우에는?(모바일 환경)
width 대신 max-width 사용!

box-sizing

• box-sizing : content-box;
• box-sizing : border-box;
  
  
  
  

3. float에 대해서

float

• syntax :float: none|left|right|initial|inherit;
• float이 적용되지 않도록 하기 위해, clear property 사용

  syntax : clear: none|left|right|both|initial|inherit;

콘텐츠 카테고리 tags