HTML, CSS 디자인

<label> 태그에 width를 준 경우 

<label class="title" for="name">Your name:</label>

<input type="text" name="name" id="name">

css 에서 float: left; 를 준 이유는?

.title {

float: left;

width: 160px;

clear: left;}

label 태그의 display 속성이 원래 inline 인데, float 속성을 주면 block 으로 바뀐다.

float 속성을 주지 않으려면 display: inline-block 속성을 줘야 한다.

[참고] http://stackoverflow.com/questions/15172520/drawback-of-css-displayinline-block-vs-floatleft

---

부유 요소(Float)의 문제점

부모 요소가 부유 요소만 포함한다면 일부 브라우저는 부모 요소의 높이를 0픽셀로 처리한다.

전통적으로 개발자는 부모 박스 내에서 마지막 부유 박스 다음에 별도의 요소를 추가하여 이러한 문제를 처리한다. 이러한 별도의 요소에 적용되는 CSS 규칙에 clear 프로퍼티의 값을 both로 설정한다. 하지만 이는 단지 부모 요소의 높아를 수정하기 위해 HTML에 별도의 요소가 추가됐음을 의미한다.

하지만 최근에는 순수 CSS 기반의 해결 방안을 선택하곤 한다. 그 이유는 부유 요소 뒤 HTML 페이지에 별도의 요소를 추가할 필요가 없기 때문이다. 순수 CSS 해결 방안에서는 두 개의 CSS 규칙을 부모 요소에 추가한다.

overflow 프로퍼티의 값은 auto로 설정한다.

width 프로퍼티는  100%로 설정한다.

[출처] HTML&CSS 웹사이트 개발과 디자인 기초 p373

애슬렛(Aslett)씨가 고안한 Clear 메소드

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

[참고] Position is Everything (www.positioniseverything.net/easyclearing.html)

더 나은 방법의 등장(역자주)

overflow:auto;

[출처] 스타일링 CSS p161 - 찰스 와익 스미스 지음

overflow:hidden; 을 추가하는 방법도 있다.

if your container has a fixed height all the overflow will be hidden. if your container has auto height it will expand to fit his floating content.

[출처] http://stackoverflow.com/questions/13056073/getting-a-container-to-recognise-css-float-and-not-auto-adjust-height

[출처] http://theitbros.com/css-float-property-tweak/

[출처] http://stackoverflow.com/questions/3729801/why-does-the-containing-div-not-recognize-the-height-of-the-items-within

overflow: auto; 를 추가하는 방법

http://stackoverflow.com/questions/9024494/css-floating-divs-have-0-height

---

cf) HTML&CSS 웹사이트 개발과 디자인 기초 p379

* 페이지 크기

페이지 너비: 약 960~1000픽셀

페이지 상위: 570~600 픽셀 (스크롤을 하지 않고, 사용자가 볼 수 있는 영역)

결과적으로 대부분 디자인은 사용자에게 상단 570~600픽셀 내에 중요한 정보를 배치하되 동시에 아래쪽에 더 많은 콘텐츠가 있다는 암시를 제공해야 한다. 하지만 상단 영역에 너무 많은 내용을 담지 않도록 주의한다.

---