[HTML/CSS] 8. Input 디자인

Mar 13, 2025

Contents

1. static 정렬 2. relative (위치를 옮기고 싶을 때)3. absolute (독립되어 앞뒤에 나온 요소와 더 이상 상호작용 X)4. fixed (화면 고정 - 스크롤을 내려도 그대로 고정 / 배너) 5. 박스안에서 박스를 놀게 하고 싶으면??6.사진을 크기에 맞게 넣는 방법 7. 이모지 삽입하는 방법 8. 보더 크기만큼 사진 넣는 방법

CSS로 버튼과 input:text 디자인 하기-이모지와 Materialize icon사용

세상에 모든 사물에 인터넷이 연결된다.

https://blog.naver.com/codingspecialist/221498473316

1. static 정렬


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }

      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
      }

      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }

      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }

      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>

  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>

2. relative (위치를 옮기고 싶을 때)

static 일 때는 옮길 수 없음 / 마진은 자기만 밀리는 게 아님 다 밀림


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }

      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
        position: relative;
        top: 100px;
        left: 100px;
      }

      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }

      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }

      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>

  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>

3. absolute (독립되어 앞뒤에 나온 요소와 더 이상 상호작용 X)


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }

      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
        position: absolute;
      }

      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }

      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }

      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>

  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>

4. fixed (화면 고정 - 스크롤을 내려도 그대로 고정 / 배너)


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }

      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
      }

      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
        position: fixed;
        top: 300px;
      }

      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }

      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>

  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
  </body>
</html>

5. 박스안에서 박스를 놀게 하고 싶으면??

5-1. 박스 안에 놀고 싶은 박스를 넣어라

5-2.부모박스에 relative를 준다

5-3. 자식한테 absolute를 준다

5-4. 위치를 지정해준다

6.사진을 크기에 맞게 넣는 방법

박스를 하나 만들어서 그 안에 사진을 집어넣는다.

7. 이모지 삽입하는 방법


<link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />


<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
  </head>
  <body>
    <h1>Icons</h1>
    <i class="fas fa-ambulance"></i>
    <i class="fas fa-ambulance" style="font-size: 24px"></i>
    <i class="fas fa-ambulance" style="font-size: 36px"></i>
    <i class="fas fa-ambulance" style="font-size: 48px; color: red"></i>

    <i class="fas fa-fire-alt" style="font-size: 48px"></i>
    <i class="fas fa-tree" style="font-size: 80px"></i>
  </body>
</html>

W3School에서 fas fa-campground 이름을 가져온다

8. 보더 크기만큼 사진 넣는 방법


* {
        box-sizing: border-box;
      }

box-sizing를 사용하면 보더, 패딩 등의 크기를 고려해서 박스 길이에 맞게 길이를 측정한다


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      * {
        box-sizing: border-box;
      }
      .img-box {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        padding: 10px;
        margin-bottom: 10px;
      }

      .img-item {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="img-box">
      <img src="Screenshot_1.png" class="img-item" />
    </div>
    <div class="img-box">
      <img src="Screenshot_1.png" class="img-item" />
    </div>
  </body>
</html>