참고한 사이트

• 강의 짐코딩 유튜브
• 사진 pixabay1 pixabay2,
• 글 위키백과

오늘은 귀여운 여우로 실습 !~!

✔️ float 속성

---

인접한 텍스트나 인라인 요소가 주위를 자연스럽게 감싸게 함

• none 기본값, 요소를 띄우지 않음
• left 왼쪽에 띄움
• right 오른쪽에 띄움
• inherit 부모 요소로부터 상속
• initial 기본값으로 설정

실습

1. display block 요소인 div 태그로 container를 만들고 그 안에 p 문단 블록 태그를 사용해서 이미지와 글을 넣었다.

   <!-- html -->
   <div class="container">
     <p>
       <img class="float-left" src="../image/15_fox1.jpg" alt="fox1" />
       여우는 개과에 속하는 여러 동물의 총칭이다. 개과의 동물 중 작은 편에
       속하는 동물로, 보통의 개보다 작으며 ~~~
     </p>
     <p>
       <img class="float-right" src="../image/15_fox2.jpg" alt="fox2" />
       여우는 잡식성 동물이다.~~~
     </p>
   </div>

   
   

2. container와 img의 너비를 설정하고 container는 회색 박스까지 만듦

   /* css */
   .container {
     width: 800px;
     border: 1px solid gray;
   }
   
   img {
     width: 200px;
   }

   

3. 각 사진에 float-left, float-right 설정하고 글씨 10px만큼 사진에서 떨어져...

   /* css */
   .float-left {
     float: left;
     margin-right: 10px;
   }
   
   .float-right {
     float: right;
     margin-left: 10px;
   }
   
   p {
     border: 1px solid blue;
   }

   

• 텍스트가 아주 예쁘게 사진 옆으로 옮겨붙은 것을 볼 수 있음 ^0^0^
  저기 텍스트 밑에 삐져나온 게 맘에 들지 않는다면 컨테이너의 width를 넓히면 돼 ~ !요 ~ !
  
• .container width 800px에서 1200px까지 늘림
• 또 여기서 저기 두 번째 문단 시작할 때 첫 번째 문단이랑 구분하고 싶고... 쟤랑 좀 떨어지고 싶으면 그 때 사용하는 게 clear!!!!!!!!!!!!!!!!!!!!

✔️ clear 속성

---

float 속성을 취소함

• clear: none; 기본값
• clear: left; 왼쪽 취소
• clear: right; 오른쪽 취소
• clear: both; 둘다 취소

실습

4. 자 이렇게 clear를 사용해서 p태그의 float 속성을 취소했다.
   
   코드를 어떻게 작성할까? ➡️ float이랑 사용 방법이 같다. 근데 속성값은 none left right 외 다른 게 있음 주의

   /* css */
   .clear {
   clear: both;
   }

   이렇게 css에서 설정하고 html에서 적용하면 첫 번째 문단 이미지의 float 속성에 걸리지 않는다 ~

   그런데 또 저렇게 첫 번째 이미지랑 두 번째 문단이 붙어있는 게 맘에 안 들어?
   그럼 br태그를 사용하든가 아니면 float-left의 css 속성에서 margin-bottom: 20px;로 설정해 버린다.

<br> 적용

margin-bottom: 20px; 적용

이렇게 우리가 원하는 이상적인 ~ 간격 ~ 완성 ~!

내가 한 실습에서 이미지가 두 개뿐이라서 br을 쓰거나 float-left에 bottom 간격을 조절한 거지만 만약 문단이 많아지면 유지보수가 어렵지 않을까........
➡️ p태그에서 margin-bottom과 margin-top 간격을 조정하는 게 좋은 방법일 것 같다.

1. bottom만 100px
   

2. top과 bottom 둘다 50px씩
   

두 번째 top과 bottom을 같이 조정하는 게 예쁘죠 ~^^