CSS

sangeun·2026년 9월 27일
2026-2farmsystem

‘프로퍼티 : 값; ‘

  • 반드시 태그 내에서만 작성 가능하다
  • 여러 번 작성 가능하며 스타일 시트들이 합쳐 적용된다.
  • 웹 페이지 전체에 적용
<!DOCTYPE html>
<html>
    <head>
        <title>&lt; style &lt; 태그로 스타일 만들기</title>
        <style>
            body{
                background-color:linen;
                color:blueviolet;
                margin-left:30px;
                margin-right:30px;
            }
            h3{
                text-align:center;
                color:darkred;
            }
            p{
                color:red; font-size:15px;
            }
        </style>
    </head>
    <body>
        <h3>소연재</h3>
        <hr>
        <p>
            저는 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치찌개도 좋아합니다.
        </p>
        <p style="color:blue">그리고</p>
        <p style="color:magenta;font-size:15px">마지막으로</p>
    </body>
</html>

단. 특정 태그에 대한 꾸미기를 직접 개별적으로도 가능하다.

외부 스타일 시트 파일 불러오기 (.css확장자)

  • 태그 이용
  • @import 이용

(CSS3파일에는

  • type =” text/css”는 불러오는 파일이 CSS언어로 작성된 텍스트 파일임을 알림
  • rel=”stylesheet”는 불러오는 파일이 스타일 시트임을 알려준다.
  • 태그를 여러 번 사용해 여러 CSS파일을 불러 올 수 있다.
<!DOCTYPE html>
<html>
    <head>
        <title>&lt; style &lt; 태그로 스타일 만들기</title>
        <link type=""text/css" rel="stylesheet" href="2.css">>
    </head>
    <body>
        <h3>소연재</h3>
        <hr>
        <p>
            저는 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치찌개도 좋아합니다.
        </p>
        <p style="color:blue">그리고</p>
        <p style="color:magenta;font-size:15px">마지막으로</p>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <title>&lt; style &lt; 태그로 스타일 만들기</title>
        <style>
           @import url(2.css);  
           /* @import url('mystyle.css') */
           /* @import "mystyle.css" */
        </style>
       
    </head>
    <body>
        <h3>소연재</h3>
        <hr>
        <p>
            저는 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치찌개도 좋아합니다.
        </p>
        <p style="color:blue">그리고</p>
        <p style="color:magenta;font-size:15px">마지막으로</p>
    </body>
</html>

@import문은 

body{
    background-color:rgb(167, 115, 63);
    color:blueviolet;
    margin-left:30px;
    margin-right:30px;
}
h3{
    text-align:center;
    color:darkred;
}
p{
    color:red; font-size:15px;
}

추가로 CSS3 스타일은 부모 태그로부터 상속된다. 따라서

의 자식 태그는 이 있어,

의 스타일에 스타일이 추가되는 구조이다.

스타일 합치기

  1. 브라우저의 디폴트 스타일
  2. .css 스타일 시트 파일
  3. 태그
  4. style 속성에 작성된 스타일

1→ 4로 갈수록 우선 순위가 높아진다.

셀렉터

h3, li {color : brown;}
//셀렉터를 ' , ' 를 이용해 분리시킴

class 셀렉터

셀렉터 앞에 ‘ . ‘을 붙인 경우 class 속성 지정

.warning {color:red;}
body.main{background : aliceblue;}

//html 파일

<body class="main">
	<div class="warning"> </div>

</body>

id 셀렉터

셀렉터 앞에 ‘#’를 붙인 경우 id 속성 지정

#list {background : mistyrose;}

//html
<ul id="list">
</ul>

id 셀렉터는 유일해야 해서

같은데에 사용 x

에서 사용 가능 ⇒ div#id

자식 셀렉터

div > strong {color : dodgerblue;}

div > div > strong { color : dodgerblue;}

자손 셀렉터

ul strong { color: dodgerblue;}

자식 셀렉터는 특정할 수 있게 자식을 지정할 수 있고, 자손 셀렉터는 2개 이상의 태그의 나열로 범주를 지정할 수 있다.

전체 셀렉터

* { color: green;}
<!DOCTYPE html>
<html>
    <head>
        <title>셀렉터 만들기</title>
        <style>
            h3,li{
                color:brown;
            }
            div>div>strong{background:yellow;}
            ul strong{
                color:dodgerblue;
            }
            .warning{
                color:red;
            }
            body.main{
                background:aliceblue;
            }
            #list{
                background:mistyrose;
            }
            #list span{
                color:forestgreen;
            }
            h3:first-letter{
                color:red;
            }
            li:hover{
                color:yellowgreen;
            }
        </style>
    </head>
    <body class="main">
        <h3>Web Programming</h3>
        <hr>
        <div>
            <div>2학기 <strong>학습 내용</strong>입니다.</div>
            <ul id="list">
                <li><span>HTML</span></li>
                <li><strong>CSS</strong></li>
                <li>JavaScript</li>
            </ul>
            <div class="warning">60점 이하는 F</div>
        </div>

    </body>
