table

테이블 관련 속성들
1. border

• 일반적으로 테이블에 border를 적용하면 2줄로 보인다.
• 테이블에 선이 2줄로 보이는 이유는 th,td 태그가 각각 자신만의 테두리를 가지고 있기 때문이다.

2. border-collapse

• 해당 테이블의 테두리를 한 줄로만 표현

3. border-spacing

• 테이블 요소 간의 여백 설정

4. caption-side

• 테이블의 캡션설정

5. empty-cells

• 빈 셀들의 테두리나 배경색 표현 여부

6. table-layout

• 테이블 레이아웃 설정

float

• HTML 요소가 주변의 요소들과 자연스럽게 어울리도록 만들어주는 속성
  하지만 레이아웃을 구성할 때 요소를 정렬하기 위해 사용되는 경우가 더 많다.
  그리고 최근 flexbox 때문에 사용빈도는 과거대비 낮아진 편이다.
• float 속성은 해당 요소를 다음 요소 위에 떠있게 한다.
  (뜬다 = 기본 레이아웃 흐름에서 벗어난다)

float 사용 시 주의사항

• 해당 요소에 position : absolute(절대 위치)는 사용해서는 안된다.
• float 속성 : none, left, right

float 사용 예시

<style>
img {
    float: left;
    margin-right:15px;
}
</style>
 <img src="../0617 수업/img/img4.jpg">
<p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste perferendis in, magnam sequi est tempore, numquam inventore explicabo minus hic minima veritatis dolor esse necessitatibus ea. Temporibus aliquam sunt quo.
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste perferendis in, magnam sequi est tempore, numquam inventore explicabo minus hic minima veritatis dolor esse necessitatibus ea. Temporibus aliquam sunt quo.
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste perferendis in, magnam sequi est tempore, numquam inventore explicabo minus hic minima veritatis dolor esse necessitatibus ea. Temporibus aliquam sunt quo.
</p>

float 활용 예시

<style>
.box{
    color: white;
    font-weight: bold;
    font-size: 40px;
    border-radius: 6px;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding:5px;
}
 .n1{
    background-color: red;
    float: left;
}
.n2{
    background-color: orange;
    float: left;
}
.n3{
    background-color: red;
    float: right;
}
.n4{
    background-color:orange;
    float: right;
}
</style>
<div id="container">
     <div class="box n1">1</div>
     <div class="box n2">2</div>
     <div class="box n3">3</div>
     <div class="box n4">4</div>
</div>

float와 width

• width를 선언하지 않고 float 속성을 적용시킨다면?
  --> width를 선언하지 않은 block 요소에 float 속성이 선언되면 width가
  인라인과 같이 컨텐츠에 맞게 적용된다 (요소 위에 떠 있다)
  (inline-block와 유사하게 동작 같은 듯 다르다)

width를 선언하지 않은 예시

<style>
.box{
    color: white;
    font-weight: bold;
    font-size: 25px;
    border-radius: 6px;
    height: 50px;
    margin: 0 50px;
    padding: 10px;
}
.n1{
    float: left;
    background-color:red;
}
.n2{
    background-color: blue;
    clear:both; 
    overflow:hidden;

}
</style>
 <div class="box n1">float이 적용된 div</div>
 <div class="box n2">일반 div</div>

float 관련 문제 및 해결방법

• margin 관련 : 요소를 정렬할 때 float이 선언되어 있다면 float가 선언된 요소가 사실상 떠 있기(부유하고 있기)때문에 마진값이 제대로 적용되지 않는 사례가 많다.
  --> 해결방안 : overflow:hidden을 float을 선언하지 않은 태그에 선언한다.
  넘치는 부분을 보이지 않게끔 처리해주는 역할