HTML

CSS(Cascaidng Style Sheets)

박선규's avatar
박선규
Jan 16, 2024
CSS(Cascaidng Style Sheets)
Contents
Style 기본 속성inlineinlie- block꿀팁Style 추가 속성
📌
html은 문서를 구조화 하는 파일 css는 문서를 디자인 할 때 사용 한다. 태그마다 고유한 디자인 속성들이 있다.
 
 

Style 기본 속성

📌
style문법은 head안에 넣어야 한다.
width (너비):
width 속성은 요소의 가로 너비를 지정합니다.
height (높이):
height 속성은 요소의 세로 높이를 지정합니다.
background-color (배경색):
background-color 속성은 요소의 배경색을 지정합니다.
margin-bottom (아래쪽 마진):
margin-bottom 속성은 요소의 아래쪽 마진을 지정합니다. 마진은 요소와 주변 요소 사이의 간격을 조정하는 데 사용됩니다.
display (디스플레이):
display 속성은 요소의 표시 방법을 지정합니다. 위의 코드에서는 div 요소를 inline-block으로 설정하였습니다. 이는 div 요소를 inline과 block의 특성을 모두 가진 요소로 표시하게 됩니다. 다른 요소와 함께 한 줄에 표시되면서, block 요소처럼 너비와 높이를 설정할 수 있습니다.
border (테두리):
border 속성은 요소의 테두리 스타일을 지정합니다. 위의 코드에서는 div 요소의 테두리를 검은색(black)으로 설정하였고, 두께를 10px로 지정하였습니다.
padding (안쪽 여백):
padding 속성은 요소의 내부 여백을 지정합니다. 위의 코드에서는 div 요소의 안쪽 여백을 10px로 설정하였습니다. 내용과 테두리 사이의 간격을 조정하는 데 사용됩니다.
 

inline

📌
무조건 내용물 크기에 의해 정해진다. 즉 글자가 있어야지 변경가능하다.
inline:
인라인
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            height: 200px;
            background-color: red;
            margin-bottom: 10px;
            display: inline;
            border: dotted black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>1dfdfdfd</div>
    <div>2</div>
    <div>3</div>
</body>

</html>
notion image
notion image
💡
width를 추가해도 박스의 크기가 변하지 않는다.
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 10px;
            display: inline;
            border: dotted black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>1dfdfdfd</div>
    <div>2</div>
    <div>3</div>
</body>

</html>
notion image
 
 
 

inlie- block

📌
박스를 크기를 내 설정에 맞춰 지정하고 싶을 때 사용 즉 글자가 없어도 박스를 맘대로 설정 가능
inline- block
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 10px;
            display: inline-block;
            border: dotted black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>1dfdfdfd</div>
    <div>2</div>
    <div>3</div>
</body>

</html>
notion image
 

꿀팁

<head 내부에 sytle 태그를 넣어 css를 작성하는 방법>

📌
<head > 내부에 css를 작성하는 방법으로 해당 html파일에만 css가 적용된다. 특정 페이지만 디자인을 변경하고 싶은 경우 사용한다.
예제
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
    <title>고양이의 일상</title>
    <style>
        h1 {
            color: #f00;
        }

        p {
            font-size: 18px;
        }
    </style>
</head>

<body>
    <h1>고양이의 하루</h1>
    <p>계속 잠을 잡니다.</p>
</body>

</html>
notion image
 

<태그에 직접 css를 작성하는 방법>

📌
하나 하나의 태그에 지정 하는 것이 번거롭고, 유지 보수도 어려워 잘 사용하지 않는다. 하지만 다른 지정 방법보다 css를 적용하는 우선 순위 높아서 css를 덮어 씌우고 싶은 경우 등 일부 디자인만 변경하고 싶을 때 사용한다.
예제
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
    <title>고양이의 일상</title>
</head>

<body>
    <h1 style="color: #f00>고양이의 하루</h1>
    <p style = " front-size:18px;">계속 잠을 잡니다.</p>
</body>

</html>
notion image
 

<css 파일 생성 및 코드 작성하기>

📌
UTF-8로 문자 깨짐을 막기 위해 사용한다.그리고 반드시 이 줄을 맨 처음에 작성한다.
예제
@charset "utf-8";

body {
    background-color: #fffeee;
}

