계발하는 개발자

overflow 속성은 크기가 제한된 영역에서 많은 양의 컨텐트를 보여줄 때 사용된다. 일반적으로 overflow 속성이 visible 설정(디폴트값)된 엘리먼트는 주어진 공간보다 담고있는 컨텐트가 더 큰 경우, 컨텐트를 밖으로 밀어내버리는 특성이 있다. 한 개의 엘리먼트를 배치하는 경우라면 간과하기 쉽지만, overflow 속성이 visible된 엘리먼트 두 개를 연속 위아래로 배치하는 경우라면 문제가 생긴다! 첫번째 엘리먼트의 빠져나온 컨텐트 부분이 두번째 엘리먼트와 겹치게 되기 때문. (1) overflow: hidden 이때 overflow 속성에 hidden 값을 주면 삐져나온 컨텐트를 숨길 수 있다. 이름 그대로 내용을 숨긴다는 의미 ! 위 모습처럼 긴 텍스트의 뒷 부분이 싹뚝 아예 잘려나가는..

white-space 속성은 요소의 공백을 어떻게 처리할 지를 정의한다. td 요소의 nowrap 속성을 사용하지 않고도 CSS에 배치 금지를 지정할 수 있다. white-space 속성 normal 연속된 공백과 줄 바꿈은 메꾸어져서 하나의 공백으로 표시됩니다. 소스(Source)내의 줄 바꿈 문자도 공백 문자로써 처리됩니다. 필요하다면 긴 줄을 줄바꿈 합니다. nowrap normal과 같이 공백을 채우지만 가로로 긴 줄에서도 줄 바꿈을 하지 않고 표시합니다. pre 연속된 공백을 그대로 표시합니다. 또한 긴 줄도 줄 바꿈하지 않고 표시합니다. pre-wrap 연속 공백은 그대로 유지됩니다. 행(行)의 줄 바꿈은 행의 박스를 채우기 위해 필요한 경우에 실행합니다. pre-line 연속 공백은 메꾸어져..

어떤 요소에 테두리 효과를 주기 위해 일반적으로 border를 사용한다. 그러나 border값을 주는 순간 요소에 실제로 그만큼의 공간을 차지하게 되어 레이아웃에 영향을 끼친다. 아래 예시를 통해서 보면 border 적용된 div박스(왼)는 테두리 값만큼 공간을 차지해서 영향을 미치는 것 볼 수 있다. 반면 outline을 적용한 요소는 영향을 받지 않는다. 테두리 속성은 위 그림처럼 outline>border 순으로 요소에 효과를 주게 되는데 때문에 컨텐트 요소와 가장 가까이에 위치한 border값을 주게 되면 레이아웃에 영향을 미치게 된다. - - 일단 여기까지 보면 outline이 border 보다 더 좋아보인다. 그렇지만, outline 경우 boder-top, border-right 처럼 특정 ..

1. float 속성 이해하기 float은 요소를 왼쪽 or 오른쪽 방향으로 띄워서 정렬시키는 속성으로 float요소는 block요소를 inline-block요소로 바꿔주는 것을 뜻한다. 요소에 float을 줄 경우 해당 요소는 최소 크기로 변경되며 띄워지고 크기가 줄면서 생긴 빈공간을 그 뒤에 있는 요소가 올라오며 채우게 된다. 다음의 예를 보면 이해가 쉬울거다 ! 예제에서는 이미지 대신 div박스로 표현했다 (_ _ ) 초록색 div요소를 float:left 하고 margin: 10px을 준 모습. 보면 텍스트 박스가 div요소를 피해서 위치된다는 것을 알 수 있다. 만약, div요소를 피해가지 않았으면 하는 요소가 특별히 있는 경우라면 해당 요소에 clear 속성을 적용하면 된다. [ clear 속..