CSS4 CSS - float 와 clear 프로퍼티 사용하기 HTML 요소가 화면에 보여지는 기본 방식은 Block 요소인 경우 자동으로 개행되어 아래에 보여지게 되고, Inline 요소인 경우는 오른쪽 옆에 배치되어지고, 화면에 다 보여지지 않으면 아래로 내려가서 배치되어지는 것입니다. CSS의 float 프로퍼티는 HTML 요소가 일반적인 흐름에 따르는 배치를 벗어나서 왼쪽 또는 오른쪽으로 띄우는(float) 효과를 줍니다. clear 프로퍼티는 clear된 요소의 좌우에 float된 요소를 허용하지 않도록 합니다. ※ float 프로퍼티의 값- left : 요소 자신을 포함하고 있는 컨테이너의 왼쪽으로 띄웁니다.- right : 요소 자신을 포함하고 있는 컨테이너의 오른쪽으로 띄웁니다.- none : 요소를 띄우지 않습니다. 기본값 입니다. ※ clear 프.. 2018. 5. 9. CSS - overflow 속성 사용하기 CSS의 overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정합니다. 기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면 컨텐츠를 모두 포함할 수 있도록 요소의 크기가 커집니다. 크기가 고정 되어 있다면 overflow 프로퍼티에 지정된 값에 따라 보여지게 됩니다. overflow 에 사용할 수 있는 값은 네가지가 있습니다. - visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다. - hidden : 넘치는 부분은 잘려서 보여지지 않습니다. - scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.) - auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결.. 2018. 5. 9. CSS - position 프로퍼티 사용하기 CSS의 position 프로퍼티는 top, right, bottom, left 프로퍼티로 HTML 요소의 위치를 지정할때 무엇을 기준으로, 어떤 식으로 사용되어질지 그 방법을 지정합니다. postion 프로퍼티에 사용되어지는 다섯가지 값입니다.- static- relative- fixed- absolute- sticky 1. postion: static; position 프로퍼티를 지정하지 않았을 때의 기본값이 static 입니다. 이 상태에서는 top, bottom, left, right 프로퍼티가 동작을 하지 않습니다. HTML요소의 배치는 일반적인 흐름을 따름니다. 내용 2. position: relative; HTML 요소의 postion 프로퍼티를 relative로 설정하면 일반적인 위치(po.. 2018. 5. 9. CSS - display 와 visibility 프로퍼티 사용하기 화면에서 HTML 요소를 숨기거나, 다시 보여주기 위해서 display 또는 visibility 프로퍼티를 사용합니다. 이러한 작업을 하기 위해서 display 프로퍼티는 none과 block 또는 inline 값을 사용하고, visibility 프로퍼티에서는 hidden과 visible 값을 사용합니다. 화면에서 HTML 요소를 숨기는 작업을 함에 있어 이 두 가지 프로퍼티에는 큰 차이가 존재합니다. visibility:hidden 을 사용하면 그 요소가 차지하던 공간은 그대로 유지되고, 화면에 보이지만 않게 됩니다. display:none 을 사용하면 그 요소가 아예 없었던것 처럼 처리됩니다. 레이아웃에 변화가 오게 되는 것입니다. 두 가지의 프로퍼티의 특성을 잘 고려해서 사용해야 하겠습니다. dis.. 2018. 4. 20. 이전 1 다음