h1 {
    color: #0bd;
}

p {
    font-size: 20px;
}
 

<css 파일 저장하기 후 HTML 파일의 <haed> 내부에서 css 파일 읽어들이기>

📌
보편적으로 이렇게 작업한다. 파일하나당 css파일도 동일하게 만든다. 윈도우의 경우 Ctrl +S 저장후 만들었던 css파일을 head내부에 넣어서 css 파일을 읽어들인다.
예제
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
    <title>고양이의 일상</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>고양이의 하루</h1>
    <p>계속 잠을 잡니다.</p>
</body>

</html>
notion image

Style 추가 속성

📌
선택자: 타겟 지정 여러개의 다른 디자인에 만드려는걸 만들 수 있음 속성:border - radius 테두리를 둥글게 만들 때 사용 box-shadow: 그림자를 만들고 싶을 때 사용 (수평, 수직, px, px, 색상) 값:
input은 제한 되는게 너무 많아서 button을 쓰기(svg 사용법)
notion image
notion image
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .btn1-search {
            background-color: #ff5a5f;
            border: 0px;
            width: 70px;
            height: 45px;
            font-size: 15px;
            color: white;
            font-weight: 700;
            border-radius: 6px;
            box-shadow: 3px 3px 0px 0px rgb(192, 171, 171);
        }

        .btn-google {
            background-color: white;
            width: 400px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 1px solid black;
        }
    </style>

</head>

<body>
    <h1>버튼</h1>
    <hr>
    <input type="button" value="검색" class="btn1-search">
    <input type="button" value="검색" class="btn2-search">
    <br><br>
    <button class="btn-google">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25px" height="25px">
            <path fill="#fbc02d"
                d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" />
            <path fill="#e53935"
                d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" />
            <path fill="#4caf50"
                d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" />
            <path fill="#1565c0"
                d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z" />
        </svg>
        구글 계정으로 로그인
    </button>
</body>

</html>
input text: 사용자가 입력받는 txt만들 때 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .btn1-search {
            background-color: #ff5a5f;
            border: 0px;
            width: 70px;
            height: 45px;
            font-size: 15px;
            color: white;
            font-weight: 700;
            border-radius: 6px;
            box-shadow: 3px 3px 0px 0px rgb(192, 171, 171);
        }

        .btn-google {
            background-color: white;
            width: 400px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 1px solid black;
        }

        .tf-search {
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 4px;
        }
    </style>

</head>

<body>
    <h1>버튼</h1>
    <hr>
    <input type="button" value="검색" class="btn1-search">
    <input type="button" value="검색" class="btn2-search">
    <br><br>
    <button class="btn-google">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25px" height="25px">
            <path fill="#fbc02d"
                d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" />
            <path fill="#e53935"
                d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" />
            <path fill="#4caf50"
                d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" />
            <path fill="#1565c0"
                d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z" />
        </svg>
        구글 계정으로 로그인
    </button>
    <br>
    <h1>Input 태그</h1>
    <hr>
    <input type="text" class="tf-search" placeholder="🔎 Search...">
</body>

</html>
이미지로 검색해서 이모지로 바꾸기
 
notion image
윗 사진에서 코드 복사해서
notion image
여기 넣으면 라이브러리 사용 가능
notion image
notion image
그 다음 윗 사진 처럼 icons 클릭 한다음 무료 icons들어가서 사용 하고 싶은거 사용 가능 
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://kit.fontawesome.com/df3f486c7c.js" crossorigin="anonymous"></script>
    <style>
        .btn1-search {
            background-color: #ff5a5f;
            border: 0px;
            width: 70px;
            height: 45px;
            font-size: 15px;
            color: white;
            font-weight: 700;
            border-radius: 6px;
            box-shadow: 3px 3px 0px 0px rgb(192, 171, 171);
        }

        .btn-google {
            background-color: white;
            width: 400px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 1px solid black;
        }

        .tf-search {
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 4px;
        }

        .box-search {
            position: relative;
        }

        .tf-search2 {
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 4px;
            padding: 0 0 0 35px;
        }

        .icon-search {
            position: absolute;
            top: 15px;
            left: 10px;

        }
    </style>

</head>

