입문) HTML 과 CSS (float 과 부작용 해결)

 CSS 

★ 3대 속성 : position, display,  float ★ 

이번에는 float 에 대해 알아보자

---

float

: (떠다니다) 의 기본값은 none; 이다 . (웹 퍼블리셔의 무기)

 

 

특징

- 최대한 너비 다이어트를 해서 위로 올라갈 수 있으면 올라간다. 못 올라가면 다음 줄에 나온다.

 

- 자식에 float값이 있으면 부모의 너비가 부정확하다. 때문에

그 다음에 와야 할 내용은 줄어든 너비때문에 시각적으로 이상하게 나온다. 

 그래서 자식에 float 요소를 가지고 있는 부모는 항상 막내를 추가해야한다.

그 막내는 display:block; 과  clear:both;속성을 가지고 있어야한다. 

이 속성은 형들 밑에 막내가 깔리게 하는 역할을 한다. 

 

 

사용방법

: 한줄로 나올때는 display:inline-block;이 좋다 . 하지만 디자인적으로

  한줄에 공백 없이 쭉 왼쪽에서 차례로 출력 하려면  float:left; 를 써야한다 .

- 기본 block요소는 앞의 엘리먼트의 블럭이 끝나는 쪽에서 시작된다.

- display:block; 은 width:auto; 가 width:100% 처럼 작동한다. (너비)

- height:auto; 는 내가 포함하고 있는 자식들을 감쌀 수 있을 만큼만 늘어난다.  (높이)

 

ㅡ float 기본값

float:left 를 하면 inline-block 에서 공백 없이 된다.

float:rignt 는 오른쪽으로  반대 순서로 나옴 .

- section 의 기본은 display:block 이다

display:block (여백없음) float:left 는 블럭의 공백무시를 유지하면  inline-block처럼 한 줄에 다 나오게 할 수 있다.

- div의 기본 width , height 속성값은 auto 이다. (상황에 따라 유동적으로 자동)

- height :auto === 자식이 있으면 자식의 크기 만큼. 자식이 없으면 0 만큼 

 

 

 

*부작용

: (배경 디자인이 이상해짐. float이 있으면 없는 샘 친다. )

감싸고 있는 부모가 자식(float:left 또는 float:rignt 이면)의 높이에 자동적으로 조절되지 않음. 그럴때

그 상위 엘리먼트에 하위 엘리먼트가 올라타거나 겹칠 수 있음.  (부모 배경 값이 정렬안됨 )

 

*해결방법

그럴 경우 자식을 감싸는 부모에게 막내(section)에 ""를 넣고 다시 값을 줘야함 (아래처럼)

section::after {
    content:"";
    display:block;
    clear:both;

 

 

<해결방법 두가지 설명  >

ㅡdiv::before { content:"";}  공백  또는 div::after  { content:"";} 

div::before 란? 

div의 내부에서 가장 처음 ! ( inline-block 속성임 )

 

ㅡclear:both; 

==  float 요소의 줄바꿈 . block 속성을 가지고 있어야한다. 

이 속성은 형들 밑에 막내가 깔리게 하는 역할을 한다. 

==float이 있는 엘리먼트 사이에 엘리먼트(section) 를 넣고  거기에 clear:both; 를 쓰거나,

::after 를 통해서 block값에 줄바꿈을 넣는다.

 

section{

      content:"";
    display:block;
    clear:both;} 

 

---

<예시1>

float 을 쓰지만 "공간"이라는 글짜가 block으로 제일 밑에 위치하기.

 

 HTML 

<h1>예제</h1>
<article>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</article>
"공간"

 

 CSS 

article > div {
  background-color:blue;
  height:100px;
  width:15%
  display:block;
  float:left;
}
article {
  background-color:red;
}
article::after {

   content:"";
  background-color:gold;
   clear:both;

  display:block;
}

---

<예시2>

 HTML    section에 5를 추가하기.

 

<h1>go</h1>

<section>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</section>

<ul>
  <li>당근</li>
  <li>오이</li>
  <li>양파</li>
  <li>사과</li>
</ul>

 

 CSS 

section에 5를 추가하기.

section::after {
  content:"5";
  background-color:blue;
  display:block;   /* 추가한 5 는 따로 블록 지정해줘야함 */
}
section > * {                  /*  * 는 섹션의 자식 모두 선택 */
  display:block;
  background-color:red;
}

/*리스트에 반복 글자 추가*/

/*노멀라이징*/

ul, li {
  list-style:none;
  padding:0;
  margin:0;
}

ul > li::before {
  content:"* ";
}
ul > li::after {
  content: " 하나";
}

section > div::before {
  content:"- ";
}

section > div::after{
  content: "** ";
}

 

 

 

 

 

 

---

 

 CSS 

width:너비

height:높이

div의 기본 width , height 속성값은 auto 이다. (상황에 따라 유동적으로 자동)