반응형

Layout 2

[CSS] Float Property

안녕하세요. Jay입니다. 오늘은 Float에 대해서 알아보도록 하겠습니다. "CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다." 라고 정의되어 있습니다. 말이 좀 어렵죠? 실제로 어떻게 보이는지 확인해보도록 하겠습니다. 먼저 float를 사용하지 않은 이미지와 텍스트의 배치를 보겠습니다. 이미지의 하단 부분부터 텍스트가 시작되는 것을 볼 수 있습니다. 이미지 옆 부분에는 빈 공간도 보이네요. 그럼 float css를 사용해보겠습니다. float: right 로 지정했습니다. 어떤가요? 이미지가 오른쪽에 배치되고 텍스트들이..

HTML&CSS 2018.06.14

[CSS] Position Property

static 기본 값. 위치가 지정된 것이 아닌 상태. relative 별도의 프로퍼티를 지정하지 않은 이상 static과 동일하게 동작. 상대 위치가 지정된 엘리먼트에 top, right, bottom, left 등을 지정하면 기본 위치와 다르게 위치가 조정된다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않는다. fixed 뷰포트(viewport)에 상대적으로 위치가 지정된다. 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. relative와 마찬가지로 top, right bottom, left 프로퍼티가 사용된다. 고정 엘리먼트는 평소대로라면 있었을 법한 공백을 페이지에 남기지 않는다. 모바일 브라우저의 경우, 고정 엘리먼트 지원이 굉장히 불안정하다. absolu..

HTML&CSS 2018.06.12
반응형