LLM

[6]CSS

낑낑이 2025. 8. 11. 14:59

1.인라인 스타일 : HTML 요소에 직접 작성하는 방식

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 스타일 예시</title>
</head>
<body>
    <h2>인라인 스타일 예시</h2>
    <p style="color: blue; font-size: 20px;">이것은 인라인 스타일입니다.</p>
</body>
</html>

2. 내부 스타일 (Internal Style): HTML <head>안의 <style></style>태그 사용해서 스타일 시트 기술하는 방식

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내부 스타일 예시</title>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h2>내부 스타일 예시</h2>
    <p>이것은 내부 스타일입니다.</p>
</body>
</html>

 

3. 외부 스타일 (External Style):스타일 시트를 별도의 .css파일로 분리 한 후에 <link>로 연결하는 방식

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 스타일 예시</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>외부 스타일 예시</h2>
    <p>이것은 외부 스타일입니다.</p>
</body>
</html>

 

 

 

4.색상

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>색상 예시</title>
    <style>
        .basic{
            color: red;
        }
        .hex{
            color: #0066cc;
        }
        .rgb{
            color:rgb(0,128,0);
        }
        .rgba{
            color:rgba(255,0,0,0.5);
        }
    </style>
</head>
<body>
    <p class="basic">이 문장은 red컬러입니다.</p>
    <p class="hex">이 문장은 #0066cc(파란색 계열)컬러입니다.</p>
    <p class="rgb">이 문장은 rgb(0,128,0)(녹색 계열)컬러입니다.</p>
    <p class="rgba">이 문장은 rgba(255,0,0,0.5)반투명 빨강입니다.</p>
</body>
</html>

 

5.텍스트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>색상 예시</title>
    <style>
        .shadow1{
            color: red;
            text-shadow: 1px 1px black;
        }
        .shadow2{
            text-shadow: 5px 5px 3px #ffa500;
        }
        .shadow3{
            text-shadow: 7px -7px 20px #000;
        }
    </style>
</head>
<body>
    <h1 class="shadow1">HTML</h1>
    <h1 class="shadow2">CSS</h1>
    <h1 class="shadow3">JavaScript</h1></body>
</html>

6.Static: 기본 위치 지정 방식, 요소는 바로 위에 있는 형제 요소 다음에 자동으로 배치 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>색상 예시</title>
    <style>
        body{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .blue{
            background: skyblue;

        }
        .orange{
            background: orange;
        }
    </style>
</head>
<body>
    <div class="box blue"></div>
    <div class="box orange"></div>


    <div style="height: 2000px;"></div>
</body>
</html>

 

7.Relative

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>색상 예시</title>
    <style>
        body{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .blue{
            background: skyblue;

        }
        .orange{
            background: orange;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="box blue"></div>
    <div class="box orange"></div>


    <div style="height: 2000px;"></div>
</body>
</html>

8.Absolute

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>색상 예시</title>
    <style>
        body{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .blue{
            background: skyblue;

        }
        .orange{
            background: orange;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="box blue"></div>
    <div class="box orange"></div>


    <div style="height: 2000px;"></div>
</body>
</html>

 

9.fixed

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>색상 예시</title>
    <style>
        body{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .blue{
            background: skyblue;

        }
        .orange{
            background: orange;
            position: fixed;
            top: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
    <div class="box blue"></div>
    <div class="box orange"></div>


    <div style="height: 2000px;"></div>
</body>
</html>

 

10.sticky

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>색상 예시</title>
    <style>
        body{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .blue{
            background: skyblue;

        }
        .orange{
            background: orange;
            position: sticky;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="box blu
    e"></div>
    <div class="box orange"></div>


    <div style="height: 2000px;"></div>
</body>
</html>

스크롤을 내려올때에 맞춰서 내려온다

11.Block, Inline, Inline-Block

<!DOCTYPE html>

'LLM' 카테고리의 다른 글

[Docker]Docker build/run/push/Kubernetes  (4) 2025.08.12
[7]JavaScript  (7) 2025.08.11
[5]HTML  (3) 2025.08.08
[4]컴퓨터통신/HTML  (7) 2025.08.07
[3]FAST API  (5) 2025.08.07

'LLM'의 다른글

  • 현재글[6]CSS

관련글

티스토리툴바