<body>
    <h1>버튼</h1>
    <hr>
    <input type="button" value="검색" class="btn1-search">
    <input type="button" value="검색" class="btn2-search">
    <br><br>
    <button class="btn-google">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25px" height="25px">
            <path fill="#fbc02d"
                d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" />
            <path fill="#e53935"
                d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" />
            <path fill="#4caf50"
                d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" />
            <path fill="#1565c0"
                d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z" />
        </svg>
        구글 계정으로 로그인
    </button>
    <br>
    <h1>Input 태그</h1>
    <hr>
    <input type="text" class="tf-search" placeholder="🔎 Search...">
    <br><br>

    <div class="box-search">
        <input type="text" class="tf-search2" placeholder="Search...">
        <i class="fa-solid fa-magnifying-glass icon-search"></i>
    </div>

</body>

</html>

static

📌
inline 속성으로 html에서 기본 속성 플로우다.
코드, 이미지
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
            display: inline-block;
            position: static;
        }

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

        }

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

        }
    </style>

</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>

</html>
notion image

relative

📌
상대적으로 위치를 정할 수 있음 앞에 플로우랑 연간 되어서 움직임 만약 박스가 하나 밖에 없을 때 상대적 위치는 body의 상대적 위치로 정해진다.
코드, 이미지
<!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>
notion image

absouilte

📌
도화지를 한 장 더 만들어서 그림을 그린다. 부모 도화지 안에서 자식 도화지가 하나더 생성 되는거다.(z-index) 부모를 relative로 그리고 자식을 absolute로 그리면 자식이 부모 안에서 그려진다. 모든 그린 그림은 자식을 먼저 그리고 부모를 그린다. (내가 부모로 만들고 싶은것을 못만들 경우에는 div를 만들어 부모로 설정하고 자식으로 설정하고 싶은걸 설정하면 된다.)
코드, 이미지
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://kit.fontawesome.com/df3f486c7c.js" crossorigin="anonymous"></script>
    <style>
        .btn1-search {
            background-color: #ff5a5f;
            border: 0px;
            width: 70px;
            height: 45px;
            font-size: 15px;
            color: white;
            font-weight: 700;
            border-radius: 6px;
            box-shadow: 3px 3px 0px 0px rgb(192, 171, 171);
        }

        .btn-google {
            background-color: white;
            width: 400px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 1px solid black;
        }

        .tf-search {
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 4px;
        }

        .box-search {
            position: relative;
        }

        .tf-search2 {
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 4px;
            padding: 0 0 0 35px;
        }

        .icon-search {
            position: absolute;
            top: 15px;
            left: 10px;

        }
    </style>

</head>

<body>
    <h1>버튼</h1>
    <hr>
    <input type="button" value="검색" class="btn1-search">
    <input type="button" value="검색" class="btn2-search">
    <br><br>
    <button class="btn-google">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25px" height="25px">
            <path fill="#fbc02d"
                d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" />
            <path fill="#e53935"
                d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" />
            <path fill="#4caf50"
                d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" />
            <path fill="#1565c0"
                d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z" />
        </svg>
        구글 계정으로 로그인
    </button>
    <br>
    <h1>Input 태그</h1>
    <hr>
    <input type="text" class="tf-search" placeholder="🔎 Search...">
    <br><br>

    <div class="box-search">
        <input type="text" class="tf-search2" placeholder="Search...">
        <i class="fa-solid fa-magnifying-glass icon-search"></i>
    </div>

</body>

</html>
notion image

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: bisque;
            display: inline-block;
            position: fixed;
            top: 50px;
            right: 10px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

</html>
notion image
<br> 이 많은 건 스크롤을 만들기 위함이다. 사진에는 표시되어있지 않지만, 다른 박스는 스크롤을 내리면서 사라졌지만 box3은 스크롤을 내려도 계속 표시된다.
 
📌
모든 디자인의 배치 기준은 부모다. 부모가 없을 경우에는 바디가 기준이 된다. 배치 하려는 애(자식)는 무조건 inline 속성이여야한다. text-align은 배치하려는 것을 위치를 지정하는 문법이다.
Share article

More articles

See more posts

CSS - flex

January 17, 2024
CSS - flex

CSS - grid

January 16, 2024
CSS - grid

HTML

January 15, 2024
HTML

37. http 프로토콜 통신

January 12, 2024
37. http 프로토콜 통신

p4rksk

RSS·Powered by Inblog