[CSS] Float

안녕하세요 동기 여러분! 오늘은 float 프로퍼티에 대해 알아봅시다!

 

Float

영어사전에 float을 찾아보면 (액체위에) '띄우다'라는 뜻이 있습니다. 우리는 웹 페이지에 왼쪽이나 오른쪽 어디에 '요소를 띄우다'라고 생각하고 공부하면 좋을 것 같습니다. (보통 이미지와 텍스트를 한 컨테이너에 담고 싶을 때 사용합니다.)

 

float 프로퍼티에는 총 4 가지의 프로퍼티가 있습니다. 아래의 표를 봅시다.

float의 값	설명
left	해당 요소의 컨테이너 왼쪽으로 띄웁니다.
right	해당 요소의 컨테이너 오른쪽으로 띄웁니다.
none	기본 값.
inherit	부모 요소의 float 값을 상속 받습니다.

컨테이너는 여러 요소를 담을 수 있는 큰 박스를 말합니다.

 

그림을 정말 못 그렸는데 이 그림은 float: right 라고 생각 해야겠죠? ㅋㅋㅋ

 

※ 한가지 주의할점이 있다면 width를 설정해주는게 좋습니다. 만약 요소의 폭이 너무 넓다면 float를 사용하는 의미가 없어지게 됩니다.

 

 

 

 

 

 

 

 

---

 

해봅시다!

아래의 코드를 실행해보겠습니다.

<!--HTML-->
<img src="https://i1.daumcdn.net/thumb/C600x600/?fname=https://blog.kakaocdn.net/dn/bXCrOj/btrpPwmJv88/tmcuM6dsZvh34AXJiWxFB1/img.png"/>
<h1>수수께끼</h1>
<ul>
    <li>옵션이 전부 너무 좋아서 다 파란색 글씨로 바꾸어 주었다. 디아블로 2 갑옷의 끝판왕이다. 원소술사(소서리스)가 쓰는 갑옷 말고는 수수께끼 때문에 시세가 다 사라지게 되었다. 비빌 수 있는 갑옷이 없다.</li>
    <li>모든 기술 +2를 그냥 '스킬 레벨이 올라가겠구나'라고 생각하는 사람들이 많은데 그렇지 않다. 소집(콜투)로 함성을 칠 때 모든 기술 +2는 반영되어 스킬 레벨과 체력이 늘어난다. (샤코와 마라 아뮬도 이와 같다.)</li>
    <li>이동 속도 +45%도 사실 대박이다. 밀리 케릭을 해본 사람이면 느끼겠지만 다리가 느리면 상당히 불편한 점이 많은데 신발에도 최고 이동 속도 +30%가 붙는데 갑옷에 +45%라니... 룬의 힘으로 작동하는 추진기 같은게 달려있나 보다.</li>
    <li>방어력도 퍼센트가 아닌 수치로 올려 주기 때문에 일반 등급 갑옷인 브레스트 플레이트에 작을 하는 사람들도 있다. 특히 조폭넥이 수수를 착용할 경우 브레수수가 가장 룩이 예쁘다.</li>
    <li>힘을 캐릭터 레벨과 계산해서 올려주는데 스텟을 상당히 중요하게 생각하는 디아블로 2에서는 엄청난 효자 옵션이다. 비싼 레어 아이템 옵션을 보면 보통 스텟이 잘 붙어 있는데 스텟이 잘 붙는지 안 붙는지에 따라 시세 차이가 상당하다.</li>
    <li>최대 생명력 5% 증가도 엄청난 옵션이다. 스텟을 안 찍어도 생명력이 늘어난다니</li>
    <li>최고의 타격 무기인 슬픔(고뇌)의 적 처치 시 생명력이 (+10~15)이다. 수수께끼에는 그냥 +14를 준다. 물리와 마법 공격 모두에 적용된다고 한다. (맞으면서 사냥하는 햄딘에게는 무적과도 같은 옵션)</li>
    <li>맞으면서 사냥하는 밀리 캐릭터들에게 좋다고 생각할 수 도 있는 옵션이 바로 받는 피해 15%만큼 마나 회복이다. 그런데 마나 연소를 가진 유니크 몬스터에게 맞으면 어차피 마나는 다 날아가는 거 아닌가. (자료를 더 찾아보고 업데이트하겠다.)</li>
    <li>레벨이 90이면 매찬이 90%가 붙는 어마 무시한 옵션이다. 레더 후반으로 갈수록 매찬은 별로 신경 쓰지 않게 되지만 유닉 배추가 매찬 몇 퍼센트 때문에 시세가 확확 달라지는 걸 보면 수수께끼는 그야말로 사기다.</li>
    <li>마지막으로 순간이동 +1 나머지 옵션도 다 좋지만 텔포 때문에 이 갑옷을 만든다. 수수께끼가 있으면 진짜 새로운 플레이를 할 수 있게 만들어 준다. </li>
</ul>

/* CSS */
li {
  font-family: "굴림체";
  font-size: 15px;
  font-weight: bold;
}

h1 {
  font-family: kodia;
  text-align: center;
}

img {
  width: 500px;
  margin-right: 30px;
}

 

 

img에 float: left;를 넣어 적용해보겠습니다.

• 짜잔! 깔금해졌습니다.

 

---

 

오늘의 느낌

간헐적 단식에 관한 다큐멘터리를 보고 지금 실천중이다. 배고프다... 몹시

 

사진, 내용 출처

동기의 기록 : https://bookofdongi.tistory.com/32

[룬 어] 메이지 플레이트 작 수수께끼(Enigma in Mage Plate) - 직작 기념