웹 디자인 만들기

Jan 29, 2024

Contents

CSS(Cascading Style Sheets)solid

jetbrain keymap 플러그인 설치하기

file-preferences-settings format on save

CSS(Cascading Style Sheets)

문서의 외관을 장식할 때 사용하는 언어


<!DOCTYPE html>
<html lang="en">

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

</head>

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

</html>

dotted


border: 10px dotted black;

solid


border: 10px solid black;

margin

<div>1</div>를 클릭한 후 오른쪽 아래 그림 margin에 커서를 두면 왼쪽 화면에서 margin 부분을 표시해 준다.

Padding

padding을 적용했을 때

padding을 적용하지 않았을 때

<div>1</div>를 클릭한 후 오른쪽 아래 그림 padding에 커서를 두면 왼쪽 화면에서 padding 부분을 표시해 준다.

block

요소 마다 한 줄이 생기며 width=100%, height:auto를 갖는다

inline

요소의 너비와 높이는 내용물의 크기에 맞추어 결정된다. (width=auto, height=auto)

width, height, margin top, margin bottom, padding top, padding bottom 을 적용할 수 없음

잘 안씀

inline block

고유의 크기를 가지며 인라인과 같이 줄바꿈 없이 다른 요소들과 함께 배치 가능하다.

HTML 파일의 head 내부에 Style태그를 넣어 작성하기


<!DOCTYPE html>
<html lang="en">

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

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


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

</body>

</html>

실행 결과

HTML태그 내부에 style속성을 지정 할 수도 있다.


<!DOCTYPE html>
<html lang="en">

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


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

</body>

</html>

CSS 파일 만들어 html 파일에 적용하기

CSS 코드를 작성한 style.css 파일을 만든다.(하늘색으로 설정, 문자 크기 20px)

HTML 파일의 head 내부에서 CSS파일을 읽어들인다.

실행 결과

💡

CSS 파일 이름은 HTML파일 이름과 마찬가지로 한국어와 띄어쓰기를 할 수 없으며 .css확장자를 붙인다.


<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        .btn-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(87, 71, 71);
        }

        .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;

        }

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

        }
    </style>
</head>

<body>
    <i class="fa-brands fa-apple"></i>
    <i class="fa-solid fa-magnifying-glass"></i>
    <h1>버튼</h1>
    <hr>
    <input type="button" value="검색" class="btn-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>
    <br>
    <input type="text" class="tf-search" placeholder="🔎 Search...">
    <br><br>
    <input type="text" class="tf-search2" placeholder="Search...">

</body>

</html>

💡

code convention : class 이름을 지을 때 통일성 있게 짓자


<input type="button" value=" 구글 계정으로 로그인" class="btn-google">

svg


<body>

    <h1>버튼</h1>
    <hr>
    <input type="button" value="검색" class="btn-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>

이모지를 쓸 경우 복사 붙여넣기

svg를 쓸 경우 다운로드 → 바탕화면에 저장 → 메모장으로 열기 → 붙여넣기

💡

Font Awesome : 무료아이콘

💡

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers : css 라이브러리

💡

colorzilla : 크롬 확장 프로그램, 색상 퍼서 컬러코드 알아내기

CDN

CSS 포지션 속성


<!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>

static : 기본 설정값 문서의 흐름에 따라 배치

relative : 상대적 위치를 결정 왼쪽의 요소에 연관되어 결정된다.

absolute : 도화지를 한 장 더 덧대는 것 위에 덮어쓰기


<!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;
            position: relative;
        }

        .box5 {
            width: 100px;
            height: 100px;
            background-color: bisque;
            display: inline-block;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

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

</body>

</html>

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;
        }

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

        .box5 {
            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>
    <div class="box4"></div>
    <div class="box5"></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 />
</body>

</html>


<!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;
            position: relative;
        }

        .box5 {
            width: 100px;
            height: 100px;
            background-color: bisque;
            display: inline-block;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

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

</body>

</html>

자식 absolute는 부모 relative 안에서 변경된다.

배치는 부모로부터 결정된다.


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box1 {
            background-color: aliceblue;
            border: 1px solid black;
            height: 300px;
            width: 300px;
            display: inline-block;
            text-align: center;

        }

        .inner1 {
            background-color: red;
            width: 200px;
            height: 100px;
            display: inline-block;

        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="inner1">HelloWorld</div>
    </div>
</body>

</html>

Grid


<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            background-color: #2196F3;
            padding: 10px;
        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>

<body>

    <h1>Grid Elements</h1>

    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>

</body>

</html>

Contents

CSS(Cascading Style Sheets)solid

<!DOCTYPE html> <html lang="en"> <head> <style> div { width: 200px; height: 50px; background-color: red; margin-bottom: 10px; display: inline-block; border: 10px solid black; padding: 10px; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>고양이의 일상</title> <meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다."> <style> h1 { color: #f00; } p { font-size: 18px; } </style> </head> <body> <h1>고양이의 하루</h1> <p>계속 잠을 잡니다.</p> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>고양이의 일상</title> <meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다."> </head> <body> <h1 style="color: #f00;">고양이의 하루</h1> <p style="font-size: 18px;">계속 잠을 잡니다.</p> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <style> .btn-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(87, 71, 71); } .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; } .tf-search2 { height: 40px; width: 300px; font-size: 20px; border-radius: 4px; } </style> </head> <body> <i class="fa-brands fa-apple"></i> <i class="fa-solid fa-magnifying-glass"></i> <h1>버튼</h1> <hr> <input type="button" value="검색" class="btn-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> <br> <input type="text" class="tf-search" placeholder="🔎 Search..."> <br><br> <input type="text" class="tf-search2" placeholder="Search..."> </body> </html>

<!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; position: relative; } .box5 { 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> <div class="box4"></div> <div class="box5"></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 /> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> .box1 { background-color: aliceblue; border: 1px solid black; height: 300px; width: 300px; display: inline-block; text-align: center; } .inner1 { background-color: red; width: 200px; height: 100px; display: inline-block; } </style> </head> <body> <div class="box1"> <div class="inner1">HelloWorld</div> </div> </body> </html>

<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } </style> </head> <body> <h1>Grid Elements</h1> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div> </body> </html>