목차

1.CSS

1-1. CSS Float 속성의 clear 작업 하기

예전에 수평정렬을 위해 많이 사용했지만, 현재는 flex의 등장으로 사용이 많이 줄어듬

<aside> 💡 float 속성은 따로 처리를 하지 않으면 상위요소(container)가 감싸지 못하는 현상 생김 → 마지막요소에서 float을 해제 해주는 작업 필요(clear)

</aside>

• 해결방법
  • 1번 → 권장되지 않음
    • container에 overflow: hidden 속성 주기
    • float과 전혀 상관없는 overflow 속성을 통해 해결하는 것 근본적인 해결책이 아님
  • 2번 → 권장되지 않음
    • 마지막 요소를 만들어 clear: left 속성 주기
    • 실제 필요하지 않은 Element를 생성해주는 다는 것은 좋지 않은 접근
  • 3번 → 권장
    • container에 상요소 선택자 ::after 를 이용해 html 요소를 추가하기
    • .clearfix::after { content:””; display:block; clear:both;}
• 주의사항

  • float 속성을 사용하는 Item들만이 container를 구성하고 있어야만 한다.

  • 하나의 container안에 float과 float이 아닌 속성의 요소들이 섞이면, 위치가 제어할 수 없게됨

    

  • float들만 하위요소로 가지는 container를 따로 만들어주고, 해당 container에 clearfix class를 걸어주어 해결

    

1-2 CSS float의 왼쪽 오른쪽 동시에 쌓기

• Tobe

  

• 주의사항

  • 1번
    • float:right 속성의 경우, 오른쪽에서 부터 차례대로 요소들이 쌓이게 됨
      • 12 - 43 의형식
      • 따라서 3-4를 하나의 div로 묶어 float:right 속성을 주고, 그 안에서 내부 요소를 float:left 속성을 주어 원하는 레이아웃을 만들수 있다.
  • 2번
    • 하위요소의 float—right container의 경우에도 당장은 레이아웃이 찌그러지지 않지만, 추후 복잡한 상황을 대비하여, 항상 clearfix를 통해 float container에 clear 옵션을 설정해주도록 한다.

1-3. float은 어떤 경우에 display값을 block으로 바꾸는 성질이있다.

• 어떤경우

  • float이 적용된 element의 display가 inline, table 관련일 경우
  • float이 적용된 element의 display가 flex, grid인 경우는 적용 안됨

• 즉 float을 사용하는 경우, inline 요소를 사용할 수 없게되고, 해당 요소에 diplay:block; 을 명시해주지 않아도 된다

• 참고

  • inline의 특성
    • 가로와 세로 넓이가 가장 작아지려고한다.
    • 가로와 세로 넓이를 더이상 가질 수 없다

2. CSS- Position

<aside> 💡 position은 element의 위치를 적용하는 속성

</aside>