</html>

박스 모델

  • 콘텐츠
  • 패딩(padding)
  • 테두리(border) = “ border : 두께 선스타일 색깔 “ 한 번에 지정가능
  • 여백(margin)
<!DOCTYPE html>
<html>
    <head>
        <title>박스모델</title>
        <style>
            div{
                background:yellow;
                padding:20px;
                border:5px dotted red;
                margin:30px;
            }
        </style>
    </head>
    <body>
        <h3>박스 모델</h3>
        <p>margin 30px, padding 20px, border 5px의 빨간색 점선</p>
        <hr>
        <div>
            <img src="img.png" alt="고양이">
        </div>
    </body>
</html>

마우스 커서 제어

<!DOCTYPE html>
<html>
    <head>
        <title>마우스 커서</title>
    </head>
    <body>
        <h3>마우스 커서</h3>
        <hr>
        <p style="cursor:crosshair">마우스 커서가 십자 모양으로 바뀝니다.</p>
        <p style="cursor:help">마우스 커서가 물음표 모양으로 바뀝니다.</p>
        <p style="cursor:pointer">마우스 커서가 손 모양으로 바뀝니다.</p>
        <p style="cursor:progress">마우스 커서가 진행 중 모양으로 바뀝니다.</p>
        <p style="cursor:n-resize">마우스 커서가 위쪽으로 화살표 모양으로 바뀝니다.</p>
    </body>
</html>
                              ### display 프로퍼티로 박스 유형 설정
  • display:none
  • display:inline
  • display:inline-block (inline과 같지만 margin설정 가능)
  • display:block
<!DOCTYPE html>
<html>
    <head>
        <title>display 프로퍼티</title>
        <style>
            div{
                color:blue;
                background:aliceblue;
                border:2px solid yellowgreen;
            }
            span{
                border:3px dotted red;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <h3>인라인, 인라인 블록, 블록</h3>
        <hr>
        나는 <div style="display:none;">div(none)</div>입니다.<br><br>
        나는 <div style="display:inline;">div(inlined)</div>입니다.<br><br>
        나는 <div style="display:inline-block;">div(inline-blocked)</div>입니다.<br><br>
        나는 <div>div<span style="display: block;">span(block)</span>입니다.</div><br><br>
    </body>
</html>

박스의 배치, position

웹 페이지에 나타난 순서대로 HTML 태그를 배치(normal flow)

원하는 위치에 배치 - position

bottom top left right width height 로 배치

  • 정적 배치 - position : static(default)
  • 상대 배치 - postion : relative = 정적 배치(normal flow)에 따른 기본 배치에서 얼마나 다른 곳에 배치
  • 절대 배치 - position : absolute = left top을 이용해 배치 좌표 설정
  • 고정 배치 - position : fixed = 뷰포트에 고정(절대 배치와의 차이)시켜 브라우저에 항상 보이게 함. (글씨가림)
  • float를 이용한 유동 배치 = 항상 같은 위치에 출력(글씨 안가림)
  • 수직으로 쌓기, z-index = z-index : 정수(n) ; → n의 값이 클수록 위에 쌓임 ( relative absolute에만 적용)
  • visibility : 보이지 않게 함
  • overflow : visible(잘리지 않고 출력) | hidden(콘텐츠 크기만큼 잘라서 출력) | scroll(스크롤바 항상 부착 생성) | auto(height보다 넘치면 스크롤바 자동 생성)

리스트 단축 프로퍼티, list-style

list-style : list-style-type list-style-position list-style-image
  • 리스트로 메뉴 만들기
<!DOCTYPE html>
<html>
    <head>
        <title>리스트로 메뉴 만들기</title>
        <style>
            nav#menubar{
                background:olive;
            }
            nav#menubar ul{
                margin:0;
                padding:0;
                width:567px;
            }
            nav#menubar ul li{
                display:inline;
                list-style-type:none;
                padding:0px 15px;
            }
            nav#menubar ul li a{
                color:white;
                text-decoration: none;
            }
            nav#menubar ul li a:hover{
                color:violet;
            }
        </style>
    
    </head>
    <body>
        <nav id="menubar">
            <ul>
                <li><a href="https://www.naver.com">네이버</a></li>
                <li><a href="https://www.daum.net">다음</a></li>
                <li><a href="https://www.google.com">구글</a></li>
                <li><a href="https://www.facebook.com">페이스북</a></li>
                <li><a href="https://www.twitter.com">트위터</a></li>
            </ul>
        </nav>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <title>표 응용1</title>
        <style>
            table{
                border-collapse:collapse; /* 이중테두리 제거 */
            }
            td,th{
                text-align:left;
                padding:5px;
                height:15px;
                width:100px;
            }
            thead,tfoot{
                background:darkgray;
                color:yellow;
            }
            tbody tr:nth-child(even){
                background:rgb(135, 174, 207);
            }
            tbody tr:hover{
                background:pink;
            }
        </style>
    </head>
    <body>
        <h3>2026년 1학기 성적</h3>
        <hr>
        <table>
            <thead>
                <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
            </thead>
            <tfoot>
                <tr><th>합</th><th>310</th><th>249</th></tr>
            </tfoot>
            <tbody>
                <tr><td>활기태</td><td>85</td><td>75</td></tr>
                <tr><td>김소연</td><td>90</td><td>80</td></tr>
                <tr><td>박재현</td><td>75</td><td>70</td></tr>
                <tr><td>김소연</td><td>60</td><td>24</td></tr>
            </tbody>
        </table>
    </body>
</html>

input[type=???]

<!DOCTYPE html>
<html>
    <head>
        <title>폼 스타일 주기</title>
        <style>
            input[type=text]{
                color:red;
            }
            input:hover, textarea:hover{
                background:aliceblue;
            }
            input[type=text]:focus, input[type=email]:focus{
                font-size:120%;
            }
            label{
                display:block;
                padding:10px;
            }
            label span{
                float:left;
                width:90px;
                text-align:right;
                padding:10px;
            }
        </style>
    </head>
    <body>
        <h3>CONTACT US</h3>
        <hr>
        <form>
            <label>
                <span>Name</span><input type="text" placeholder="Elvis"><br>
            </label>
            <label>
                <span>Email</span><input type="email" placeholder="elvis@graceland.com">
            </label>
            <label>
                <span>Comment</span><textarea placeholder="메시지를 남겨주세요"></textarea>
            </label>
            <label>
                <span></span><input type="submit" value"submit">
            </label>
        </form>
    </body>
</html>
profile
sangeun
이전 포스트

HTML 정리

다음 포스트

JS (1)

0개의 댓글